如何利用sass快速构建本身的css通用样式

作前端开发，你必定或多或少的用过一些CSS工具库，好比Bootstrap, Tachyons等。

可是不一样的库对于类名的定义不尽相同，使用起来不免有些不太驾轻就熟。

本文将教你怎么用sass一步一步构建本身的样式库。

其实不难。若是对sass用法还不太熟悉，能够先看下这篇文章SASS用法指南。

环境配置

首先须要安装node-sass，后续咱们会用它将.scss文件编译成.css文件

npm install -g node-sass
复制代码

接下来咱们新建一个文件style.scss

定义网页基础样式

定义一些共通的基础样式：

* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

......
复制代码

这部分不作详细的介绍，能够根据本身的须要随意的增减。

构建字体尺寸样式

下面以构建字体尺寸为例，介绍如何只用几行代码就能够一次构建多个字体尺寸类。

首先新建一个字体尺寸的Map类型数据结构。

$fontSizeMap: (
  0: 0,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 3rem,
);
复制代码

而后经过@each对$fontSizeMap进行遍历：

@each $key, $val in $fontSizeMap {
  .ft-#{$key} {
    font-size: #{$val};
  }
}
复制代码

在终端编译一下style.scss

node-sass style.scss style.css
复制代码

若是编译成功，会在同级目录下生成一个style.css文件。

打开style.css文件，咱们经过scss建立的字体尺寸的类就已经自动编译好了。

.ft-0 {
  font-size: 0; }

.ft-1 {
  font-size: 0.5rem; }

.ft-2 {
  font-size: 1rem; }

.ft-3 {
  font-size: 1.5rem; }

.ft-4 {
  font-size: 3rem; }
复制代码

之后若是须要增长新的尺寸的字体，直接在$fontSizeMap中添加一条数据，而后从新编译一下就行了。

使用一样的方式，咱们能够很方便的构建一整套其余样式，好比：字重，文字颜色，背景颜色，边框大小等等。

构建margin/padding样式

接下来介绍一个复杂一点的，以margin/padding为例。

最终要生成下面这三类样式：

1. 每条边：相似mt0, mr0, mb0, ml0
2. 对角边: mx0, my0
3. 全部边: ma0

首先要定义三个Map类型数据结构

1. 类型:

$spaceTypes: (
    m: margin,
    p: padding
  );
复制代码

2. 方向:

$spaceDirections: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
复制代码

3. 边距大小

$spaceSizes: (
  0: 0,
  1: .5rem,
  2: 1rem,
  3: 1.5rem,
  4: 3rem,
);
复制代码

而后一样利用@each函数遍历以上三个数据结构，可是须要多层嵌套:

@each $typeKey, $type in $spaceTypes {
  @each $sizeKey, $size in $spaceSizes {
    // mt0, mr0, mb0, ml0
    @each $directionKey, $direction in $spaceDirections {
      .#{$typeKey}#{$directionKey}#{$sizeKey} {
        #{$type}-#{$direction}: $size;
      }
    }

    // mx0, my0
    .#{$typeKey}x#{$sizeKey} {
      #{$type}-left: $size;
      #{$type}-right: $size;
    }
    .#{$typeKey}y#{$sizeKey} {
      #{$type}-top: $size;
      #{$type}-bottom: $size;
    }

    // ma0
    .#{$typeKey}a#{$sizeKey} {
      #{$type}: $size;
    }
  }
}
复制代码

再次编译style.scss，就能看到咱们一次建立了70个类。

$spaceTypes.length * ($spaceDirections.length + 3) * $spaceSizes.length
=> 2 * (4 + 3) * 5 = 70
复制代码

在上文中咱们定义了不少的Map类型数据结构，为了之后维护方便，最好把他们放到一个单独的文件中。

新建一个文件_variables.scss。把以前定义的全部变量都放到这里维护。

在style.scss中经过import把它们引入进来。

@import './variables';
复制代码

上面新建的文件名前面有个_， _表示此文件将不会被编译为css文件，而且引用该文件的时候带不带_均可以。

总结

经过上面的介绍，你会发现，其实核心就是@each的用法，若是在配合一些@if @else条件语句，就能够很方便的构建一个很是轻量级的样式库。

若是你是利用构建工具(Gulp, Webpack等)编译，配合autoprefixer能够很方便的构建一个兼容各个浏览器的样式库。

下面是笔者本身建立的一个css样式库，里面包含了开发中经常使用的一些样式的定义。

若是你觉着有须要能够直接拿去用，或者自行进行增减。

最后，若是觉着本文对你有一点点启发，别忘了给个star哦。（^_^）