分享人:江吉仪
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
学过CSS的小伙伴都知道,CSS只是一门描述性的语言,你只能一行一行单纯地描述,并不能像JavaScript那样使用变量、循环、运算等方式来操作。 CSS预处理器的出现,使得我们可以像操作JavaScript那样以“编程”的方式来书写CSS。在CSS预处理器中,我们可以使用变量、循环、函数等方式来简化操作,提高开发效率 CSS预处理器,说白了就是用编程方式来写CSS的一类语言,就这么简单。
国内常用的有less和sass,我选择sass来讲,国内教程比较多,也更成熟
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!) 先从官网下载Ruby并安装。然后再安装sass即可。安装好sass,之后我们就可以直接写sass,写好之后把Sass编译成sass。编译方法很多,比如命令行编译,编译软件koala,我们常用的编辑器也可以webstorm,sublime也可以实时编译
sass中文网站地址。https://www.sass.hk/install/
Sass语法
Sass 基本运算
Sass代码重用
Sass流程控制
sass想要使用让SASS监听某个文件或目录,但在命令行下面语句:Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 Use --trace for backtrace.
这是路径中有中文,改为英文路径即可
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就不可以
http://www.manongjc.com/sass/sass_tutorial.html
码农Sass 教程 - Sass入门学习
https://www.sass.hk/install/
sass中文网
https://www.zhihu.com/question/22285654/answer/20909926
sass/scss 和 less的区别
https://www.cnblogs.com/wangpenghui522/p/5467560.html
感谢大家观看
BY : 江吉仪