维基百科

https://zh.wikipedia.org/wiki/Sass

Sass（英文全称：Syntactically Awesome Stylesheets）

是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的类 CSS 语言。

发行时间：2007年
稳定版本：2016年3月28日

Sass 十分简洁，语法中几乎不含括号。
后来前端工程师表示不含括号看不懂，于是 Sass 的开发者又提供了 Scss，含括号。
弱弱的前端工程师终于表示能看懂了。

Sass的官方解释器是开源的并且用Ruby语言写成，但是也有用PHP、C语言、Java等实现的版本（C语言版本叫做llibSass，Java语言版本叫做JSass）。

SassScript提供以下功能：变量、嵌套、混入（Mixin）、选择器继承等。

#开始上手
* #### 嵌套选择器
* #### 变量
* #### mixn
* #### placeholder

1.安装和运行

创建html和sass文件

但是html并不会直接解析sass文件，所以我们需要工具来转换(不愿意折腾的小伙伴也可以进入 JsBin 或者 CodePen 在线体验scss哦)

首先初始化目录

1
npm init -y

为了便于配置和打包，我们使用parcel(代替webpack)

1
npm i -D parcel

运行

1
2
npx parcel index.html // 会自动安装node-sass
// 如果此步出错，请自行搜索错误

成功在html使用scss！

变量

1
2
3
4
5
// scss文件
$red: red;
h1 {
  color: $red;
}

嵌套选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 以往的css文件写法
.nav {
  boder: 1px solid red;
} 
.nav > ul {
  background: green;
}
.nav > ul > li {
  border: 1px solid blue;
}


// scss写法
$border-width: 1px;
.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      border: $border-width solid blue;
    }
  }
}

mixin

基本用法
把一堆共用样式写进一个函数里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// css写法
.nav {
  border: 1px solid red;
  > ul {
    background: green;
    > li {
       width: 300px;
       // 好大一块相同的css
       border: 1px solid red;
       background: red;
       border-radius: 50%;
       height: 200px;
    }
  }
}
.demo {
  width: 400px;
  // 好大一块相同的css
  border: 1px solid red;
  background: red;
  border-radius: 50%;
  height: 200px;
}


// scss写法
$border-width: 1px;
@mixin publicFn {
  border: 1px solid red;
  background: red;
  border-radius: 50%;
  height: 200px;
}

.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      width: 300px;
      @include publicFn;
    }
  }
}
.demo {
  width: 400px;
  @include publicFn;
 }

高级用法
既然是函数，就可以传值进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// scss文件
$border-width: 1px;
@mixin borderFn($border-color: red) { // 也可以设置默认值
  border: 1px solid $border-color; 
  ...
}

.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      @include borderFn(blue); // 等同于 border: 1px solid blue;...
    }
  }
}

placeholder

用途和mixin差不多，用于处理大段相同css代码

当我们使用mixin时。但是我们只写了一次代码，但是页面中却写了很多次，所以我们可以看到include只机械的拷贝了代码，这是mixin的问题，所以发明了placeholder带来更好的体验！

重复！

现在我们使用placeholder
简单的把mixin改成%号，include改成extend

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$border-width: 1px;
%publicFn {
  border: 1px solid red;
  background: red;
  border-radius: 50%;
  height: 200px;
}

.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      width: 300px;
      @extend %publicFn;
    }
  }
}
.demo {
  width: 400px;
  @extend %publicFn;
 }

ps：mixin 和 placeholder 区别，minxin可以传参

了解scss这四个基本功能以后，基本已经入门了(等着加工资把😁😁)。