w1020/21.scss/归纳.md

1. Sass是css的扩展语言，可以帮助我们减少css重复的代码，节省开发时间；
2. Sass是一款强化css的辅助工具；
3. Sass文件后缀为.sass，.scss;
4. 它在css语法的基础上增加了变量、嵌套、混合、导入等高级功能，这些拓展令css更加强大与优雅。
5. 使用Sass以及Sass的样式库有助于更好地组织管理样式文件，以及更高校地开发项目。
6. 浏览器并不支持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.多个值