scss基础用法

一、sass基础

css预编译处理语言，可实现css样式代码的重用，方便维护。

比如下面的$fontColor,使用较多且需要修改时，只改此处的值即可

1、基础用法

        $fontColor: #333;
        body {
            color: $fontColor;
        }

2、作用域

        $mycolor: #333;
        body {
            $mycolor: #dfdfdd;
            color: $mycolor;		// #dfdfdd
        }
        p {
            color: $mycolor;		// #333
        }

        $mycolor: #333;
        body {
            $mycolor: #dfdfdd !global;
            color: $mycolor;		// #dfdfdd
        }
        p {
            color: $mycolor;		// #dfdfdd
        }

3、选择器嵌套

可以像html标签一样，父级嵌套子级。

        body {
            background-color:aqua;
            ul {
                margin: 10px;
                li {
                    display: block;
                }
            }
        }

4、属性嵌套

    font: {
        size: 10px;
        family: 'Microsoft Yahei';
        weight: bold;
    }

5、@mixin与@include

当某个样式需要被频繁应用于项目中时，可使用混入。

        @mixin mixin-name {
            background-color: #dfdfdd;
            font-size: 20px;
        }

        body {
            @include mixin-name;     // scss语言中，-和_是相同的
        }

        @mixin mixin-name($color, $width) {
            background-color: #dfdfdd;
            font-size: 20px;
            border: $width solid $color;
        }

        body {
            @include mixin-name(#dfdfdf, 20px);     // scss语言中，-和_是相同的
        }

6、@extend

        .nav {
            border: 1px solid #dfdfdf;
            cursor: pointer;
        }
        .body {
            @extend .nav;
            background-color: bisque;
        }

7、#{}的使用

#{}一般用于拼接字符串。

        $border: border-left;
        $width: 10;
        .nav {
            #{$border}-radius：5px;
            border: #{$width} solid #333;
        }

8、&的使用

        body {
            width: 300px;
            height: 300px;
            &-one {						// &指代上层选择器
                margin-top: 10px;
            }
        }

9、@import

@import 引入scss文件。无需加后缀，会自动添加后缀。

scss文件中，也可做循环，判断等运算，详细可见嘟嘟嘟