世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
特性：
兼容CSS：Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。
成熟：Sass已经经过其核心团队超过13年的精心打造。
行业认可：一次又一次地，行业把Sass作为首选CSS扩展语言。
社区庞大：数家科技企业和成百上千名开发者为Sass提供支持。
框架：有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。
原因：
原生css的不便
书写重复的选择器修改css属性不方便css代码重复。比如水平垂直居中、ul三件套面对一些有规律的css选择器编写，效率不高
基本概念：
sass是对css的一个扩展。通过其提供的变量、嵌套、混合、条件、循环等特性能够极大的提高编写css代码的效率。
sass本质上是一个脚本（编程）语言。有自己的编写语法。编写的代码通过编译后能够转为被浏览器识别的css代码。即sass代码需要转为css代码才能够使用。
作用：能够极大的提高编写css代码的效率。
特点：
支持了很多特性。变量、嵌套、混合、条件等。
社区活跃、资料齐全，学习成本较低。
兼容所有版本的css。即sass文件里可以直接写原生的css代码。
基本使用：
一、通过命令来执行
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
1、安装ruby（sass的底层实现）
ruby下载地址：Downloads
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
运行cmd，输入 ruby -v 查看ruby版本命令，可测试是否安装成功。
ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]
安装成功后，因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。
gem update --system //该命令请翻墙一下
gem -v
3.0.3
//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com
如果你使用 Gemfile 和 Bundler (例如：Rails 项目)
你可以用 Bundler 的 Downloads。
bundle config mirror.https://rubygems.org https://gems.ruby-china.com
2、安装sass
Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
可通过 sass-v 和 compass -v 测试是否安装成功
sass -v
compass -v
sass常用更新、查看版本、sass命令帮助等命令：
//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h
二、使用vscode中的easy sass插件来使用
1、安装easy sass插件
2、新建以.sass或.scss为后缀的文件，在里面书写sass代码。
.sass是旧版本的sass文件格式.scss是sass新版本的文件格式
3、easy sass插件会自动将sass文件转为css文件。在页面上引入转换之后的css文件。
4、手动指定转换的css文件保存路径
打开settings.json：并清空将easy sass的配置代码放入settings.json中
//保存scss代码后自动转为css代码
"easysass.comileAfterSave":ture,
//指定转为什么格式的css代码
"easysass.formats":[
//neated:嵌套缩进的css代码
expanded:没有缩进的、扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
{"format":"expanded",
"extension":".css"
},
{"format":"compressed",
"extension":".min.css"
}
],
"easysass.targetDir":".css/"
转换后的css代码会放在工作区目录下的css文件夹下，当然可以更改
主要内容
变量
概念：变量可以理解为可以保存一个数据的容器，可以在代码里重复使用
语法：
$变量名：数据；数据可以是任意css属性的属性值。比如说70px，50%，2rem，1em，vw；还可以是组合属性的数据，比如1px solid red或move 3s
变量名规范：
变量名可以包含数字、字母、-、_尽量不要以数字开头多个单词间尽量以-间隔
变量分类：
全局变量：指在scss文件开头定义的变量，文件里任意位置都可以使用局部变量：定义在某个{}里的变量，局部变量只能在定义时所在的{}里使用
注意：
如果有同名的全局变量和局部变量，那么在局部变量所在{}中，会优先使用局部变量，其他位置会使用全局变量
应用场景：
当页面有个属性值重复被使用的时候，就可以使用变量来处理
嵌套
概念：sass可以支持在css选择器里直接嵌套书写子标签的css代码
作用：让css代码层次结构清晰明了，不会出现父子标签之间的权重问题
语法：
父选择器{
css属性：css属性值；
子标签选择器{
css属性：css属性值；
}
}
如果要给父标签设置伪类或伪元素怎么处理？兄弟标签选择器怎么处理？
&：当前选择器
静默注释：
概念：sass额外提供的一种注释，俗称单行注释
语法：//单行注释，而且，在转为css之后会忽略该注释
数学运算：
概念：可以使用数学中的基本运算（加减乘除取余）
注意：
运算符号两边要有空格%尽量不要和px混算
sass提供的常用快捷数学操作代码（数学函数）：
random（）：返回0~1之间的随机小数
配合乘法可以用于生成随机的数据，比如rgb、尺寸等。round（）：四舍五入floor（）：向下取整，即获取不大于数字的最接近的整数ceil（）：向上取整，即获取不小于该数字的最接近的整数max（）：在多个数之间取最大的数字min（）：在多个数之间取最小的数字
混合
背景：页面上在处理一些常见操作的时候（比如水平垂直居中，或修改默认样式）时，会出现重复的代码块。
解决：利用sass提供的混合来减少代码块的重复编写
概念：混合即一段代码的容器，当页面需要使用到该段代码时，直接引用该混合即可。可以重复使用，而无需重复编写。
基础语法：
1、定义混合：
@mixin 混合名{
包含的一段scss代码
}
2、使用混合：
@include 混合名;
例：文字溢出
@mixin text-overflow{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
在引用混合的地方会自动将混合里的scss代码放入到引用的位置。即使用了一次混合里的scss代码。
混合需先定义再使用，不能在定义之前使用。
混合名规范：
见词达义：尽量混合名能够表达该混合的作用
混合参数：指我们可以给混合提供数据，在混合中使用。这样可以达到定制混合的目的。混合参数是指混合定义时圆括号里的变量
1、定义混合，添加参数：
@mixin 混合名（$变量名：默认值）{
$变量的数据来自于使用混合时用户传入的数据，如果没有传入数据，则使用默认值
$变量只能在混合里使用
}
2、使用混合时，传入数据：
@include 混合名（数据）;//该数据会自动赋给混合里的$变量
应用场景：
scss代码中有重复的代码块。
默认值
条件判断
概念：scss可以对某个数据进行判断，根据判断的结果不同可以使用不同的样式
语法：
@if 判断条件1{
判断条件1成立时会使用的样式
}@else if 判断条件2{
判断条件1不成立同时判断条件2不成立时会使用的样式
}@else {
判断条件都不成立时会使用的样式
}
scss中常用的判断符号（关系运算符）：
==：判断是否等于某个数据!=:判断是否不等于某个数据>:大于<:小于>=:大于或等于<=:小于或等于
注意：无论有多少个else if，最终if、else if、else只会执行其中一个
循环
概念：循环本身是指重复的做某件事情。
在程序中，循环指的是某些代码在重复的使用。我们可以利用sass所提供的的for循环来帮助我们减少一段代码重复的编写。
语法：
for循环的两种使用方式：
1、不包含结束数字
@for $变量 form 开始数字 to 结束数字{
//需要重复编写的代码
}
例：
@for $i form 1 to 10{
.item-#{$i}{
width:20px;
}
}
2、不包含结束数字
@for $变量 form 开始数字 through 结束数字{
//需要重复编写的代码
}
推荐阅读
您阅读本篇文章共花了：
发表评论