sass阅读分享sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。 css代码：使用s

sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。

<body>
    <div class="box">
        <div class="boxCenter">
            <div class="centerLeft">
                <div class="leftTop">我在上面</div>
                <div class="leftBot">我在下面</div>
            </div>
            <div class="centerRight"></div>
        </div>
    </div>
</body>

css代码：

#wrap .content{}
#wrap .content .article{}
#wrap .content .article p{}
#wrap .content .article p span{}

使用sass编写：

$fontsize:20px;
$color:#fff;
.box{
    height: 600px;
    width: 600px;
    background-color: tomato;
    margin: 100px auto;
    border: 10px dotted lightgreen{
        left: 0;
        bottom: 0;
    };
    .boxCenter{
        width: 400px;
        height: 400px;
        margin: 0 auto;
        background-color: cadetblue;
        .centerLeft{
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
            .leftTop{
                height: 90px;
                background-color: darkgoldenrod;
                font-size: $fontsize;
                $color:#fff;
            }
            .leftBot{
                height: 90px;
                font-size: $fontsize;
                $color:#fff;
                margin-top: 20px;
                background-color:lightcoral;
            }
        }
        .centerRight{
            float: left;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    }
}

编译sass成css：
1. 在 vs code 中安装插件 easy sass
2. 在 vs code 中创建一个后缀为.scss 文件
3. 在 xxx.scss 文件中书写 scss 代码
4. 保存代码后，当前的 xxx.scss 文件旁边会自动生成两个文件
  - xxx.css：文件内容为编译后的 css 代码
  - xxx.min.css：文件内容为编译后并且压缩过的 css 代码

Sass支持定义变量。变量以美元符号（$）作为开头。变量用冒号（:）赋值。


$color:red;
$font_size:12px;

scss
/*后代关系*/
.wrap{
    div{
        width:$font_size*10;
    }
}
/*子类关系*/
ul{
    >li{
        padding:12px;
    }
}
/*大括号中表示自己*/
.nav{
    &:hover{
        background-color: $color;
    }
    li{
        &:hover{
            color:$color;
        }
    }
}
/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content{
    border: {
        style:solid;
        color:$color;
        width:2px;
    }
}
.left{
    border:1px solid #000{
        left:none;
        bottom:{
            width:3px;
        }
    };
}

编译结果：

/*后代关系*/
.wrap div {
  width: 120px;
}

/*子类关系*/
ul > li {
  padding: 12px;
}

/*大括号中表示自己*/
.nav:hover {
  background-color: red;
}
.nav li:hover {
  color: red;
}

/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content {
  border-style: solid;
  border-color: red;
  border-width: 2px;
}

.left {
  border: 1px solid #000;
  border-left: none;
  border-bottom-width: 3px;
}