CSS►sass

sass 入门（二）

  • 不同样式风格嵌套方式
  • 普通变量与默认变量
  • 局部变量与全局变量
  • 嵌套

    • 不同样式风格嵌套方式

    1. 嵌套输出方式 nested
    2. 展开输出方式 expanded
    3. 紧凑输出方式 compact
    4. 压缩输出方式 compressed

    嵌套输出方式 nested

    编译时，添加 –style nested 参数

    1
    sass --watch demo.scss:demo.css --style nested
    1
    2
    3
    4
    5
    6
    7
    8
    nav {
        li {
            display: inline-block;
        }
        a {
            text-decoration: none;
        }
    }
    1
    2
    3
    4
    5
    6
    nav li {
        display: inline-block;}
    nav a {
        text-decoration: none;}

    <!--注意大括号-->

    展开输出方式 expanded

    1
    sass --watch demo.scss:demo.css --style expanded
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!--sass 同上-->

    <!--css-->
    nav li {
        display: inline-block;
    }
    nav a {
        text-decoration: none;
    }

    紧凑输出方式 compact

    1
    sass --watch demo.scss:demo.css --style compact
    1
    2
    3
    4
    5
    <!--sass 同上-->

    <!--css-->
    nav li { display: inline-block; }
    nav a { text-decoration: none; }

    压缩输出方式 compressed

    1
    sass --watch demo.scss:demo.css --style compressed
    1
    2
    3
    4
    <!--sass 同上-->

    <!--css-->
    nav li{display:inline-block;}nav a{text-decoration:none;}

    普通变量与默认变量

    普通变量

    1
    2
    3
    4
    $width: 200px;
    .demo {
        width: $width;
    }

    编译之后

    1
    2
    3
    .demo {
        width: 200px;
    }

    默认变量

    sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

    1
    2
    3
    4
    $width: 200px !default;
    .demo {
        width: $width;
    }

    编译之后

    1
    2
    3
    .demo {
        width: 200px;
    }

    1
    2
    3
    4
    5
    $width: 300px;
    $width: 200px !default;
    .demo {
        width: $width;
    }

    编译之后

    1
    2
    3
    .demo {
        width: 300px;
    }

    局部变量与全局变量

    1
    2
    3
    4
    5
    6
    7
    $width: 200px !default; //定义全局变量
    .demo {
        $width: 300px; //定义局部变量
        .test {
            width: $width;
        }
    }

    创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。

    嵌套

    1. 选择器嵌套
    2. 属性嵌套
    3. 伪类嵌套

    选择器嵌套

    例如对于a标签的应用

    1
    2
    3
    4
    5
    6
    7
    .demo a {
        color: #000;
    }

    .box .demo a {
        color: #fff;
    }

    sass选择器嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    .demo {
        a {
            color: #000;
            .box & {
                color: #fff;
            }
        }
    }

    属性嵌套

    属性嵌套，CSS 的一些属性前缀相同，只是后缀不同

    1
    2
    3
    4
    .demo {
        font-size: 16px;
        font-weight: bold;
    }

    sass属性嵌套

    1
    2
    3
    4
    5
    6
    .box {
        font: {
            size: 12px;
            weight: bold;
        }
    }

    伪类嵌套

    1
    2
    3
    .demo:before {
        content: "伪类";
    }

    sass属性嵌套

    1
    2
    3
    4
    5
    .demo {
        $:before {
            content: "伪类";
        }
    }