重新定义Css在编程界地位的它－－sass_html/css_WEB-ITnose

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人，我将以视频演示的方式专门对感兴趣的人进行讲解。

如果想加我微信，可以在公众号回复关键字“私聊”获取我的微信号。