sass-优快云博客

本文详细介绍了Sass的使用方法，包括如何查看版本、不同文件后缀的特点、变量引用、嵌套规则、混合器的定义与引入，以及编译设置等核心内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看sass版本: sass -v / sass --version

文件后缀:
scss: √, 编写方式更类似于css;
sass: 不需要花括号,也不需要标点

引用变量: div { color: $color }

嵌套规则:
　　content {
　　　　width: $width;
　　　　h3 {
　　　　　　color: $color;
　　　　}
　　　　p {
　　　　　　text-indent: 2em;
　　　　}
　　　　a {
　　　　　　color: #000;
　　　　　　&:hover {
　　　　　　color: #c00;
　　　　　　　　}
　　　　　}
　　　　}

&代表父选择器标识

定义混合器:
　　@mixin 混合器名称{
　　//规则:
　　　　border: #000 1px solid;
　　　　margin-left: 100px;
　　　　width: 100px;
　　　　height: 100px;
　　}

引入混合器:
　　　div {
　　　　　background: red;
　　　　　@include 混合器名称;
　　　　}

编译sass:
sass --watch 要监听的文件夹&文件名称:输出的文件夹&文件名称
sass --watch index:style 监控index文件夹下所有的scss文件并且声称css文件到style文件夹中.
sass --watch scss/index.scc:style/abc.css 监听scss下面index.scss的变动到style文件夹中并且生成abc.css
sass --watch index:style --style expanded
--style expanded: 编译样式:
expanded / compact / nested / compressed

转载于:https://www.cnblogs.com/webmuluo/p/10133910.html