SASS常用语法概要

什么是SASS

sass是“css预处理器”中的一员,所谓“css预处理器”就是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的css文件。

sass就是在css语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

sass有两种文件格式,文件后缀名分别为.scss和.sass

其中.scss文件和一般的.css文件格式一样,都有花括号和分号,仅仅只是在css的语法上进行了拓展;而.sass文件使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性。缩进格式也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式,具体请查看the indented syntax reference


.scss文件
.sass文件

基本语法

*下文中的涉及到的例子均为.sass文件格式

变量($)


变量定义及使用
编译后的.css文件

变量有块级作用域(局部变量)和全局作用域(全局变量)之分,也可通过!global将块级作用域里面的局部变量转化为全局变量;

全局变量和块级变量
全局变量和块级变量
编译后的.css文件
块级变量变为全局变量

*这里遇到了一个坑,在.sass文件中不要在!global后面直接添加注释,编译会报错,但是在.scss文件中在!global后面直接添加注释,编译却不会报错,估计是因为.scss文件中有;可以明确区分代码和注释,而.sass中不能明确区分什么是注释什么是代码

如果要将变量插入到字符串中,可以使用插值符号——#{}

插值符号的使用
编译后的.css文件

嵌套(选择器嵌套&属性嵌套&父选择器)


选择器嵌套&属性嵌套&父选择器的使用


编译后的.css文件

运算

SASS还支持运算的功能

加减乘除、取整等运算 (+, -, *, /, %),同时,如果有需要它会在不同单位间转换值。


编译前.sass
编译后.css

比较特殊的是/运算,根据不同情况可以处理为除法运算或者仅仅只是分隔数字的作用

以下三种情况/将被视为除法运算符号:

如果值,或值的一部分,是变量或者函数的返回值

如果值被圆括号包裹

如果值是算数表达式的一部分

但如果希望使用变量,同时又要确保/不做除法运算而是完整地编译到 CSS 文件中,只需要用#{}插值语句将变量包裹。

编译前.sass
编译后.css


除了数值的运算还有颜色值的计算

颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值

不过感觉一般实际项目中很少用到颜色值的计算,不过觉得有趣,所以就简单提一下

编译前.sass
编译后.css

混合指令 (Mixin Directives)

混合指令(Mixin)用于定义可重复使用的样式,通过@mixin来定义,@include来调用,同时支持参数的指定,参数若是没有传时,可以使用默认值,或者明确要传入哪一个特定参数。

编译前.sass
编译后.css

继承 ( @extend )

sass支持一个选择器继承另一个选择器的所有样式。

编译前.sass
编译后.css

插入文件( @import )

Sass 拓展了@import的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

若导入的文件后缀名为.css文件,则import作为普通的css语句。

若导入的文件后缀名为.sass或.scss,则被导入的文件将与当前文件合并,同时,@import "foo"或者@import "foo.sass"导入的效果都是一致的,没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为.scss或.sass的文件并将其导入。

注释

Sass 支持标准的 CSS 多行注释/* */,以及单行注释//,前者会被完整输出到编译后的 CSS 文件中,而后者则不会。

编译前.sass
编译后.css

高级用法

sass支持的数据类型中,除了数字,字符串,颜色,布尔型,空值,

还有:

数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif

maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)

于是我们便可以使用@each这样的高级用法

@each

编译前.sass
编译后.css
编译前.sass
编译后.css

@for

编译前.sass
编译后.css

@if

编译前.sass
编译后.css

SASS常用语法就总结到这里了,都是一些比较常见,日常开发中能用到的语法。

在总结的过程中,对我也是一个很好的巩固的过程,毕竟组织成文字和小demo的形式更容易记住。

最后,个人认为用的合适才是发挥了sass带来的便利,不要为了用sass而用sass,一不小心反而会使得代码变得复杂。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容