一文带你了解初学者应该知道的关于Sass的一切

你可能学过Vue，可能学过React或者Angular，可能用过element，可能用过nx等生成全栈式的脚手架工具，那么下面几段代码你可能很熟悉：

// Vue-cli
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by 
default): (Use arrow keys)                               
> Sass/SCSS (with dart-sass)        
Sass/SCSS (with node-sass)                                              
Less                                                      
Stylus  

? Which stylesheet format would you like to use? (Use arrow keys)  
> CSS                                                                                                 
SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]                   
Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
Less   [ http://lesscss.org                                             ]      
Stylus [ http://stylus-lang.com                                         ] 

这就涉及到了我们今天要讲的sass ,它正是如今最流行的几种CSS预编译语言中的一种。

Sass,Less,Stylus,Postcss

看题目就会觉得头大，我们都学过CSS，也知道CSS确实存在一些设计风格上不足或者不习惯，而CSS预编译语言就是从这个角度去解决这个不习惯的，首先如今最流行的CSS预编译语言有三种，分别是Sass（又分为大括号风格的scss和缩进风格的sass，大家可以从JS和Py的角度去区别），Less，Stylus。

那么这几种CSS预编译语言有什么区别呢？嗯我也不知道，我就学了Sass。

那么为什么我会选择Sass呢？在Github上星数多？不是，Less最多，最新？不是Stylus最新，我选择Sass完全是因为它的logo好看：

那么Postcss是什么呢？其实他和刚刚我们讲的三个是有本质上的不同的，你可能没有听说过，但你的项目中很可能使用过。著名的autoprefixer就是Postcss的一部分，它可以根据浏览器的不同把浏览器厂商不同前缀的代码加入到你的代码中去，而不用使用can i use之类的工具去查找。

为什么说你可能用过呢，拿augular举例，建个demo，去 package.json里面查一下，你会发现：

postcss得以与sass等一起使用，但是由于postcss并不是我们的重点，这里不再详述，我们还是把重点放到sass身上，先过一遍核心功能。

core func

这里我使用的是更类似JS风格的scss，首先是嵌套语法：

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none
    }
}

编译后的代码也贴上吧，想到大家应该也猜到了：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

关于引用父选择符& ：

a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    background-color: $primary_color;

    &:hover {
        color: aliceblue;
    }
}

编译结果：

a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  background-color: #ccc;
}
a:hover {
  color: aliceblue;
}

关于import，css中并不被我们所重视，根本原因就算css的import太耗时，而在sass中你完全不用担心这个问题：

@import './help';

注意使用的是@符号，这里如果我们定义一个同级的help文件，放上：

$primary-color: #ccc;

li {
    padding: 10px;
}

那么原文件也可以使用这个$定义的变量，以及li属性。

关于mixin:

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}

.box {
    @include transform(rotate(30deg))
}

编译结果如下，可以解决什么问题就不用我解释了吧。

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

关于注释方法//，当然是不会变编译的了。

关于计算方法：

article[role='main'] {
    float: left;
    width: 600px/960px*100%
}

aside[role="complementary"] {
    float: right;
    width: 300px/960px*100%
}

编译结果：

article[role=main] {
  float: left;
  width: 62.5%;
}

aside[role=complementary] {
  float: right;
  width: 31.25%;
}

关于继承：

%message-shared {
    background-origin: padding-box;
    padding: $primary-color;
}

%equal-heights {
    display: flex;
    flex-wrap: wrap
}

.message {
    @extend %message-shared
}

.success {
    @extend %message-shared;
    border-block-color: green;
}

.error {
    @extend %message-shared;
    border-block-color: red;
}

编译为：

.error, .success, .message {
  background-origin: padding-box;
  padding: #ccc;
}

.success {
  border-block-color: green;
}

.error {
  border-block-color: red;
}

注意没有使用到的%equal-height并没有被编译。

其实大家可以看出来，核心功能看起来并不是很多，但是想要用好当然还是需要不断的练习的。

以上。