不同样式风格嵌套方式

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

嵌套输出方式 nested

编译时，添加 --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;}
    复制代码

展开输出方式 expanded

sass --watch demo.scss:demo.css --style expanded复制代码

    
    nav li {    display: inline-block;}nav a {    text-decoration: none;}复制代码

紧凑输出方式 compact

sass --watch demo.scss:demo.css --style compact复制代码

    
    nav li { display: inline-block; }nav a { text-decoration: none; }复制代码

压缩输出方式 compressed

sass --watch demo.scss:demo.css --style compressed复制代码

    
    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;    }}复制代码

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

嵌套

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

选择器嵌套

例如对于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: "伪类";    }}复制代码