神奇的Sass
Sass是什么
Sass是个非常神奇的东西,是一种针对于CSS的开发工具。小编认为Sass是一个十分高大上的样式语言,大大小小的语法类似于我们学过的C、JavaScript,当我们具备了这些语言基础,学Sass易如反掌。
Sass的好处
1.新规范可以减轻我们这些码农的工作量。
2.让我们对CSS的某一个模块进行更好的维护。
3.逻辑性比较器,可有效减少CSS的代码冗余。
小编小编!Sass怎么装啊,一脸懵逼!
去官网看看教程吧,或者往下看哈!
Sass的安装
1.Sass是基于Ruby的,所以我们首先要安装Ruby哦!我们可以进入Ruby的官网去下载:(小编用的win64位系统,32位系统可以下载x86哦)
2.下载完毕就可以进行安装了,在这一步一定记得在Add Ruby executables to your PATH这个选项打钩。
3.接下来就可以测试Ruby是否安装成功,如图在命令行写ruby -v查看ruby版本,若出现类似以下信息就恭喜你啦,安装成功!
4.我们就可以安装Sass了!以windows系统为例,在命令行写入gem install sass,出现类似下边的信息就安装成功啦!
5.我们可以试试,Sass是否安装成功!在命令行敲入sass -v用来查看Sass的版本,以下信息代表Sass已经成功安装。
干货小技巧
压缩一个css文件
Sass是一个普通的文本文件,可以直接去写css,但是Sass文件的后缀名是XXX.scss。(小编理解它为super css)
我们需要创建一个scss文件:(新建一个txt文本文档,直接更改后缀名即可)
我们打开HBuilder(小编觉得用WebStorm好一些),在这个MySass文件里写点儿样式吧!
我们写了点儿清除默认样式的css代码,写什么并不重要,重要的是我们该如何压缩它呢?打开当前目录的命令行,敲sass --style compressed MySass.scss MySass.css
如图所示,并没有提示什么信息!别急,Linus告诉我们,没有消息就是好消息,当然就是压缩成功啦!我们可以看到出现了MySass.css文件和MySass.css.map文件。
打开MySass.css文件,我们就看到了压缩成功的一行代码,有木有JQuery.min.js的感觉呢!
开拓下思维,我们由此就可以得到将scss文件转换成css文件的命令咯!各位可以下去试试哦,sass MySass.scss MySass.css。
别急!还有干货!
这里再简单介绍一下Sass的部分语法
1.定义变量是以$开头。
比如定义一个变量$jimmy,让这个值为黑色:
然后ctrl+s保存,打开命令行输入sass --watch MySass.scss:MySass.css实时监听(只要改变scss中的代码并保存,css文件会同步转换)
2.组合时可以使用#{}。
再比如我们要进行组合,看下面例子,定义宽为20px(第一张图为scss文件,第二张图为对应的css文件):
3.继承用@extend
在我们的Sass中同样有着继承样式这一说,比如我们要继承.abc中的样式:
4.还有复用的概念@mixin。
所谓复用,顾名思义——重复使用,这样可以保持属性的简洁,避免太多的重复冗余。
比如说我们需要body的宽高都复用变量MyWidth和MyHeight的:
4.条件语句。
条件语句和我们学过的c语言或者js形式是差不多的,但是表示的时候有些差异,这里就放一个模板:
5.循环语句。
同样的,逻辑相通,表示上差异也是有的。
for循环:
while循环:
each循环:
6.插入文件@import。
有的时候我们可能需要在外边引入文件,在Sass中需要用@import来引入,小编发现这个跟java语言还有些相似。
7.函数@function。
函数function在大多数编程语言中都是非常重要的,然而在Sass中也有相似的作用。
哇!不知道大家看累了吗?反正小编是写累了,不过只要对大家有帮助,再累也是开心的!最后闲谈一下,为什么要用Sass呢?小编个人认为首先呢这是一种互联网前端开发的趋势,其次它能够帮助我们开发出更高效的程序模块,最后呢,在我们需要改代码时,改一处即可,便于维护!欢迎大家提出宝贵的意见或者建议。好啦,今天就分享到这里,各位小可爱我们下期再会!
小编:Mr.Ma
领取专属 10元无门槛券
私享最新 技术干货