CSS编写是前端很基础也很重要同时也是很大一部分的工作，作为前端三技术之一的CSS在前端乃至web中占据了举足轻重的地位。自从产生了div+css布局之后，CSS所扮演的角色就变得越来越重要了，当CSS3.0登上历史舞台之后，CSS似乎就变得异常火爆了，受到了前所未有的关注。
但是，CSS并不算编程语言，仅仅是一种描述型语言而已，由于编写简单，无需任何逻辑思维能力，甚至可以完全不需要编程基础就可以编写CSS代码，所以CSS从业者几乎从未收到过重视，在一个研发团队中也几乎处于最低的地位，理由很简单：它没有技术含量。
在今天，web应用司空见惯，CSS的身影更是随处可见。面对越来越普遍和越来越复杂的web应用，CSS仅仅局限于表现型语言似乎已经无法满足我们开发的需求了，越来越多的场景不仅仅需要CSS来修饰网页，更希望它能拥有计算和逻辑的能力。所以，聪明的同行们经过不断的努力，创造了一种新的表现型语言－－sass。它是一种拥有js一样可以定义函数和声明变量的CSS语言，拥有CSS一样的超级简单的语法，只要写过CSS的人，几乎可以不费吹灰之力的学会sass这门牛逼的语言。sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
sass可以跟css完全一样的写法，只是文件后缀将变成.sass或者.scss。只是浏览器默认不识别sass的代码，所以需要编译成css文件之后才能供浏览器识别。既然无法识别，那就自然需要我们将其编译成css文件。下面我为大家介绍一下sass的几大特点和如何将其编译成CSS文件。
1.sass中可以定义变量，方便统一修改和维护
2.比如：
$color:#333;
body{
color:$color
}
这样写有一个好处，就是可以批量修改某一个统一的配置。
3.sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
比如：
html{
font-size:12px;
body{
height:auto;
div{
color:#ccc;
}
}
}
4.sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import
5.sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
6.sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
7.sass可进行简单的加减乘除运算等。
8.sass中集成了大量的颜色函数，让变换颜色更加简单。
那么如何编译成css文件呢？
目前基本有两种方案：
第一种：
1.在本机安装sass，SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
2.如果已经安装好了ruby，只需要在终端执行gem install sass，如果你用的是Mac，可以省略这一步，因为Mac本身就自带ruby和sass等。
3.执行sass test.sass test.css
这句命令的意思是将test.sass文件编译成test.css文件。
第二种：
借助自动化工具，比如grunt和gulp。gulp这个方式我在微信公众号前面的课程中已经有讲过，此处不再讲解。
如果大家对sass有兴趣，可以加我微信私信我，如果人数超过20人，我将以视频演示的方式专门对感兴趣的人进行讲解。
如果想加我微信，可以在公众号回复关键字“私聊”获取我的微信号。
网友评论