web前端：sass预处理技术【vscode配置、变量、嵌套规则、文件导入、静默注释、混合器、继承、SassScript运算、内置函数】

sass预处理技术

1. 预处理，框架（css基础+变量+嵌套+混合+导入等）

2. 语法格式

   • scss：识别花括号（推荐）

   • sass：识别缩进

   • 两种格式可以相互转换{style.scss style.sass}

vscode扩展配置

1. lod 基于命令行，终端输入

   • ruby

   • rubygems2.6x以上版本

   • gem install sass+gem install compss

   • 命令行编译

     • sass input.scss output.css 保存自动编译

     • sass --watch input.scss:output.css 单行监听

2. new 插件

   • live sass compile

     • 代码改变则编译

   • 或者 easy sass

     • 粘贴两行代码，记得在文件根目录下创建一个css文件夹，如果报错，则删除       “ css/ ”,空值意思为在文件根目录下创建编译后的css文件

     • "easysass.compileAfterSave": true,//保存后自动编译
       "easysass.targetDir": "css/",//css文件创建路径为根目录下的css文件夹

变量

1. 语法：$name-color : red ;

2. 嵌套：$border-name : 1px solid $name_color ;

3. 语义化命名：中划线、下划线相互兼容

嵌套规则

1. &父选择器标识符，升级

   • a{color : red ; & :hover: green ;}

2. 群组、后代、子元素、兄弟、后续选择器

3. 属性嵌套：使用冒号“:”代替中划线“-”

   • border：{width：1px；color：red；}

sass文件的导入

1. 在style中引用@import "_name";

2. 默认值 !default

静默注释

1. /**/ 会同步到css中

2. // 不会同步到css中

sass混合器

• 作用：提高复用，解决代码重复

1. @mixin name{}定义、@include name；调用【这是属性，不要括号】

2. 可以嵌套css选择器

3. 混合器传参

   • 定义：@mixin name($a,$b,$c:$a){$a,$b,$c}【可以引用】

   • 调用：@include name($a:red,green);【可以绑定key：value】

4. 实例

   • 效果：

   • 

      

   • scss代码段：

5. /*按钮默认样式*/
   @mixin btn($btn){
       @if($btn){
           padding: 10px 20px;
           border: 1px solid black;
           border-radius: 5px;
       }
       @else{
           border: none;
           padding: 0;
       }
   }
   /*有颜色样式的按钮*/
   @mixin btn-primany{
       border-color:aqua;
       color: aqua;
       background-color: white;
   }
   // 三个按钮都有基础样式
   button{
       @include btn($btn:true);
   }
   // 第二个按钮不使用混合器【实参值为false】，无样式按钮
   .false{
       @include btn($btn:false);
   }
   // 第三个按钮使用有颜色样式的混合器，并且叠加标签选择器的基础样式
   .primany{
       @include btn-primany;
   }

        html代码段：

<button>普通按钮</button>
<button class="false">无样式按钮</button>
<button class="primany">primany按钮</button>

sass选择器继承

• 作用：一定是一个选择器继承另一个选择器里面的样式
• 介绍：把共有的属性抽离出来放在选择器中，其余继承的和这一个选择器组成群组选择器，选择器单独的属性属于自己

1. @extend 选择器；

2. @extend html元素；【继承HTML元素的样式】

3. 工作细节

   • 继承重复选择器不是属性，比混合器生成css体积更小，站点速度更快

   • css样式用哪个样式，取决于选择器的优先级，如果同级，后边覆盖前边的

4. 实践

   • 可以用一个选择器继承后代选择器的css规则

   • 避免生成css选择器的数量会失控，不要使用后代选择器继承css规则

SassScript运算

1. SassScript新功能

2. 数据类型【个人理解：针对属性】

   1. 数字：10px

   2. 字符串：

   3. 颜色：red、#00000、rgba（0,0,0,1）

   4. 布尔值：ture、false

   5. 空值：null

   6. 数组（list）：1.5em 2em 3em

   7. maps：相当于对象（key：value）

3. 算术运算符

   • / and %有三种情况下作为算术运算符

     1. 值在变量中使用

     2. （）

     3. 在算数表达式中

   • 使用插值语句#{}包裹每一个值“ / ”作为分隔符

4. 字符串运算符

   • +字符串拼接，左边第一个有引号，结果有引号，反之则无

   • 运算表达式与其他值连用时用空格隔开

   • 在字符串里面动态添加数值用 插值语句#{}

5. 圆括号优先运算

6. 插值语句#{ }

SassScript内置颜色函数

1. 颜色hsl(hue, saturation, lightness)

   • 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色