个人 css 预处理器 scss 笔记分享

css扩展 (CSS Extensions)

嵌套规则 (Nested Rules)

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

    .father{ // 外层father，是里层child的父级 【页可以依次类推层层嵌套】
        color:red;
        .child{
            color:green;
        }
    }

编译后…

/* 上面的sass语句等同于 */
    .father{
        color:red;
    }
    .father .child{
        color:green;
    }

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理，并且方便维护与代码区域快清晰

父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器 - 例如，当给某个元素设定 hover 样式时 ，或者当 body 元素有某个 classname 时

// 语法规则 $
    .father{
        .father-child{
            // 当子集中的类名中包含父元素的类名 - 未简化版
        }
        &-child{
            // 简化版 - 与父元素类名相同部分可以直接使用 $ 符号代替
        }
    }

    // 也可以使用父级选择器来在父级的内部设定父级的 hover 效果等....
    .father{
        color:pink;
        &:hover{
            color:green;
        }
    }

编译后…

    .father{
        
    }
    .father-child{

    }
    .father-child{

    }

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如

    .father{
        font: { // 以冒号隔开
            family:"楷体";
            size:16px;
            weight:bold;
        }
        text: {

        }
        // ....  
    }

    // 在有多个属性存在着命名空间时 - 使用scss的属性嵌套 可以大大提高代码的可阅读性【也更能方便与管理改进...】

编译后…

    .father{
        font-family:"楷体";
        font-size:16px;
        font-weight:bold;
    }

占位符选择器 %name

必须通过 @extend 指令调用，若没用经过@extend调用 - 编译时不会产生代码

例1【没有经过@extend调用】

// 语法百分号（%）加名称
    %name1{
        color:red;
    }
    %name2{
        color:green;
    }

编译后…

/* 为空（null） */

例2【经过@extend调用】

// 语法百分号（%）加名称
    %name1{
        color:red;
    }
    %name2{
        color:green;
    }

    a{ @extend %name1; }
    div{ @extend %name2; }

编译后…

    a{
        color:red;
    }
    div{
        color:green;
    }

可以理解为 % 占位符选择器是预先设好属性 - 当某个元素需要的时候，在将其使用 @extend 来调用

注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会

    /* This comment is
    * several lines long.
    * since it uses the CSS comment syntax,
    * it will appear in the CSS output. */
    body { color: black; }

    // These comments are only one line long each.
    // They won't appear in the CSS output,      
    // since they use the single-line comment syntax. 
    a { color: green; }

编译后…

    /* This comment is
    * several lines long.
    * since it uses the CSS comment syntax,
    * it will appear in the CSS output. */ 
    body {
    color: black; }

    a {
    color: green; }

也可以理解为在sass语法中，单行注释不会编译到 css 文件中

SassScript

Interactive Shell

Interactive Shell 可以在命令行中测试 SassScript 的功能 - 在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果：

// 语法
    sass -i // 在终端中输入 sass -i 命令  --  测试SassScript

    >> "Hello, Sassy World!" // 测试内容
    "Hello, Sassy World!" // 测试结果

    >> 1px + 1px + 1px // 测试内容
    3px // 测试结果

可以方便调试等…

变量 $

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

// 定义方式 - 以美元符号开头 紧接变量名 -- 赋值方式与css属性写法一致
    $font_size:16px; // 变量编译后不会展示在css文件中

    // 使用sass变量，直接在属性处调用即可 -- 直接属性变量名
    .father{
        font-size: $fong_size;
    }

局部变量与全局变量【!gobal声明】

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

    $name1:12; // 全局变量
    .father{
        $name2:16; // 局部变量
        $name3:24; // 
    }

// 编译出错
    .father{
        color: pink;
        &-child{
            $childColor :red; // 局部变量
            color: greenyellow;
        }
    }
    .parent{
        color: $childColor; // 此处调用的是 .father 中的局部变量 ==> 所以不能访问到 -- 会编译不了 【出错】
    }


// 正常编译
    .father{
        color: pink;
        &-child{
            $childColor :red !gobal; // 使用 !gobal声明 将局部变量转换成全局变量
            color: greenyellow;
        }
    }
    .parent{
        color: $childColor; // 此处调用的是 .father 中的全局变量
    }

数据类型（data types）

SassScript 支持 6 种主要的数据类型：

1.数字，1, 2, 13, 10px…

2.字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz

特殊情况：使用 #{} 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名 如

    @mixin name($value){ // @mixin 可以看成是一个函数 - $value为参数
        body #{$value}{
            content: "Hi, Firefox users!";
        }
    }
    @include name("main"); // @include 执行函数语句 - @include后面紧接某一个函数名

编译后…

    body main{
            content: "Hi, Firefox users!";
    }

3.颜色，blue, #04a3f9, rgba(255,0,0,0.5)

4.布尔型，true, false

5.空值，null

6.数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

数组 - 两个数组的数组可以使用空格或逗号分开（或括号（））

    1 - 1px 2px 3px 4px

    2 - 1px 2px,3px 4px

    3 - (1px 2px)(3px 4px)

    当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的
        但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组

    用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错
        如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px

maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算

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

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型

1. 除法运算 /

以下三种情况 / 将被视为除法运算符号：

    1.如果值，或值的一部分，是变量或者函数的返回值

    2.如果值被圆括号包裹

    3.如果值是算数表达式的一部分

    p {
    font: 10px/8px;             // 不满足上面个三种情况
    $width: 1000px; // 变量
    width: $width/2;            // 满足 - 其中一个是变量
    width: round(1.5)/2;        // 满足 - 其中一个是函数返回值
    height: (500px/2);          // 满足 - 被括号包裹着
    margin-left: 5px + 8px/2px; // 满足 - 值是算术表达式的一部分
    }

编译后…

    p {
        /* 处第一向不满足，其它的都满足 */
        font: 10px/8px;  /* 该属性值不符合css属性值要求 - 相当于没有设 */
        width: 500px;
        height: 250px;
        margin-left: 9px; 
    }

如果就是向让 变量/变量 但不进行触发运算 – 给其变量加上#{}

    $name1:16px;
    $name2:8px;
    .div1{
        font:$name1/$name2;
    }
    .div2{
        font:#{$name1/$name2};
    }

编译后…

    .div1{
        font:2px;
    }
    .div2{
        font:16px/8px; /* scss中 在#{}符号中的 / 不在是触发运算符 */
    }

2.颜色运算

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

    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; 
    }

特殊情况：如果颜色值包含 alpha channel（即rgba 或 hsla 两种颜色值），alpha 值必须相等才能进行运算，因为算术运算不会作用于 alpha 值

可以理解为颜色值中包含着透明度的值（两个颜色值的透明度必须一致）

    p {
        color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); // 两个颜色的透明度值都为0.75 - 可以进行运算
    }

编译后…

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

🔺颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整

    $color:rgba(255, 0, 0, 0.25);
// opacify -- 表示透明度的增加 （颜色值，增加透明度的数值）
    p {
        color: opacify($color,0.5); // 表示 $color 颜色的透明度的值加0.5 -- 即等于0.75
    }
// transparentize -- 表示透明度的减少
    p {
        color: transparentize($color,0.05); // 表示 $color 颜色的透明度的值减0.05 -- 即等于0.2
    }

    // 两者的写法一致，不同点是一个为加一个为减

编译后…

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

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD – 可以使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式

    $color:#fff;
    p{
        color:ie_hex_str(cololr); // ie_hex_str 适配ie浏览器 
    }

3.字符串运算

• 可用于连接字符串 【注意：在sass中的字符串，可以是有引号的 也可以是没有引号的】

// 基本连接字符串
    p {
        cursor: e + -resize;
    }

    // 在sass中 要是有引号与无引号的字符串连接 -- 连接后是否带引号是根据 连接符 左边的字符串来定

编译为…

    p {
        cursor: e-resize; 
    }

运算表达式与其他值连用时，用空格做连接符：

    p {
        margin: 2px + 3px auto;
    }

编译为…

    p {
        margin: 5px auto; 
    }

#{} 插值 - 可以添加动态的值 - 演示-略

4.布尔运算

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

5.数组运算 - 暂不支持数组运算

6.圆括号 - 圆括号可以用来影响运算的顺序（运算优先级）

函数

插值语句 #{}

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

    $name: foo;
    $attr: border;

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

编译后…

    p.foo {
        border-color: blue; 
    }

变量定义 !default

可以理解为，定义变量时要时不知道上面有没有定义过变量并且已经赋值 - 用于容错

当变量已被定义并且已赋值的情况下，该行变量的定义不执行赋值【即保留原有的状态】 – 若还没有被定义或者定义了还未赋值，就正常执行

    $content: "First content";
    $content: "Second content?" !default; // 因为 $content 在上面一行已经赋值，所以该行赋值无效
    $new_content: "First time reference" !default; // 因为 $new_content 还未被赋值过 - 所以该行赋值有效

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

编译后…

    #main {
        content: "First content";
        new-content: "First time reference"; 
    }

@-Rules与指令

@imoort

基本导入

导入 SCSS 或 Sass 文件

被导入的文件将合并编译到同一个 CSS 文件中，并且，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用

//语法
    @import "文件路径/文件名";

    // 下面两者都能被成功导入 - 因为当没有指定拓展名，Sass 将会试着寻找文件名相同导入
    @import "../sass/css2.scss";  
    @import "../sass/css2"; // 会默认导入为scss后缀名的的文件
    // 导入的数据为css2.scss文件中的内容（样式），位置在import语句处..
    // 通常，@import 寻找 Sass 文件并将其导入，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件

// Sass 允许同时导入多个文件
    @import "css1.scss","css2.scss";

// 常规css导入
    // 导入 css 文件 - 处是它是将里面的内容做一个连接来导入
    // 即不会将两个文件的内容合并到一个文件中 - css导入，不一定要在scss文件中导入（在xss中导入css文件，记得要将导入语句放置在最顶端）
    @import "../sass/css2.css"; // 编译后也是本身，不过位于最顶端

【扩-css中的内容】 link与@import引入的区别

/* link */
    link引入，在页面加载时，link同时被加载 
    link导入的权重大于 @import 导入的方式
    link 不存在浏览器兼容

/* import */
    import导入，css会在页面加载完成后，才会加载引用的css样式 
    import时将引用样式导入到当前页面中
    import只有在IE5以上才识别

🔺分音 (Partials)

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS - 只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线

// 注意时文件名前，不是的导入处加
    @import "css.scss"; // 文件命名为 _css.scss，便不会编译 _css.css 文件。
    // 注意，不可以同时存在添加下划线与未添加下划线的同名文件,否则，添加下划线的文件将会被忽略

即可以理解为，该scss文件不会编译出css文件 - 单用于导入其它的scss文件之中

虽然不会编译css文件，但它导入到某一个scss文件中时会跟着所导入的scss文件转换成css样式到导入它的文件中

语言表达比较不好表达 - 当下次复习到这的时候 - 可以直接理解为它不进行编译 或 裂解为是一个特定的 区域/功能 部分的样式，用于导入主样式表的即可

总结 --> 不进行编译css文件

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import

也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中

嵌套内层

// 1.例如有一个 out.scss 文件中有如下样式
    a{
        color:black;
    }

// 2.有一个 outNot.scss文件中有如下样式
    #main{
        // 将上面的 out.scss文件导入 - 相当于将整个out.scss中的函数体导入在 #main 中 - 在scss的与中即为它的子集/子类
        @import "out.scss"; 
        font-size:16px;
    }

上面就称内层嵌套scss文件，编译为…

    #main{
        font-size:16px;
    }
    #main a{
        color:black;
    }

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

@media

css语法

    @media not|only mediatype and (mediafeature and|or|not mediafeature) {
        CSS-Code;
    }

not、only 和 and 关键字的含义

not：not 关键字反正整个媒体查询的含义

only：only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响

and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型

还可以针对不同的媒体使用不同的样式表，就像这样：

    <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
    <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套（如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器）

    .father{
        color:green;
        @media screen and (min-width:650px){
            color:greenyellow;
        }
    }

编译为…

    .father{
        color:green;
    }
    @media screen and (min-width:650px){
        .father{
            color:greenyellow;
        }
    }

@media - 媒体特性

@extend

基本使用

@extend 告诉 Sass 将一个选择器下的所有样式继承给另一个选择器（所有样式，包括背景…）

    .father{
        color:red;
        font-size:16px;
    }
    .son{
        @extend .father; // 继承 .father 中的多有样式
        text-align:center;
    }

编译为…

/* son中及咸亨了father中的多有样式 - 所以在sass中编译后是直接使用分组选择器 */
    .father,.son{ 
        color:red;
        font-size:16px;
    }
    .son{
        text-align:center;
    }

@extend 会使用合并选择器时，会很聪明地避免无谓的重复 --> 即使用分组选择器来避免代码重复

运作方式

1.延伸性

@extend 的作用是将重复使用的样式 延伸 (extend) 给需要包含这个样式的特殊样式

    .father{
        color:red;
        .son{
            color:green;
        }
    }
    .main{
        @extend .father; // 延伸性 --> 继承的是整个 father 中的所有样式，所以包括子元素中的样式也会被继承
    }

编译为

    .father, .main { /* main继承了father */
        color: red;
    }
    .father .son, .main .son { /* main也会将father中的所有子元素的样式也一并的继承过来 */
        color: green;
    }

2.延伸复杂的选择器

Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^=“http://”] 等

该部分不确定，因为在所练习测试的代码中不可用

3。多重延伸

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器 - 可以理解为是一个选择中可以继承多个选择器 如：

    .font{
        font-size:12px;
    }
    .color{
        color:pink;
    }
    div{
        // 继承多个选择器中的css样式
        @extend .font;
        @extend .color;
        background-color:black;
    }

编译为…

    .font, div {
        font-size: 12px;
    }
    .color, div {
        color: pink;
    }
    div{
        background-color:black;
    }

4.继续延伸 - 多重嵌套继承 - 实例如下

    .font{
        font-size:16px;
    }
    .color{
        color:red;
    }
    .style{
        @extend .font;
        @extend .color;
    }
    .main{
        @extend .style
    }

编译为…

    .font, .style, .main {
        font-size: 16px;
    }
    .color, .style, .main {
        color: red;
    }

5.选择器列

就是 1 的实例，即延申会连带后代元素的选择器也会延申（即继承）

合并选择器列

有时会遇到复杂的情况，比如选择器列中的某个元素需要延伸给另一个选择器列，这种情况下，两个选择器列需要合并 - 如

    #main .tabbar a {
        font-weight: bold;
    }
    #demo .overview .fakelink {
        @extend a;
    }

编译为…

/* 在编译时因为选择器的问题，延申时会合并选择器 */
    /* 当两个列合并时，如果没有包含相同的选择器，将生成两个或多个新选择器 - 不过，Sass 只会编译输出有用的选择器 */
    #main .tabbar a, #main .tabbar #demo .overview .fakelink, #demo .overview #main .tabbar .fakelink {
        font-weight: bold;
    }

6.@extend-Only 选择器

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候 - sass在编译时会忽略除非通过@extend调用

// 基本语法，使用占位符，用到的时候在来延伸对应的占位符
    // 基本示例
    %name{ // 占位符创建的选择器不会进行编译
        color:red;
    }
    div{
        @extend %name; // 延申name占位选择器
    }

    // 扩展示例..
    .main nav %name{
        color:red;
    }
    div{
        @extend %name;
    }

编译为…

    /* 基本示例 */
    div{
        color:red;
    }
    /* 扩展示例.. */
    .main nav div {
        color: red;
    }

7.!optional 声明🔺

如果 @extend 失败会收到错误提示，比如，这样写 a.important {@extend .notice}，当没有 .notice 选择器时，将会报错，只有 h1.notice 包含 .notice 时也会报错，因为 h1 与 a 冲突，会生成新的选择器

如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的

8.在指令中延伸

在指令中使用 @extend 时（比如在 @media 中）有一些限制 - @media内的延申，只能延申@media内部的css，不能延申外部的css 如：

// 因为@media的延申css是在内部的 - 所以时可行的
@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}

// 因为延申的css是在@media外部的，所以是不可行的 -- 会报错，无法进行编译（找不到延申目标）
@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

@at-root

基本语法规则

正常情况嵌套

    .father{
        color:red;
        #{&}-son{
            color: green;
        }
    }

编译为…

    .father {
        color: red;
    }
    .father .father-son {
        color: green;
    }

加了@at-root时嵌套

    .father{
        color:red;
        @at-root{
            #{&}-son{
                color: green;
            }
        }
    }

编译为…

    .father {
        color: red;
    }
    .father-son {
        color: green;
    }

由上述可知，当想要直接使用某的选择器作为父类（方便直接使用父级选择符），却又不想作为它的子类，就可以在嵌套体中加 @at-root 规则来实现

@at-root的内联选择器模式，将不会让你的选择器发生任何的嵌套，直接移除了父选择

可以理解为加了 @at-root 后，在@at-root中的嵌套内容将不再存在嵌套中的父子关系

**注意：**在@at-root的块嵌套中，只会影响最近的子选择器

@at-root和with或without

在@at-root中无法自动移除默认的指令，如@media或者@supports,先来看一个示例：

scss

@media print {
    @supports (transorm-origin: 5% 5%) {
        .foo {
            @at-root {
                .bar #{&} {
                    color: gray;
                }
            }
        }
    }
}

css

/* 可以看出@at-root搬移后，是无法自动的移出默认指令的 */
@media print {
  @supports (transorm-origin: 5% 5%) {
    .bar .foo {
      color: gray; 
    } 
  } 
}

这时就需要用到 @at-root中的without 来手动移出默认指令

// 语法
    @at-root (without:@media){ // 给@at-root 设置一个参数without，值就为想要移出的指令类型
        
    }

// 例
@media print {
    .main{
        color:red;
        @at-root (without:media){
            &-son{
                color:green;
            }
        }
    }
}

编译为…

@media print{
    .main{
        color:red;
    }
}
.main-son{
    color:green;
}

移除多个指令，只需在移出指令的值空格，紧接着下一个值

@media print{
    @supports (transform-origin:5% 5%){
        .main{
            color:red;
            @at-root (without:media supports){
                &-son{
                    color:green;
                }
            }
        }
    }
}

编译为…

@media print{
    @supports (transform-origin:5% 5%){
        .main{
            color:red;
        }
    }
}
.main-son{
    color:green;
}

常用于这类情况…

css

/* 具有相同的前缀 */
    .speech-bubble{}
    .speech-bubble__header{}
    .speech-bubble__text{}
    .speech-bubble__text--link{}

scss

// 该代码块等同于上面的css
.speech-bubble{
    @at-root{
        &__header{}
        &__text{
            &--link{}
        }
    }
}

@debug

文档没有过多的说明… - 看不懂

@warn

文档没有过多的说明… - 看不懂

控制指令

@if and @else

@if

【条件语句】给定条件，判断条件是否为真，为真执行代码块 - 反之不执行

    @mixin myFun($size,$borderKey){ // @mixin 相当于是一个函数/方法 （参数）
        width:$size;
        height:$size;
        @if($borderKey){ // @if 条件判断，参数为true是执行里面的语句
            border:1px solid #333;
        }
    }
    .false{
        @include myFun(100px,false); // @include 调用函数语句
    }
    .ture{
        @include myFun(100px,true);
    }

编译为…

    .false {
        width: 100px;
        height: 100px;
    }

    .ture {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
    }

@else if

【多分支条件判断】

    @mixin myFun($small,$big){
        @if($small){
            font-size:8px;
        }@else if($big){
            font-size:16px;
        }
    }
    .small{
        @include myFun(true,false);
    }
    .big{
        @include myFun(false,true);
    }

编译为…

    .small {
        font-size: 8px;
    }
    .big {
        font-size: 16px;
    }

@else

@else - 反之的意思，即当@if与所有的@else if条件都不成立时执行的代码块

    @mixin myFun($small,$big){
        @if($small){
            font-size:8px;
        }@else if($big){
            font-size:16px;
        }@else{
            font-size:1em;
        }
    }
    .small{
        @include myFun(true,false);
    }
    .big{
        @include myFun(false,true);
    }
    .else{
        @include myFun(false,false);
    }

编译为…

    .small {
        font-size: 8px;
    }
    .big {
        font-size: 16px;
    }
    .else{
        font-size:1em;
    }

@for

【循环结构】

// 语法
    @for $i from x through y{ // $i表示循环变量    // from x 表示从x开始   // through y 表示到y结束
        // 执行语句
    }

// 例
    $bgColor:#333;
    @for $i from 1 through 3{ // 成体循环3遍 -- 1 2 3
        ul:nth-child(#{$i}){
            background-color: lighten($bgColor, $i * 5%);
        }
    }

编译为…

    ul:nth-child(1) {
        background-color: #404040;
    }

    ul:nth-child(2) {
        background-color: #4d4d4d;
    }

    ul:nth-child(3) {
        background-color: #595959;
    }

@each

基本遍历循环

    $sizes: 40px, 50px, 80px;
    @each $size in $sizes { // 遍历￥sizes中的每一个值，建立循环（并在每次循环将sizes对应的值传给size）
        .icon-#{$size} {
            font-size: $size;
            height: $size;
            width: $size;
        }
    }

编译为…

    .icon-40px {
        font-size: 40px;
        height: 40px;
        width: 40px;
    }
    .icon-50px {
        font-size: 50px;
        height: 50px;
        width: 50px;
    }
    .icon-80px {
        font-size: 80px;
        height: 80px;
        width: 80px;
    }

使用地图

可以理解为数对象…

    $arr:("name1":8px,"name2":16px,"name3":32px);
    @each $name,$value in $arr{
        .font_#{$name}{
            font-size:$value;
        }
    }

编译为…

    .font_name1 {
        font-size: 8px;
    }
    .font_name2 {
        font-size: 16px;
    }
    .font_name3 {
        font-size: 32px;
    }

结构遍历

scss

    $str:#333 8px,#666 16px,#999 32px; // 一个值中，使用空格可以再次分成多个值，-- 从而可以结构每一个值
    @each $one,$two in $str{
        .font_#{$two}{
            color:$one;
            font-size:$two;
        }
    }

css

    .font_8px {
        color: #333;
        font-size: 8px;
    }
    .font_16px {
        color: #666;
        font-size: 16px;
    }
    .font_32px {
        olor: #999;
        ont-size: 32px;
    }

@while

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

scss

    $i:1;
    @while $<4{ // 1 2 3 -- 煦暖3遍
        .container#{$i}{
            content:"";
        }
        $i:$i+1; // 循环语句递加
    }

css

    .container1 {
        content: "";
    }
    .container2 {
        content: "";
    }
    .container3 {
        content: "";
    }

混合指令

1. 定义混合指令 @mixin

可以理解为是一个函数或方法

// 基本语法
    @mixin functionName{ // 关键字 + 方法名 + {语句}
        // 执行代码块
    } // 默认轻快下，在编译时不会又任何的效果 - 想要使用里面的效果，必须先调用

// 参数
    // 参数通常书写的是变量..，通过函数调用时，再传入实参
    @mixin functionName ($size,#333){ // 关键字 + 方法名 + (形参 - 参数) + {语句}
        // 执行代码块
    }
    // 注意，形参与实参必须时一一对应的

// 混合样式导入内容
    .....

2. 引用混合指令 @include

调用函数的方法

    @mixin myFun($size,$color){
        div{
            font-size:$size;
            color:$color;
        }
    }
    // 调用myFun函数
    @include myFun(16px,#333); // () 传参

编译后…

    div{
        font-size:16px;
        color:#333;
    }

3.默认参数

因为我们再调用函数时，可能会忘记给函数传参，从而会引发报错 - 所以需要默认参数来替我们容错

// 无默认参数
    @mixin myFun($size,$color){
        div{
            font-size:$size;
            color:$color;
        }
    }
    // 调用myFun函数 - 报错，无法编译
    // 因为我们定义了两个形参，但实参没有两个，就会报错
    @include myFun(16px);

// 使用默认参数
    // 使用函数的默认参数 - 即再定义函数的形参时，先给其赋值
    // 当调用函数时，又实参就使用实参 -- 若没有实参，则使用默认参数 -- 防止报错
    @mixin myFun($size:8px,$color:#333){
        div{
            font-size:$size;
            color:$color;
        }
    }
    // 第二个参数没有实参，但先前已经定义好了默认参数
    // 所以第二的形参的值为所设定的默认值 - 不会报错
    @include myFun(16px); 

4.@mixin中的@content

@mixin中的@content 就相当于是传参是的实参体

默认情况没有任何效果，当再传参的是内容而不是参数是 - 表示打印内容

如

// 默认情况
    $color: white;
    @mixin colors($color: blue) {
        background-color: $color;
        @content;
        border-color: $color;
    }
    .colors {
        @include colors ();
    }
// 参数为内容时
    $color: white;
    @mixin colors($color: blue) {
        background-color: $color;
        @content;
        border-color: $color;
    }
    .colors {
        // {} 此时参数为内容 - 所以再函数体内有@content的地方打印该内容
         // 此处的$color为外部的变量 - 因为该传参是内容，再传参为内容是是无法调用内部的参数的
        // 也就是说当外部没有 $color 这个变量时，会报错 - 从而无法编译结果
        @include colors {color:$color};
    }

编译为…

/* 默认情况 */
    .colors{
        background-color: blue;
        border-color: blue;
    }

/* 参数为内容时 */
    .colors {
        background-color: blue;
        color: white;
        border-color: blue;
    }

函数指令 @function

与 mixin 相同，也可以传递若干个全局变量给函数作为参数 – 一个函数可以含有多条语句，需要调用 @return 输出结果

function 需要 return返回结果

    @function myFun($size1,$size2,$color){
        $size:$size1 + $size2;
        @return $size;
    }
// 调用 - 与js一样调用 (不过条用时，只能再属性值处调用) -- 应该【不是很确定】
    .main{
        font-size:myFun(8px,8px,#333);
        display:block;
    }

    .main {
        font-size: 16px;
        display: block;
    }

输出格式

编译时，输出的css格式 - 可以去插件处修改 - 具体楷文档