1.背景介绍
我们学过都知道CSS只是一门描述性的语言,你只能一行一行单纯地描述,并不能像JS那样使用变量、循环、运算等方式来操作。 CSS预处理语言的出现,极大的解放了我们,在CSS预处理语言当中,我们可以使用变量,嵌套,循环等来写CSS。而sass是国内使用人数比较多的一种,更强大,更成熟。
2.知识剖析
2.1安装使用。
SASS使用 sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!) 先从官网下载Ruby并安装。然后再安装sass即可。安装好sass,之后我们就可以直接写sass,写好之后把Sass编译成css。编译方法很多,比如命令行编译,编译软件koala,我们常用的编辑器也可以webstorm,sublime也可以实时编译。
具体可以去sass官网看下教程:https://www.sass.hk/install/
2.2 一些常用的语法
变量,Sass的变量包括3部分:声明符、变量名、值。值可以是数字,字符串等。比如:$height:12px;,到时我们需要用12px,直接调用$height。变量有一个全局的,一个局部的变量。局部变量:一般指的是在“选择器、混合宏、继承等”内部定义的变量。全局就是在外部定义的变量。
嵌套,简单说就是在一个选择器中再去嵌套选择器,属性等。
(1)选择器嵌套;操作方便,缺点是,层级深的话编译出来的选择器也多。
(2)属性嵌套;一个选择器中的属性前缀一样的话,可以嵌套,比如多个font。
(3)伪类嵌套;加上&使用,编译时会自动加上选择器。
注释,3种注释方式:(1)//注释内容;(2)/注释内容/;(3)/!注释内容/。
第一种,只在sass中起作用,不编译到CSS。
第二种,编译到CSS,因为跟CSS注释方法一样。
第三种,为了防止压缩工具删除,我们有时用这种方式,一般是为了声明版权时使用。
数字运算 ,有加减乘除,加法和减法一样都是要相同单位才能运算,不然编译不了。乘除就不能用相同的单位,只要一个有单位即可。两个相同单位的话编译不了。乘除加上()。
这是我们常用的sass语法,想学习更多可以去 sass教程 学习。
3.常见问题
sass想要使用让SASS监听某个文件或目录,但在命令行下面语句:Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 Use --trace for backtrace.
4.解决方案
这是路径中有中文,改为英文路径即可,我们开发中路径不应该有中文,不然会各种莫名奇妙报错。
5.编码实战
暂无
6.扩展思考 sass和less的不同?
1,变量名称的不同,less是@,sass是$。
2,Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放到项目中
3,sass支持条件语句,比如if else for等,less不支持
4,sass可以设置输出类型,
nested:嵌套缩进的css代码
expanded:展开的多行css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
less就不可以
7.参考文献
http://www.manongjc.com/sass/sass_tutorial.html
码农Sass 教程 - Sass入门学习
sass中文网
https://www.zhihu.com/question/22285654/answer/20909926
sass/scss 和 less的区别
8.更多讨论。
1.为什么使用sass,而不是直接用CSS。
因为可以减少我们的代码量,更简易的进行开发。让我们像使用编程语言一样,来写CSS。
2.嵌套太深,选择器太多有什么坏处。
选择器太多会影响我们的选择权重,而且后期不易维护。建议只嵌套三个
3.进行除法运算要注意什么?
要注意的,只能一个带单位,还有就是加上()不然编译会错误。