如何利用sass快速构建自己的css通用样式

本文主要是介绍如何利用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哦。（^_^）

这篇关于如何利用sass快速构建自己的css通用样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！