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文件编译成了对应的样式。

　　总结：本节主要学习sass语法中的变量和样式的导入，其他的语法再继续学习。

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

猜你喜欢