读书人

SASS详解之根本语法

发布时间: 2013-10-22 16:17:03 作者: rapoo

SASS详解之基本语法

  SASS大家已经知道是什么东东了,电脑上也有编辑SASS的编程软件了,浏览器也能调试SASS了,那么我们接下来就直接步入正轨,准备迎接SASS的挑战,深入的了解一下SASS的用法吧。

  SASS目前有两种语法。一种是SASS,这是一种旧版的SASS语法,也被成为缩进语法,其主要特点是去除了编写CSS时候的“{}”,让代码看起来比较整洁,其文件的后缀名是“.sass”。另一种是SCSS,我们这是我们现在常用的比较容易掌握的SASS语法,也是新版的SASS语法,其文件的后缀名是“.scss”。为大家介绍的SASS就是最新版本SCSS。旧版本在这里只是简单带过了。


 SASS的变量


  相信广大的CSS编写人员都会遇到很多重复的属性值,那么这些重复带给我们的往往是分烦躁单一的复制粘贴。这将让我们的工作变得单一。若大家用SASS编写的话,我们只需要通过设置变量,就可以让整个编写过程中重复的东西变成变量化。变量的用处有很多,在一些日常的属性值中运用,可以在一些基本数学运算中运用,还可以在SASS函数中运用。

  设定SASS变量,必须在变量前面添加“$”,后面紧变量名和变量值,而且变量名和变量值之间需要使用冒号“:”隔开。具体的实现方法如下。


  SASS代码

.inherit {  font-size: 18px;}


  SASS的变量、SASS的嵌套、SASS的模块化(Mixins)和SASS的继承(extend)就是SASS中比较常用的语法规则。大家若是掌握了上面这些,就能够用SASS进行编写样式了。SASS详解之基本语法就为大家介绍到这里,希望这篇SASS详解之基本语法能为大家了解SASS的基本语法有所帮助,只有掌握了基本语法,大家才能在此基础上更加深入的走下去。

读书人网 >Web前端

热点推荐