CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
其它 CSS 预处理器语言：
CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的 CSS 预处理器语言，比如说：
Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS
什么是 Sass？
Sass 官网上是这样描述 Sass 的：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass 前世今生：
Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。
Sass 是采用 **Ruby **语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。
为什么早期不如 LESS 普及？
虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受，另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早，但远不如 LESS 普及的原因。
sass、scss有什么区别呢？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
scss的引入方法
1.引入其他 .scss 文件
@import 'index.scss'
这样的话，文件在编译后，会自动把引入的文件和当前文件合并为一个.scss文件
2.引入其他 .css 文件
@import 'index.css'
和引入.scss文件不同，这样引入的.css文件在编译后不会和当前文件合并为一个.scss文件，而是继续保持为外链引入方式
3.在vs code 中scss使用方法 vs code 下载扩展名Easy sass 、sass,创建xx.scss,按下ctrl+p 点击相应的scss后缀文件，即可生成css文件并自动编译，在html里面引入css即可
scss注释方法
scss的注释有两种
1.块注释
/*
*/
2.行注释
//
scss变量
scss变量分为3种，以$符号开头,后面紧跟变量名。变量名和变量值之间用冒号：分开
1.常规变量
$key: value;
2.默认变量
$key: value!default;
默认变量是可以被覆盖的,具体覆盖方法如下
$font: 12px;
$font: 14px!default;
3.特殊变量
$fontSize:14px;
font:#{$fontSize}
4.多值变量
多值变量分为list和map两种类型，list类似于js的数组，map类似于对象
嵌套
嵌套分为两种：1.选择器嵌套（目前经常使用的）、2.属性嵌套：不经常使用
选择器嵌套
// scss 文件
ul{
li{
a{
}
}
}
//解析为 css 文件
ul{
}
ul li {
}
ul li a{
}
//scss 在属性选择器中，&表示父元素选择器
a{
&:hover{
}
}
//解析为 css 文件
a{
}
a:hover{
}
属性嵌套
// scss 文件
div{
border{
top:{
width:1px;
}
left:{
width:2px;
}
}
}
//解析为 css 文件
div{
border-top:1px;
border-left:2px;
}
混合
@mixin 调用@mixin方法需要使用 @include
// scss 普通混合
@mixin font{
line-height:30px;
color: #fff;
font-weight:900;
}
.footer{
@include font;
}
// 解析为 css 文件
.footer{
line-height: 30px;
color: #fff;
font-weight:900;
}
// scss 文件
@mixin font($size:12px){ //默认参数 默认12px
font-size: $size;
}
.footer{
@include font(16px);
}
继承
使用继承会让该选择器继承指定选择器的所有样式,要使用关键词@extend，后面跟上指定的选择器
// scss文件
.font{
font-size:14px;
height: 16px;
}
.footer{
@extend .font;
border-width: 2px;
}
//解析问 css 文件
.font, .footer{
font-size:14px;
height: 16px;
}
.footer{
border-width: 2px;
}
站位选择器
%选择器名，通过@extend 去调用，如果不调用，则文件编译后不会出现改该冗余css文件
// scss 文件
%size{
font-size: 14px;
}
%clear{
overflow: hidden;
}
div{
@extend %size;
}
只有 %dir 选择器被调用了，%clear 在编译的时候会被当做冗余文件给过滤掉，不会出现在编译后的.css文件中
函数
sass 内置了很多函数，自己也可以定义函数。以 @function 开始 @return 返回值
//scss 文件
@function fn($data){
@return $data/10 + px;
}
div{
font-size: fn(80);
}
//解析为 css文件
div{
font-size: 8px;
}
其他功能
其他功能包括以下几点
1、运算：对于（数字，颜色，变量）的四则（加减乘除）运算,运算符前后各保留一格空格
2、if判断：@if可以单独使用，也可以配合@else、@else if 一起使用
3、三目运算符：if(true,1px,2px)，返回的值是1px,if(false,1px,2px),返回的值是2px
4、for循环，共有两种写法
在 Sass 的 @for 循环中有两种方式：
1、@for $i from <start> through <end>
2、@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
举例说明
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
再来个 to 关键字的例子：
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
//两种写法唯一的区别就是，through包括end这个数，to不包括end这个数。
each循环，@each var in <list>
项目中经常用到的功能
变量
嵌套
&
函数：用于移动端页面计算rem或者vw最佳
本文参考一网上的一些scss知识，进行了一些总结和举例，那么今天你学会了嘛？！ 加油！
网友评论