sass 入门（二）

2018.01.20

不同样式风格嵌套方式

编译时，添加 –style nested 参数

sass --watch demo.scss:demo.css --style nested

nav {
    li {
        display: inline-block;
    }
    a {
        text-decoration: none;
    }
}

nav li {
    display: inline-block;}
nav a {
    text-decoration: none;}

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

sass --watch demo.scss:demo.css --style expanded

<!--sass 同上-->

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

sass --watch demo.scss:demo.css --style compact

<!--sass 同上-->

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

sass --watch demo.scss:demo.css --style compressed

<!--sass 同上-->

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

$width: 200px;
.demo {
    width: $width;
}

编译之后

.demo {
    width: 200px;
}

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

$width: 200px !default;
.demo {
    width: $width;
}

编译之后

.demo {
    width: 200px;
}

$width: 300px;
$width: 200px !default;
.demo {
    width: $width;
}

编译之后

.demo {
    width: 300px;
}

$width: 200px !default; //定义全局变量
.demo {
    $width: 300px; //定义局部变量
    .test {
        width: $width;
    }
}

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

例如对于a标签的应用

.demo a {
    color: #000;
}

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

sass选择器嵌套

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

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

.demo {
    font-size: 16px;
    font-weight: bold;
}

sass属性嵌套

.box {
    font: {
        size: 12px;
        weight: bold;
    }
}

.demo:before {
    content: "伪类";
}

sass属性嵌套

.demo {
    $:before {
        content: "伪类";
    }
}

CSS sass