09-移动端开发教程-Sass入门-阿里云开发者社区

1. 引言

CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，让CSS的编程黯淡无光，Sass就是一种增强CSS编程的扩展语言（CSS4也可以期待），有了像Sass这种预处理语言后，CSS的编程不再局限在枚举属性了，可以有更广阔的舞台。

2. Sass的原理

Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。

当然浏览器是不认识Sass语法。开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。

//sass 代码
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

// 通过工具将上面的sass代码可以转成下面的CSS代码↓↓↓

//css 代码
//-------------------------------
body{
    font-size:12px;
}

3. Sass的编译环境

Sass代码的编译转换工具可以用sass命令行工具、gulp、开发工具插件、webpack等。

我推荐大家学习阶段直接用开发工具的插件自动生成即可。如果你是在项目阶段使用，那肯定有自动化的流程构建工具比如：gulp、webpack都有对应的插件或者loader，直接对应配置即可。

老马推荐vscode的自动编译Sass文件的插件：Live Sass Compiler

使用方法：
第一步：用vscode打开scss文件。
第二步：ctrl+shift+p(mac ctrl→command）输入sass选择入下图选项

4. Sass的两种文件后缀

sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

老马推荐使用scss文件后缀及使用括号和分号的编写方式。

5. Sass中的变量和注释

5.1 定义变量及使用

Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。

$a-color: blue; // 定义变量。
.box {
  color: $a-color; // => blue  使用变量
}

用vscode插件转换一下试试？

5.2 局部变量和全局变量。

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

//sass style
//-------------------------------
$a-color: blue;  // 全局变量

.box {
  $a-color: red; // 局部变量，box内部不使用。
  color: $a-color; // => red  局部变量
}

.child {
  color: $a-color; // => blue  全局变量
  $main-width: 16em !global; // 在局部定义全局的变量。
}

.main {
  width: $main-width;  // 使用在内部定义的全局变量。
}

/*===============生成的CSS代码===================*/
.box {
  color: red;
}

.child {
  color: blue;
}

.main {
  width: 16em;
}

从以上代码中也可以看到Sass支持CSS的注释/**/之外还支持双斜线的注释: //

5.3 特殊变量

如果变量作为CSS属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。

//sass style
//-------------------------------
$side: top;
.box {
  border-#{$side}: 1px solid #09c;
}

//css style
//-------------------------------
.box {
  border-top: 1px solid #0098cc;
}

6. 嵌套(Nesting)

6.1 嵌套规则 (Nested Rules)

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

//sass style
//-------------------------------
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

//css style
//-------------------------------
#main p {
  color: #00ff00;
  width: 97%;
}

#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

6.2 父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。

//sass style
//-------------------------------
.box {
  border-#{$side}: 1px solid #09c;
  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 100px;
    top: 5px;
  }
}
//css style
//-------------------------------
.box {
  border-top: 1px solid #09c;
}
.box::before {
  content: '';
  display: block;
  position: absolute;
  left: 100px;
  top: 5px;
}

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。

//sass style
//-------------------------------
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

6.3 @at-root

@at-root用来跳出当前选择器嵌套。

//sass style
//-------------------------------
.demo {
    ...
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
          ...
        }
    }
}

//css style
//-------------------------------   
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

7. 运算

Sass支持多种数据类型的变量，比如：

数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

7.1 数值运算

Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

//sass style
//-------------------------------
.box {
  height: 17px + 20px; // => 37px         数字加法运算
  width: (75rem/16);   // => 4.6875rem    除法运算
  color: #303030*2;  // => #606060;     乘法运算（颜色运算）
  padding: 20px - 3;   // => 17pex        数字减法
  font-family: sans- + "serif"; // => sans-serif 字符串加法
  width: 1em + (2em * 3); // 带括号的运算
}
//css style
//-------------------------------   
.box {
  height: 37px;
  width: 4.6875rem;
  color: #606060;
  padding: 17px;
  font-family: sans-serif;
  width: 7em;
}

8. Sass语句

Sass提供了常用的循环、判断分支语句的相关指令，可以让我们按照编程语言一样编写Sass代码。

8.1 if语句

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。

//sass style
//------------------------------- 
$w: 960px;
$type: monster;
.box {
  @if 2*3 > 5 {  // 简单if判断语句
    color: red;
  }
  @if $w > 900px {
    width: $w;
  } @else {     // if  else 语句
    width: 900px;
  }

  @if $type == ocean {  // 多个if和else语句
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//css style
//------------------------------- 
.box {
  color: red;
  width: 960px;
  color: green;
}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

8.2 for循环语句

@for 指令可以在限制的范围内重复输出格式。类似for循环。
两种格式：

@for $var from <start> through <end> :条件范围包含 <start> 与 <end> 的值
@for $var from <start> to <end>: 围只包含 <start> 的值不包含 <end> 的值

//scss style
//------------for througth循环------------------- 
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
//------------------------------- 
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }

//scss style
//------------for  to 循环------------------- 
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
//------------------------------- 
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }

8.3 each循环

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

//sass style
//------------------------------- 
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css style
//-------------------------------
.puma-icon {
  background-image: url("/images/puma.png");
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}
.egret-icon {
  background-image: url("/images/egret.png");
}
.salamander-icon {
  background-image: url("/images/salamander.png");
}

复杂对应each

//sass style
//------------------------------- 
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

9. 混合指令 (Mixin Directives)

9.1 不带参数的简单Mixin

混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。

//sass style
//------------------------------- 
// 定义mixin reset, 用@mixin开头，后面跟空格和混合块的名字。然后是语句块
@mixin reset {  
  padding: 0;
  margin: 0;
}
html, body, div , input {
  @include reset(); // 引用 reset 混合块。用@include指令引用混合块。
}
//css style
//-------------------------------
html, body, div, input {
  padding: 0;
  margin: 0;
}

9.2 带参数的Mixin

Mixin还可也添加参数，跟函数一样使用。

//sass style
//------------------------------- 
@mixin sexy-border($color, $width) {
  border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }

//css style
//-------------------------------
p {
  border: 1px solid blue;
}

10. 函数指令 (Function Directives)

虽然Mixin功能强大，但是某些场景下还是函数应用更方便，Sass也提供了自定义函数的用法。

//sass style
//------------------------------- 
$grid-width: 40px;
$gutter-width: 10px;

// 定义自定义函数 grid-width
@function grid-width($n) {  // 接受一个参数$n
  @return $n * $grid-width + ($n - 1) * $gutter-width;  // 返回值。
}
#sidebar { width: grid-width(5); }   // 在属性中调用函数

//css style
//-------------------------------
#sidebar {
  width: 240px;
}

11. 继承(扩展)

11.1 基本继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1, .speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

11.2 占位符%

可以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。占位选择器以 %标识定义，通过 @extend调用。

//sass style
//------------------------------- 
%ir {    // 定义占位符。没有选择器名字的一段代码而已。
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1, .ir {
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

#header h1 {
  width: 300px;
}

12. 导入文件

Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。

所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。

例如： a.scss 文件

//a.scss
//-------------------------------
body {
  background: #eee;
}

main.scss 主文件。

//sass style
//------------------------------- 
@import "reset.css";  // 导入css文件，不会进行编译。
@import "a";   // 导入a.scss 文件，后缀省略
p{
  background: #0982c1;
} 

//css style
//-------------------------------
@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

参考列表：

联系老马

对应视频地址：https://qtxh.ke.qq.com/
老马qq： 515154084
老马微信：请扫码

感谢您对老马的支持

09-移动端开发教程-Sass入门

1. 引言

2. Sass的原理

3. Sass的编译环境

4. Sass的两种文件后缀

5. Sass中的变量和注释

5.1 定义变量及使用

5.2 局部变量和全局变量。

5.3 特殊变量

6. 嵌套(Nesting)

6.1 嵌套规则 (Nested Rules)

6.2 父选择器 & (Referencing Parent Selectors: &)

6.3 @at-root

7. 运算

7.1 数值运算

8. Sass语句

8.1 if语句

8.2 for循环语句

8.3 each循环

9. 混合指令 (Mixin Directives)

9.1 不带参数的简单Mixin

9.2 带参数的Mixin

10. 函数指令 (Function Directives)

11. 继承(扩展)

11.1 基本继承

11.2 占位符%

12. 导入文件

联系老马

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

09-移动端开发教程-Sass入门

1. 引言

2. Sass的原理

3. Sass的编译环境

4. Sass的两种文件后缀

5. Sass中的变量和注释

5.1 定义变量及使用

5.2 局部变量和全局变量。

5.3 特殊变量

6. 嵌套(Nesting)

6.1 嵌套规则 (Nested Rules)

6.2 父选择器 & (Referencing Parent Selectors: &)

6.3 @at-root

7. 运算

7.1 数值运算

8. Sass语句

8.1 if语句

8.2 for循环语句

8.3 each循环

9. 混合指令 (Mixin Directives)

9.1 不带参数的简单Mixin

9.2 带参数的Mixin

10. 函数指令 (Function Directives)

11. 继承(扩展)

11.1 基本继承

11.2 占位符%

12. 导入文件

联系老马

热门文章

最新文章

相关课程

相关电子书

相关实验场景