首页
学习
活动
专区
工具
TVP
发布

嗯哼!关于神奇的Sass

神奇的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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180109G0ZT6B00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券