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

什么是sass?
为了减短开发网站建设css的所需时间,因此ruby(一种程式语言)开发出了css程式化框架scss、sass。两者皆属于sass,差别在副档名与撰写方式的不同。sass是原生的sass语法,最大的特征是以缩排取代了css的大括弧,scss则是后来衍生出来的,在结构上与css十分相似,因此对于本来就习惯写css的人来说,scss会比较容易上手。
安装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中新增变数前需加符号"$"
可以整合网站最常使用的宽、高、颜色、字型等等,预先设好,需要时就能拿出来使用。
2.巢状(nesting)
透过巢状式结构,父子元素的命名关系一目了然,易读性增高,减少css的编辑时间。
3.函式{mixins)
可以省去许多重复的css文字,新增函式前需加=做为宣告,函式使用前则需加+号即可取用。
4.继承(extend)
sass里的继承与css的继承差距不大,也就是能沿用之前所撰写的css,标签前加@extend便可沿用。
5.运算符(operators)
在sass里可直接做加减乘除的计算(注意单位需相同)

6.导入(import)
当需要使用其他sass文件时,只要将文件导入@import进来即可。
需注意的是导入的文件前需加下底线_。
如例子master.sass需写成_master.sass
若能灵活应用sass的话,将会大幅度降低网站建设css的撰写时间,并由于css行数减少的关系,使得后续的维护与修改更加容易,也能够使网页读取速度更快。缺点在于一开始繁复的安装过程,并需要先开启编辑器生成css才能看到撰写的网页内容,且需花时间学习新的语法,但若是习惯之后,确实能减少许多不必要的时间。想提升工作效率吗?学习sass会是你的好选择。
电商企业网络营销成功的秘籍=方法加技巧
交换友情链接可以达到什么效果?
二级域名与一级目录对于排名有何差异
网站优化答录:抓取诊断与链接提交,哪个更好些
网站优化答录:移动端与pc端差距较大需要怎样调整?
网站优化问答录:如何处理网站上出现的死链接?
关于网站排名的那些事!
上一个:如何.net语言做邮件群发
下一个:网站制作解析最新2.0扁平化网页设计布局
大同网站建设,大同做网站,大同网站设计