首页 > 知识•资讯 > SASS--加速网页设计CSS撰写的利器 > 正文

SASS--加速网页设计CSS撰写的利器

2016/12/20 0:00:00 · 稿源:传诚信

什么是SASS?

为了减短开发网站建设CSS的所需时间,因此Ruby(一种程式语言)开发出了CSS程式化框架SCSS、SASS。两者皆属于SASS,差别在副档名与撰写方式的不同。SASS是原生的SASS语法,最大的特征是以缩排取代了CSS的大括弧,SCSS则是后来衍生出来的,在结构上与CSS十分相似,因此对于本来就习惯写CSS的人来说,SCSS会比较容易上手。

 SASS--加速网页设计CSS撰写的利器

安装SASS

1.到Ruby官网下载最新的Ruby程式。http://rubyinstaller.org/downloads/

开启「Start Command Prompt with Ruby」视窗并执行。

2.按「开始」->「执行」输入「cmd」开启命令提示字元。

3. 输入「gem install sass」安装SASS。

安装之后可输入sass-v 确认是否安装成功。

SASS的特色

1.变数(Varibles)

在SASS中新增变数前需加符号"$"

可以整合网站最常使用的宽、高、颜色、字型等等,预先设好,需要时就能拿出来使用。

1.jpg

2.巢状(Nesting)

透过巢状式结构,父子元素的命名关系一目了然,易读性增高,减少CSS的编辑时间。

1.jpg

3.函式{Mixins)

可以省去许多重复的CSS文字,新增函式前需加"="做为宣告,函式使用前则需加"+"号即可取用。

1.jpg

4.继承(Extend)

SASS里的继承与CSS的继承差距不大,也就是能沿用之前所撰写的CSS,标签前加"@extend"便可沿用。

1.jpg

5.运算符(Operators)

在SASS里可直接做加减乘除的计算(注意单位需相同)

1.jpg

6.导入(Import)

当需要使用其他SASS文件时,只要将文件导入"@import"进来即可。

需注意的是导入的文件前需加下底线"_"。

如例子master.sass需写成_master.sass

1.jpg

若能灵活应用SASS的话,将会大幅度降低网站建设CSS的撰写时间,并由于CSS行数减少的关系,使得后续的维护与修改更加容易,也能够使网页读取速度更快。缺点在于一开始繁复的安装过程,并需要先开启编辑器生成CSS才能看到撰写的网页内容,且需花时间学习新的语法,但若是习惯之后,确实能减少许多不必要的时间。想提升工作效率吗?学习SASS会是你的好选择。



  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354