Sass是css的扩展语言，可以帮助我们减少css重复的代码，节省开发时间；
Sass是一款强化css的辅助工具；
Sass文件后缀为.sass，.scss;
它在css语法的基础上增加了变量、嵌套、混合、导入等高级功能，这些拓展令css更加强大与优雅。
使用Sass以及Sass的样式库有助于更好地组织管理样式文件，以及更高校地开发项目。
浏览器并不支持Sass代码，因此，需要使用Sass预处理器将Sass代码，Sass代码转为Css代码

Scss变量

变量用于存储一些信息，它可以重复使用； Sass变量可以存储:字符串、数字、颜色值、布尔值、列表、null值； Sass变量使用$符号；

注释方式

//注释方式特点:不会保留到编译之后的css文件中 /* */ 多行注释特点:会保留到编译之后的css文件中

Scss为什么是两种格式

style.sass style.scss sass格式会省略花括号和分号，所以通常存为scss

变量的原理

变量的原理是存储在内存中，用于不断变化的值；声明变量用$ 全局变量与局部变量 $后跟进变量名用:进行赋值 $box:50px !default;表示默认变量特点：优先级较低 !global 全局

在sass中嵌入其他scss文件

@import url(reset.css) @import “路径.scss”

嵌套

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

 “&”表示查找当前元素以及当前元素的祖先元素

混合宏

@mixin 指令允许我们定义一个可以在整个样式表重复使用的样式； @include 指令可以将混入(mixin)引入当文档中； @mixin 混合宏名称(参数) {复用代码} @mixin 声明混合宏（类似于函数声明） @include 调用混合宏（类似于函数调用）缺点：产生冗长的代码块变量存在作用域的问题：全局变量和局部变量传参()的变量都是局部变量多个局部变量用逗号（英文）隔开，变量可以赋值也可以不赋值

不带参数

@mixin是用来声明混合宏的关键词，类似css中的@media、@font-face一样。

带参数

1.带参数不带值
2.带参数带值

a.单个值  b.多个值

继承

在sass中继承类中的样式代码块；通过关键字 @extend来继承样式所以样式代码，而且编译出来的css会将选择器合并在一起，形成群组选择器；基类：已存在的样式块；声明方式：.class(如:.titleBar) 调用方式: @extend

占位符

%placeholder 简写 % 可以取代css中的基类造成的代码冗余的情形；因为%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码；

函数

自定义函数: 要实现函数声明和返回内容需要使用function和return两个指令。 @function 函数名(形参) {

@return;

} #{函数名(变量值)}px

操作符

加法：需要单位统一减法：减法前后加空格，不可直接连接减法运算乘法：只允许一个数值带有单位除法：需要在运算外添加一个小括号颜色运算：支持颜色值，分段运算

总结

混合宏声明方式:@mixin 调用方式:@include 编译出来的css显示，它不会自动合并相同的样式代码缺点:造成代码冗余使用场景:代码块中涉及到变量，建议使用混合宏来创建相同的代码块
继承声明方式:class 调用方式:@extend；使用后，编译出来的css代码块合并到一起，通过群组选择器的方式向大家展现；这样编译出来的代码相对于混合宏来说要干净的多，但他不能传变量参数；使用场景:如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，建议使用继承；
占位符声明方式%placeholder （%）调用方式:@extend 占位符和继承的主要区别： 1.占位符是独立存在，不调用的时候是不会再CSS中产生任何代码； 2.继承是首先有一个基类存在，不管调用不调用，基类的样式都将会出现在编译出来的css代码中；

归纳.md 4.0 KB Permalink History Raw