CSS预处理器Sass -- sass的基本语法(4)

前言：本节开始学习Sass的语法。

　　1.sass的基础语法。

　　　　<1>sass中的变量

　　　　　　sass中的变量声明以$符号开头。

　　　　　　局部变量：只在当前作用域有用。

    body {
        $color: skyBlue;　　　　// body中声明的$color变量只在当前body大括号中有用。
        color: $color;
    }
    footer {
        color: $color;　　　　  // 报错 Error: Undefined variable: "$color".

    }

　　　　　　上例中，$color变量只在body大括号中有用，footer中引用$color变量报变量未定义的错。

　　　　　　全局变量：

　　　　　　　　1.声明在所有作用外：将$color变量声明在所有作用域之外。

    $color: skyBlue;
    body {
        color: $color;
    }
    footer {
        color: $color;
    }

　　　　　　　　2.添加!global修饰：在$color变量颜色值之后添加 !global修饰符。

    body {
        $color: skyBlue !global;
        color: $color;
    }
    footer {
        color: $color;
    }

　　　　　　变量默认值：为变量声明默认值，在变量未重新赋值时作为变量值。

        $fontSize: 14px;　　　　　　　　　　　 // 重新赋值为14px；
        $fontSize: 12px !default;　　　　　　//font-size的默认值为12px；
        body {
            $color: skyBlue !global;
            color: $color;
            font-size: $fontSize;
        }
        footer {
            color: $color;
        }

　　　　　　多值变量：一个变量中定义了多个值。

　　　　　　　　list类型：通过nth($list, index)，其中list为变量名，index表示值的索引(从1开始计算)　

    $paddings: 3px 10px 5px 10px;
    body {
        $color: skyBlue !global;
        color: $color;
        padding: $paddings;
    }
    footer {
        color: $color;
        padding-left: nth($paddings , 1);    //通过nth($padding, 1)获取变量中的第一个值，注意这里的索引从1开始。
    }

　　　　　　　　map类型：键值对的形式组成，通过map-get(map变量，键)获取值。

    $colors: (color: red, borderColor: blue);
    body {
        $color: skyBlue !global;
        color: $color;
    }
    footer {
        color: $color;
        background-color: map-get($colors, color);
    }

　　　　　　变量特殊用法：

　　　　　　　　作为类名：

            $className: main;
            .#{$className} {
                width: 100px;
                height: 50px;
            }

　　　　<2>sass中的样式导入

　　　　　　部分文件：专门为导入而编写的sass文件，编译不会生成对应的css文件，文件名通常以下划线开头。

　　　　　　导入语法：@import 'sass文件'

　　　　　　　　注意：sass中样式导入关键字和css原生样式导入关键字一样都是@import，这里如何作区分呢？

　　　　　　　　原生导入：导入文件不会被编译。

　　　　　　　　　　1.导入文件以.css结尾。

　　　　　　　　　　2.被导入文件的名字是一个url地址。

　　　　　　　　　　3.被导入文件的名字是CSS的url的值。

　　　

　　　　　　sass导入举例：_part1.scss文件编译成了对应的样式。

　　　<3>sass中的嵌套语法

　　　　1.选择器嵌套：sass中选择器的编写使用选择器嵌套的方式，这种方式让选择器之间的关系解构更清晰。

　　　　　　左侧是sass选择器嵌套的语法，右侧是编译成正常css的语法。

　　　　　　2.属性嵌套：sass中除了选择器的嵌套外还有属性的嵌套，这里属性的嵌套只针对中划线连接的属性。

　　　　　　

　　　　　　左侧sass中将background-color，background-size，backgroud-image才有属性嵌套的方式编写，右侧是编译后的css格式。

　　　　　　3.引用父选择器：在父选择器内部通过&引用父选择器。(典型的是超链接元素a标签)

　　　

　　　　　　左侧通过&引用父选择器a，设置a标签悬浮的样式。

　　　　　　4.跳出嵌套：当选择器嵌套比较深的时候，这时如果我们想跳出嵌套使用@at-root跳出外层嵌套。

　　　　　　左侧sass中选择器嵌套比较深的时候，当我们想跳出嵌套时，我们使用@at-root就跳出了当前的嵌套。

　　　　　　注意：

　　　　　　　　1.遇到媒体查询@media时，@at-root需要加上条件(without: media rule)才能跳出嵌套。

　　　　

　　　　　　container选择器包裹在媒体查询中，需要使用@at-root (without: media rule)才能跳出嵌套。

　　　　<4>sass中的继承

　　　　　　sass中我们通过样式的继承，可以实现样式的复用性。

 　　　　　1.简单继承

　　　　　　继承语法：在子选择器中通过@extend 父选择器，实现样式的继承。

　　　

　　　　　　上例中.alert-info选择器通过@extend继承了选择器.alert中的样式。

　　　　　　2.多个继承

　　　　　　子选择器中继承多个父类选择器的样式，使用@extend 父类选择器，多个父类选择器之间用逗号隔开。

　　　　　

　　　　　　通过@extend 多个父类选择器用逗号隔开，子选择器同时继承了多个父选择器的样式。

　　　　　　3.继承的延伸性

　　　　　　如果子选择器继承的父选择器存在其他后代选择器，此时子选择器会继承父选择器及其子选择器的样式。

　　　　　　上例中.alert-info选择器继承了选择器.alert的样式，编译结果.alert-info连同.alert-error的样式一起继承了，这就是继承的延伸性。

　　　　　　注意：如果继承a元素的样式，会连同a的伪类元素(a:hover等)的样式一同继承。

　　　　　　4.占位选择器

　　　　　　sass中定义的很多公共样式，我们希望通过@extend引用编译到具体的选择器中，并不希望它们作为独立的选择器编译到css中，使用占位符%实现这个需求。

　　　

　　　　　　上例中通过%占位符后alert样式就不会单独的编译到css中，而是在.alert-info中引用时才编译。

　　　　总结：本节只学习了sass中一些基础的语法，更多的语法需要继续学习。