本文共 1952 字，大约阅读时间需要 6 分钟。

scss(sass):

概念:scss是css预处理器, 世界上最成熟、最稳定、最强大的专业级CSS扩展语言, scss是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.,能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表.

其他css预处理器:sass(scss), less, Stylus, DT CSS, Switch CSS, Turbine, Switch CSS, CSS Cacheer

原理:Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大. 当然浏览器是不认识Sass语法. 开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码.

安装:

编译scss:

//单文件转换命令sass input.scss output.css//单文件监听命令sass --watch input.scss:output.css//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：sass --watch app/sass:public/stylesheets

vscode 使用scss:

1.安装 easy sass2.修改vscode的配置(以下代码直接复制替换源码),注意:使用编辑器打开文件夹,不然保持的时候会出现路径问题,因为配置文件里面使用的是相对路径"easysass.compileAfterSave": true,"easysass.formats": [ //nested：嵌套缩进的 css 代码。//expanded：没有缩进的、扩展的css代码。//compact：简洁格式的 css 代码。//compressed：压缩后的 css 代码    {        "format": "expanded",        "extension": ".css"    },    {        "format": "compressed",        "extension": ".min.css"    }],"easysass.targetDir": "./css" //路径

使用:

1. 使用变量:

   $变量名 eg: $color: red;
   注意：如果变量定义在了{ }规则块内，就只能在这个块内使用

   // 在{}号外面定义的变量是全局变量$color:red;  $color:red;  // 全局变量 a{ 	$color:blue;   // 花括号内定义的是局部变量 	color:$color;   // bulie } .bb{ 	color:$color;   //red; }  $color:yellow !global;   // 变成全局变量  $color:red !default; // 默认变量  // 特殊变量 ( #{表达式/变量}； 进行字符串拼接 ) $aa:top; #dd{ 	border-#{$aa}:1px solid red; }

2. 嵌套css规则

   #content {
     article {
       h1 {
    color: #333 }    p {
    margin-bottom: 1.4em }  }  aside {
    background-color: #EEE }}
   article a {
     color: blue;  &:hover {
    color: red }}

3. 循环

   @for $i from 1 to 9 { }   // 不包含9. 即1-8 @for $i from 1 through 9 { }   // 包含9. 即1-9

4. 分支

   @if $i%2 > 0 { } @else { }

5. 混合

   @mixin 混合名字 来定义代码块

6. 引用

   @include 混合名字

7. 继承

   @import “文件” eg: @import “public.css”

8. 综合

   $color: red;

   @import “public.scss”;
   @mixin border{ width:100px; }
   #box{ @include border; }

转载地址：https://blog.csdn.net/ZZZ___jh/article/details/117520560 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！