sass自学手册

最新推荐文章于 2022-04-08 16:55:21 发布

南京小菜

最新推荐文章于 2022-04-08 16:55:21 发布

阅读量529

点赞数

分类专栏： web vue nodejs

本文链接：https://blog.csdn.net/shi860715/article/details/118361053

版权

vue 同时被 3 个专栏收录

15 篇文章 2 订阅

订阅专栏

web

14 篇文章 0 订阅

订阅专栏

nodejs

13 篇文章 0 订阅

订阅专栏

scss 自学手册

1 安装分类

1.1 不依赖编辑器

#全局安装scss预处理器，使用终端命令实现编译

node 环境下node-sass模块
node 环境下dart-sass模块
ruby 环境下的sass模块
dart 环境下的sass模块

#注：这里是推荐顺序是联系场景，而开发环境下推荐使用dart-sass
#本质：某个语言的第三方库或者命令行工具

1.2 依赖编辑器

IDE 代表webstrom  前提是安装上述1中命令行编译工具，配置自动动命令，另安装一个代理提示插件scss
vscode  使用插件easy sass ，ssass

2 安装步骤

2.1 不依赖编辑器

2.1.1 node 环境安装 node-sass

1、安装node就不展示了，大家自己安装
2、安装cnpm（不推荐将源换成淘宝镜像），$npm i -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\Administrator>npm i -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 264 packages in 7s

C:\Users\Administrator>

3、安装node-sass $npm i -g node-sass 或 $cnpm i -g node-sass

C:\Users\Administrator>npm i -g node-sass
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@15.10.0 | win32 | x64
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
npm ERR! gyp ERR! find Python checking if "python3" can be used
npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if "python" can be used
npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if "python2" can be used
npm ERR! gyp ERR! find Python - "python2" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if Python is C:\Python37\python.exe
npm ERR! gyp ERR! find Python - "C:\Python37\python.exe" could not be run
npm ERR! gyp ERR! find Python checking if Python is C:\Python27\python.exe
npm ERR! gyp ERR! find Python - "C:\Python27\python.exe" could not be run
npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python
npm ERR! gyp ERR! find Python - "py.exe" is not in PATH or produced an error
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python You need to install the latest version of Python.
npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
npm ERR! gyp ERR! find Python you can try one of the following options:
npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
npm ERR! gyp ERR! find Python   npm config set python "C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python For more information consult the documentation at:
npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
npm ERR! gyp ERR! stack     at PythonFinder.fail (C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass\node_modules\node-gyp\lib\find-python.js:302:47)
npm ERR! gyp ERR! stack     at PythonFinder.runChecks (C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass\node_modules\node-gyp\lib\find-python.js:136:21)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass\node_modules\node-gyp\lib\find-python.js:200:18)
npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass\node_modules\node-gyp\lib\find-python.js:266:16)
npm ERR! gyp ERR! stack     at exithandler (node:child_process:333:5)
npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (node:child_process:345:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:378:20)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:480:16)
npm ERR! gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:81:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator\\AppData\\Roaming\\nvm\\v15.10.0\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass
npm ERR! gyp ERR! node -v v15.10.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-06-29T02_12_26_293Z-debug.log

C:\Users\Administrator>cnpm i -g node-sass
Downloading node-sass to C:\Program Files\nodejs\node_modules\node-sass_tmp
Copying C:\Program Files\nodejs\node_modules\node-sass_tmp\_node-sass@6.0.1@node-sass to C:\Program Files\nodejs\node_modules\node-sass
Installing node-sass's dependencies to C:\Program Files\nodejs\node_modules\node-sass/node_modules
[1/15] async-foreach@^0.1.3 installed at node_modules\_async-foreach@0.1.3@async-foreach
[2/15] get-stdin@^4.0.1 installed at node_modules\_get-stdin@4.0.1@get-stdin
[3/15] nan@^2.13.2 installed at node_modules\_nan@2.14.2@nan
[4/15] chalk@^1.1.1 installed at node_modules\_chalk@1.1.3@chalk
[5/15] lodash@^4.17.15 installed at node_modules\_lodash@4.17.21@lodash
[6/15] gaze@^1.0.0 installed at node_modules\_gaze@1.1.3@gaze
[7/15] stdout-stream@^1.4.0 installed at node_modules\_stdout-stream@1.4.1@stdout-stream
[8/15] cross-spawn@^7.0.3 installed at node_modules\_cross-spawn@7.0.3@cross-spawn
[9/15] true-case-path@^1.0.2 installed at node_modules\_true-case-path@1.0.3@true-case-path
[10/15] glob@^7.0.3 installed at node_modules\_glob@7.1.7@glob
[11/15] npmlog@^4.0.0 installed at node_modules\_npmlog@4.1.2@npmlog
[12/15] request@^2.88.0 installed at node_modules\_request@2.88.2@request
[13/15] sass-graph@2.2.5 installed at node_modules\_sass-graph@2.2.5@sass-graph
[14/15] meow@^9.0.0 installed at node_modules\_meow@9.0.0@meow
[15/15] node-gyp@^7.1.0 installed at node_modules\_node-gyp@7.1.2@node-gyp
execute post install 1 scripts...
[1/1] scripts.install node-sass@6.0.1 run "node scripts/install.js", root: "C:\\Program Files\\nodejs\\node_modules\\node-sass"
Downloading binary from https://cdn.npm.taobao.org/dist/node-sass/v6.0.1/win32-x64-88_binding.node
Download complete
Binary saved to C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass\vendor\win32-x64-88\binding.node
Caching binary to C:\Users\Administrator\.npminstall_tarball\node-sass\6.0.1\win32-x64-88_binding.node
[1/1] scripts.install node-sass@6.0.1 finished in 990ms
[1/1] scripts.postinstall node-sass@6.0.1 run "node scripts/build.js", root: "C:\\Program Files\\nodejs\\node_modules\\node-sass"
Binary found at C:\Users\Administrator\AppData\Roaming\nvm\v15.10.0\node_modules\node-sass\vendor\win32-x64-88\binding.node
Testing binary
Binary is fine
[1/1] scripts.postinstall node-sass@6.0.1 finished in 184ms
deprecate request@^2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
All packages installed (204 packages installed from npm registry, used 4s(network 3s), speed 1.03MB/s, json 181(357.38kB), tarball 2.65MB)
[node-sass@6.0.1] link C:\Program Files\nodejs\node-sass@ -> C:\Program Files\nodejs\node_modules\node-sass\bin\node-sass

C:\Users\Administrator>

4、检查是否安装成功 $node-sass -v
C:\Users\Administrator>node-sass -v
node-sass       6.0.1   (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]
通过安装发现使用npm 安装会出错，还是使用cnpm吧，虽然好多地方不建议这么干，但是npm 下载总是出错

2.1.2 使用

#单文件编译
$node-sass 原有scss文件 生成的css 文件
$node-sass 原有scss文件 -o 生成目录
#多文件
$node-sass 原有的scss文件目录 -o 生成的css文件目录
#文件监听模式
$node-sass -w 原有scss文件 -o 生成目录
$node-sass -w 原有的scss文件目录 -o 生成的css文件目录

2.1.3 node 环境安装 dart-sass

//#安装
1、安装node 环境
2、安装cnpm taobao镜像
3、安装dart-sass $npm i -g sass 或 $cnpm i -g sass
//#注： 该模块为第三方库，所以可以考虑使用cnpm i sass -D(-D == --save-dev) 仅对某小项目当做开发时依赖进行使用

//#使用
//#文档：https://sass-lang.com/documentation/js-api 

const sass = require('sass');
sass.render({file:scss_filename},function(err,result){...});
//or 
const result = sass.renderSync({file:scss_filename});
//#renderSync 的速度一般是render 的两倍，这是由异步回调所带来的开销而导致

2.1.4 ruby安装

1、安装ruby https://rubyinstaller.org/downloads
2、配置镜像 $gem sources -a https://gems.ruby-china.com/ -r https://rubygems.com
3、查看数据源 $gem sources -l # 确保只有一个数据源   gems.ruby-china.com
4、安装scss $gem install sass
5、检查是否安装成功 $sass -v


#注意ssl 错误的解决方案：
#liunx中，修改~/.gemrc文件，增加ssl_verify_mode:0 配置
#~ 表示用户根目录，在windows中，文件位置为：c:/users/用户名/.gemrc

---
:sources:
- https://gems.ruby-china.com
:ssl_verify_mode:0

在这里插入图片描述

2.1.5 ruby中sass的使用

#单文件
$sass 原有scss文件 [:] 生成css文件 // 中括号表示可以写，也可以不用写的意思
#多文件编译
$sass -- watch 原有scss文件目录：生成文件css目录

#文件监听模式
$sass --watch 原有的scss文件：生成css文件
$sass --watch 原有scss文件目录：生成的css文件目录

#效果如果使用监听的方式，编译进程将不会结束，一直监听文件内容的变化，不断进行编译

2.2 VSCODE 安装scss环境

vscode 安装插件easy sass ，ssass

下面这段配置是vscode配置easy sass中生成css的格式的，分为普通版本和压缩版本

  #这里是配置生成css文件的格式
  "easysass.formats": [

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    #这里是生成css文件目标目录，默认是生成到当前目录./
    "easysass.targetDir": "./css"

3 语法

sassScript

在css属性的基础上sass提供了一些名为sassScript的新功能。sassScript可以作用任何属性，允许属性使用变量、算数运算等额外功能。
弱类型语言，对语法要求没有那么严格

3.1注释

SASS支持标准的css多行注释/**/，以及单行注释//，前者会被完整输出到编译后的css文件中，而后者则不会
将！作为多行注释的一个字符表示在压缩输出模式下保留这条注释并输出到css文件中，通常用于添加版权信息
插值语句（interpolation）也可以写进多行注释中输出变量值

/*
    hello world！
 */
 
 //compile scss  tocss
 
 //w yao kaigan le 
 
 $black:#f3e3232
 html{
  background-color:$black;
 }
 
 $author: 'shi860715@126.com'
 /*!
  AUTHOR: #{$author}
  */
 
 
 #编译后不压缩
 @charset "UTF-8";
body {
  width: 30px;
  height: 30px;
}

/*
    hello world！
 */
html {
  background-color: #f3e1e1;
}

/*!
  AUTHOR: shi860715@126.com
  */
#编译后压缩文件
body{width:30px;height:30px}html{background-color:#f3e1e1}/*!
  AUTHOR: shi860715@126.com
  */

3.2 变量

3.2.1 定义

变量以美元符号开头，赋值方法与css属性的写法一样

$width:1600px;
$pen-size:3em;

3.2.2 使用

直接使用变量的名称及即可调用变量

#app{
  height:$width;
  font-size:$pen-size;
}

3.2.3 作用域

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

#app{
  $width: 3em!global;
  width:$width
}

3.3 数据类型

sassscript 支持7中主要的数据类型；

数字：120px 1 10 1.5em，带单位和不带单位数字

注：单位会和数字当成统一整体，进行算数运算
字符串，有引号的字符串与无引号字符串

注：在编译css文件时不会改变其类型。只有一种情况列外，使用#{} (interpolation)时，有引号的字符串将被编译成无引号的字符串，这样便于在mixin中引用选择器类型
颜色，三种格式都支持：blue，#000000，rgba（255，0，0，0.5）
布尔值，true ，false
空值，null

由于它代表空，所以不能使用它和任何雷兴国进行算数运算
数组（list），空额或者都好进行分割
maps ，相当于JavaScript中的object

sassscript 也支持其他css属性值，比如unicode字符集，或者importtant声明，然而不会特殊对待这些属性，一律视为无引号字符串

判断数据类型的方式：
type-of($value)

3.4 运算

3.4.1.数字运算符

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

如果要保留运算符号，则应该使用插值语法

+

// 纯数字
$add1: 1 + 2;	// 3
$add2: 1 + 2px; // 3px
$add3: 1px + 2; // 3px
$add4: 1px + 2px;//3px

// 纯字符串
$add5: "a" + "b"; // "ab"
$add6: "a" + b;	  // "ab"
$add7: a + "b";	  // ab
$add8: a + b;	  // ab

// 数字和字符串
$add9: 1 + a;	// 1a
$adda: a + 1;	// a1
$addb: "1" + a; // "1a"
$addc: 1 + "a"; // "1a"
$addd: "a" + 1; // "a1"
$adde: a + "1"; // a1
$addf: 1 + "1"; // "11"

// 总结：
a.纯数字：只要有单位，结果必有单位
b.纯字符串：第一个字符串有无引号决定结果是否有引号
c数字和字符串：第一位有引号，结果必为引号；第一位对应数字非数字且最后一位带有引号，则结果必为引号

-

$add1: 1 - 2;	// -1
$add2: 1 - 2px; // -1px
$add3: 1px - 2; // -1px
$add4: 1px - 2px;//-1px

$sub1: a - 1;  // a-1
$sub2: 1 - a;  // 1-a
$sub3: "a" - 1;// "a"-1
$sub4: a - "1";// a-"1"

// 总结：
每个字段必须前部分为数字，且两个字段只能一个后部分是字符(因为此时后缀被当被单位看待了)。
只要其中一个值首位不为数字的，结果就按顺序去除空格后拼接起来

*

$num1: 1 * 2;    // 2
$mul2: 1 * 2px;  // 2px
$num3: 1px * 2;  // 2px
$num4: 2px * 2px;// 编译不通过

$num5: 1 * 2abc; // 2abc

// 总结：
每个字段必须前部分为数字，且两个字段只能一个后部分是字符(因为此时后缀被当被单位看待了)。其余编译不通过

/

// 总结：
a.不会四舍五入，精确到小数点后5位
b.每个字段必须前部分为数字，且当前者只是单纯数字无单位时，后者(除数)后部分不能有字符。其余结果就按顺序去除空格后拼接起来。
(因为此时后缀被当被单位看待了)

%

// 总结：
a.值与"%"之间必须要有空格，否则会被看做字符串

3.4.2.关系运算符

大前提：两端必须为数字 或 前部分数字后部分字符

返回值：true or false

>
```
$a: 1 > 2; // false
```
<
```
$a: 1 > 2; // true
```
>=
```
$a: 1 >= 2; // false
```
<=
```
$a: 1 <= 2; // true
```

3.4.3.相等运算符

作用范围：相等运算 ==, != 可用于所有数据类型

返回值：true or false

$a: 1 == 1px; // true
$b: "a" == a; // true

// 总结：
前部分为不带引号数字时，对比的仅仅是数字部分；反之，忽略引号，要求字符一一对应

3.4.4.布尔运算符

SassScript 支持布尔型的 and or 以及 not 运算。

$a: 1>0 and 0>=5; // fasle

// 总结：
值与"and"、"or"和"not"之间必须要有空格，否则会被看做字符串

3.4.5.颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值

颜色值与颜色值

p {
  color: #010203 + #040506;
}

// 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
// p {
  color: #050709; }

颜色值与数字

p {
  color: #010203 * 2;
}

// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
// p {
  color: #020406; }

RGB和HSL

// 如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

// p {
  color: rgba(255, 255, 0, 0.75); }

3.4.6.运算优先级

()
*、/、%
+、-
> 、<、>=、<=

3.5 嵌套语法

嵌套语法其实就是一个分层次结构的写法，使得我们的css更加更加简洁且层次结构明显。一眼就能看出模块的结构。

3.6 杂货语法

3.6.1 插值语法

通过#{}插值语句可以在选择器、属性名、属性值中使用变量

但是大多数情况下，这样使用属性值可能还不如直接使用变量，但是使用#{}可以避免sass运行运算表达式，直接编译css

$name：foo;
$attr:border;

p.#{$name}{
   #{$attr}-color:$name
}

#编译后：
p.foo {
  border-color: foo;
}

3.6.2 & insassScript

& 为父选择器

a{
    color:yellow;
    &:hover{
        color: green;
    }
    &:active{
        color: red;
    }
}

// 编译后结果

a {
  color: yellow;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

3.6.3 !default

可以在变量结尾添加!default 给一个未通过！default声明赋值的变量赋值，此时，如果变量已经被赋值，不会重新赋值，单如果变量没有赋值，则会被赋予初始值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

// 编译为：
#main {
  content: "First content";
  new-content: "First time reference"; }

3.6.4 !global

将局部变量提升为全局变量

#app{
  $width: 3em!global;
  width:$width
}
#app1{
  width:$width
}

3.6.5 !optional

当@extend相关代码出现语法错误的时，编译器可能会给我们“乱编译”css，我们加上这个参数可以在出现问题后不让它编译该部分代码

3.7 @-Rules与指令

3.7.1 @import

sass拓展了@import得到功能，允许其导入scss或sass文件。被导入的文件将合并并编译到童一个csss文件中。另外，被导入的文件中所包含的变量或者混合指令mixin都可以在导入的文件中使用。

通常，@import 寻找sass文件并将其导入，但是在一下情况中，@import仅作为普通css语句，不会导入任何sass文件

文件拓展名是 .css
文件名以htt://开头
文件名是url（）
@import包含 media queries

@import "foo.scss"
@import "bar"
    // 以上两种情况都可以
    
    // 以下几种方式都不可行
@import 'FOO.CSS'
@import 'foo' screen;
@import 'http://fooo.com/bar'
@import url(fooo)

SASS允许同时导入多个文件，例如同时导入 aa和bb两个文件

@import 'aa','bb';

3.7.2 @extend

@extend 就是类似于java 中的继承的意思


.father{
    color:  red;
    font-size: 50px;
}

.son{
    @extend .father;
    background-color: #fff;
}

.sonandson{
    @extend .son
}

//编译后代码
.father, .son, .sonandson {
  color: red;
  font-size: 50px;
}

.son, .sonandson {
  background-color: #fff;
}

//我们看到.son 拥有了和.father 同样的样式

3.8 控制指令

3.8.1 if

三元运算符

表达式：if(expression,value1,value2)

P{
    color:if(1 + 1 == 2 ,green, red)
}

P{
    color:if(1 + 1 != 2 ,green, red)
}

#编译后
P {
  color: green;
}

P {
  color: red;
}

3.8.2.`@if`

条件语句

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

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

单@if

p {
    @if 1 + 1 == 2 {
        color: red;
    }
}

// compile:
p {
  color: red;
}

@if - @else

p {
    @if 1 + 1 != 2 {
        color: red;
    } @else {
        color: blue;
    }
}

// compile:
p {
  color: blue;
}

@if - @else if - @else

$age: 19;

p {
    @if $age == 18 {
        color: red;
    } @else if $age == 19 {
        color: blue;
    } @else {
        color: green;
    }
}

// compile:
p {
  color: blue;
}

3.8.3.`@for`

循环语句

表达式：@for $var from <start> through <end> 或 @for $var from <start> to <end>

through 和 to 的相同点与不同点：

相同点：两者均包含的值
不同点：through包含的值，但to不包含的值

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

// compile:
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

3.8.4.`@while`

循环语句

表达式：@while expression

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// compile:
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }

3.8.5.`@each`

循环语句

表达式：$var in $vars

$var 可以是任何变量名

$vars 只能是Lists或者Maps

一维列表

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

// compile:
.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 $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

// compile:
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

maps

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

// compile:
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }