sass核心知识点

sass 核心知识点

1、什么是CSS预处理器，什么是Sass

（1） CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。

（2） Sass是一种最早出现的“CSS预编译处理器”，        进行网页样式设计，然后再编译成正常的CSS文件。     Sass提供了许多便利的写法，大大节省了设计者的时间，     使得CSS开发，变得简单和可维护

2、Sass与SCSS有什么区别      sass后缀名为sass，是sass的老式语法，不使用大括号和分号进行缩进；   scss后缀名为scss,使用大括号和分号进行缩进，是sass的新式语法。      建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

3、Sass/SCSS和纯CSS对比  CSS没有语句，无法编程，只是单纯的描述

4、了解sass前世和它安装的前提条件

（1）sass 是基于ruby来发明的 这也决定了他前期的语法结构类似ruby的严格缩进的风格 

（2）我们想利用sass语言 必须要安装ruby的安装包  以ruby为开发环境 来编写sass

(3) 在ruby环境下使用 gem install sass(网络安装方式)                        gem install 本地sass安装包的路径

5. sass的编译

（1）命令编译          sass .scss:.css

（2）GUI图形化界面操作编译         koala   (特别注意：)注意ruby 和 koala 安装目录下的核心配置文件的编码格式 为“UTF-8”

6、输出方式    nested：嵌套缩进的css代码，它是默认值。　　expanded：没有缩进的、扩展的css代码。　　compact：简洁格式的css代码。　　compressed：压缩后的css代码。

7、普通变量与默认变量      普通变量:  $变量名：值;      默认变量:  $变量名：值 ！default;

8、局部变量和全局变量    核心内容: 变量名称相同下  局部变量称之为全局变量的影子，            局部变量只在局部区域覆盖全部变量。

9、嵌套：    选择器嵌套， 属性嵌套， 伪类嵌套

10、混合宏的声明、调用、参数

(1)@mixin:声明混合宏的关键字 

（2）@include：调用混合宏的关键字

（3）混合宏的传参有三种写法

11. 只传变量名，调用的时候再去传值

12. 变量直接在混合宏中赋值

13. 基于前两种我们也可以传多个参数  注意“ ... ”

14、Sass扩展/继承    继承关键字：@extend 继承特点： 为了减少冗余的css代码

15、占位符    占位符声明关键字：%placeholder 特点：不被继承就不会编译成css代码

16、插值    声明插值的关键语法 #{} 特点：Sass 获得一个更好的结构体系。       比如说你想写更干净的、   高效的和面向对象的 CSS。