Sass 全称:Syntactically Awesome StyleSheets,是CSS的延伸,完全与CSS兼容。Sass有助于构建大型样式表
学习文档 Sass(en-us) Sass(zh-cn)
语法格式 Sass有两种语法: 第一种,被称为SCSS,Scss是对CSS语法的扩展。每个有效的CSS样式表都是有效的SCSS文件。文件扩展名为.scss 另一种,被称为SASS,Sass提供了更简洁的编写CSS的方法,使用缩进代替括号表示选择器的嵌套,使用换行符代替分号分隔属性。文件扩展名为.sass 两种文件可以互相导入,或者通过sass-convert命令行工具互相转换
嵌套 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 #main p { color : #00ff00 ; width : 97% ; .redbox { background-color : #ff0000 ; color : #000000 ; } } #main p { color : #00ff00 ; width : 97% ; } #main p .redbox { background-color : #ff0000 ; color : #000000 ; } a { font-weight : bold; text-decoration : none; &:hover { text-decoration : underline; } body .firefox & { font-weight : normal; } } a { font-weight : bold; text-decoration : none; } a :hover { text-decoration : underline; } body .firefox a { font-weight : normal; } @mixin does-parent-exist { @if & { &:hover { color : red; } } @else { a { color : red; } } } #main { color : black; &-sidebar { border : 1px solid; } } #main { color : black; } #main-sidebar { border : 1px solid; } .funky { font : { family: fantasy; size: 30em ; weight: bold; } } .funky { font-family : fantasy; font-size : 30em ; font-weight : bold; } .funky { font : 20px /24px { family: fantasy; weight: bold; } } .funky { font : 20px /24px ; font-family : fantasy; font-weight : bold; }
注释
Interactive Shell 变量 1 2 3 4 5 6 7 8 9 $width : 5em ;#main { width : $width ; } #main { width : 5em ; }
数据类型 SassScript支持6种主要的数据类型:
数字,1,2,13,10px
字符串,有引号字符串与无引号字符串,”foo”,’bar’,baz
颜色,blue,#04a3f9,rgba(255,0,0,0.5)
布尔型,true,false
空值,null
数组(list),用空格或逗号作分隔符,1.5em1em02em,Helvetica,Arial,sans-serif
maps,相当于JavaScript的object,(key1:value1,key2:value2)
SassScript也支持其他CSS属性值,比如Unicode字符集,或!important声明。然而Sass不会特殊对待这些属性值,一律视为无引号字符串
运算 SassScript支持数字的加减乘除、取整等运算(+,-,*,/,%), 关系运算<,>,<=,>=也可用于数字运算,相等运算==,!=可用于所有数据类型
圆括号 圆括号可以用来影响运算的顺序
函数 SassScript定义了多种函数,有些甚至可以通过普通的CSS语句调用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 p { color : hsl(0 , 100% , 50% ); } p { color : #ff0000 ; } p { color : hsl($hue : 0 , $saturation : 100% , $lightness : 50% ); }
插入语句 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $name : foo;$attr : border;p .#{$name } { #{$attr }-color : blue; } p .foo { border-color : blue; } p { $font-size : 12px ; $line-height : 30px ; font : #{$font-size }/#{$line-height }; } p { font : 12px /30px ; }
变量默认值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $content : "First content" ;$content : "Second content?" !default;$new_content : "First time reference" !default;#main { content : $content ; new-content : $new_content ; } #main { content : "First content" ; new-content : "First time reference" ; } $content : null;$content : "Non-null content" !default;#main { content : $content ; } #main { content : "Non-null content" ; }
导入 Sass允许导入SCSS或Sass文件。被导入的文件将编译到同一个CSS文件中,被导入的文件中的变量或者混合指令(mixin)都可以在导入的文件中使用
通常,@import寻找Sass文件并将其导入,但在以下情况下,@import仅作为普通的CSS语句:
文件拓展名是.css;
文件名以http://开头;
文件名是url();
@import包含mediaqueries
如果导入时没有指定拓展名,Sass将会试着寻找文件名相同,拓展名为.scss或.sass的文件并将其导入
如果需要导入SCSS或者Sass文件,但又不希望将其编译为CSS,只需要在文件名前添加下划线,这样会告诉Sass不要编译这些文件,但导入语句中却不需要添加下划线 例如,将文件命名为_colors.scss,便不会编译_colours.css文件@import”colors”;导入的其实是_colors.scss文件 注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。
嵌套导入 可以将@import嵌套进CSS样式或者@media中,这样导入的样式只能出现在嵌套的层中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 @import "foo.scss" ;@import "foo" ;@import "foo.css" ;@import "foo" screen;@import "http://foo.com/bar" ;@import url(foo);@import "foo.css" ;@import "foo" screen;@import "http://foo.com/bar" ;@import url(foo);@import "rounded-corners" , "text-shadow" ;$family : unquote("Droid+Sans" );@import url("http://fonts.googleapis.com/css?family=\#{$family}" );@import url("http://fonts.googleapis.com/css?family=Droid+Sans" );
Sass中@media指令与CSS中用法一样,只是增加了一点额外的功能:允许其在CSS规则中嵌套。如果@media嵌套在CSS规则内,编译时,@media将被编译到文件的最外层,包含嵌套的父选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 .sidebar { width : 300px ; @media screen and (orientation: landscape) { width : 500px ; } } .sidebar { width : 300px ; } @media screen and (orientation: landscape) { .sidebar { width : 500px ; } } @media screen { .sidebar { @media (orientation: landscape) { width : 500px ; } } } @media screen and (orientation: landscape) { .sidebar { width : 500px ; } } $media : screen;$feature : -webkit-min-device-pixel-ratio;$value : 1.5 ;@media #{$media } and ($feature : $value ) { .sidebar { width: 500px ; } } @media screen and (-webkit-min-device-pixel-ratio: 1.5 ) { .sidebar { width : 500px ; } }
扩展 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 .error { border : 1px #f00 ; background-color : #fdd ; } .seriousError { @extend .error; border-width : 3px ; } .error { border : 1px #f00 ; background-color : #fdd ; } .error .intrusion { background-image : url("/image/hacked.png" ); } .seriousError { @extend .error; border-width : 3px ; } .error , .seriousError { border : 1px #f00 ; background-color : #fdd ; } .error .intrusion , .seriousError .intrusion { background-image : url("/image/hacked.png" ); } .seriousError { border-width : 3px ; } .hoverlink { @extend a:hover; } a :hover { text-decoration : underline; } a :hover , .hoverlink { text-decoration : underline; } .hoverlink { @extend a:hover; } .comment a .user :hover { font-weight : bold; } .comment a .user :hover , .comment .user .hoverlink { font-weight : bold; }
仅用于扩展 有时,需要定义一套样式并不是给某个元素用,而是只通过@extend指令使用,尤其是在制作Sass样式库的时候,希望Sass能够忽略用不到的样式 如果使用普通的CSS规则,最后会编译出很多用不到的样式,也容易与其他样式名冲突,所以,Sass引入了“占位符选择器”(placeholder selectors),看起来很像普通的id或class选择器,只是#或.被替换成了%。可以像class或者id选择器那样使用,当它们单独使用时,不会被编译到CSS文件中 占位符选择器需要通过@extend指令使用,用法与class或者id选择器一样,被延伸后,占位符选择器本身不会被编译
1 2 3 4 5 6 7 8 9 10 11 12 13 14 #context a %extreme { color : blue; font-weight : bold; font-size : 2em ; } .notice { @extend %extreme; } #context a .notice { color : blue; font-weight : bold; font-size : 2em ; }
可选扩展 如果@extend指令没有匹配的选择器时,将会报错,会生成新的选择器 如果要求@extend不生成新选择器,可以通过!optional声明达到这个目的
1 2 3 a .important { @extend .notice !optional; }
在指令中延伸 如果在@media(或者其他CSS指令)中使用@extend,必须延伸给相同指令层中的选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 @media print { .error { border : 1px #f00 ; background-color : #fdd ; } .seriousError { @extend .error; border-width : 3px ; } } .error { border : 1px #f00 ; background-color : #fdd ; } @media print { .seriousError { @extend .error; border-width : 3px ; } }
在根目录下发布 @at-root指令会导致一个或多个规则在文档的根目录中发布,而不是嵌套在其父选择器下面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 .parent { ... @at-root .child { ... } } .parent { ... }.child { ... }.parent { ... @at-root { .child1 { ... } .child2 { ... } } .step-child { ... } } .parent { ... }.child1 { ... }.child2 { ... }.parent .step-child { ... }@media print { .page { width : 8in ; @at-root (without: media) { color : red; } } } @media print { .page { width : 8in ; } } .page { color : red; }
Debug @debug指令将SassScript表达式的值打印到标准错误输出流。它有助于调试SassScript复杂的Sass文件
1 2 3 @debug 10em + 12em ;Line 1 DEBUG: 22em
抛出错误 控制指令 if() @if 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 p { @if 1 + 1 == 2 { border : 1px solid; } @if 5 < 3 { border : 2px dotted; } @if null { border : 3px double; } } p { border : 1px solid; } $type : monster;p { @if $type == ocean { color : blue; } @else if $type == matador { color : red; } @else if $type == monster { color : green; } @else { color : black; } } p { color : green; }
@for 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 @for $i from 1 through 3 { .item- #{$i } { width : 2em * $i ; } } .item-1 { width : 2em ; } .item-2 { width : 4em ; } .item-3 { width : 6em ; }
@each 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 @each $animal in puma, sea-slug, egret, salamander { .#{$animal }-icon { background-image : url('/images/#{$animal}.png' ); } } .puma-icon { background-image : url('/images/puma.png' ); } .sea-slug-icon { background-image : url('/images/sea-slug.png' ); } .egret-icon { background-image : url('/images/egret.png' ); } .salamander-icon { background-image : url('/images/salamander.png' ); }
多重循环 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 @each $animal , $color , $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { .#{$animal }-icon { background-image : url('/images/#{$animal}.png' ); border : 2px solid $color ; cursor : $cursor ; } } .puma-icon { background-image : url('/images/puma.png' ); border : 2px solid black; cursor : default; } .sea-slug-icon { background-image : url('/images/sea-slug.png' ); border : 2px solid blue; cursor : pointer; } .egret-icon { background-image : url('/images/egret.png' ); border : 2px solid white; cursor : move; } @each $header , $size in (h1: 2em , h2: 1.5em , h3: 1.2em ) { #{$header } { font-size : $size ; } } h1 { font-size : 2em ; } h2 { font-size : 1.5em ; } h3 { font-size : 1.2em ; }
@while 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $i : 6 ;@while $i > 0 { .item- #{$i } { width : 2em * $i ; } $i : $i - 2 ; } .item-6 { width : 12em ; } .item-4 { width : 8em ; } .item-2 { width : 4em ; }
混合 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 @mixin large-text { font : { family: Arial; size: 20px ; weight: bold; } color : #ff0000 ; } .page-title { @include large-text; padding : 4px ; margin-top : 10px ; } .page-title { font-family : Arial; font-size : 20px ; font-weight : bold; color : #ff0000 ; padding : 4px ; margin-top : 10px ; } @mixin silly-links { a { color : blue; background-color : red; } } @include silly-links;a { color : blue; background-color : red; } @mixin compound { @include highlighted-background; @include header-text; } @mixin highlighted-background { background-color : #fc0 ; }@mixin header-text { font-size : 20px ; }@mixin sexy-border($color , $width ) { border : { color: $color ; width : $width ; style : dashed; } } p { @include sexy-border(blue, 1in ); }p { border-color : blue; border-width : 1in ; border-style : dashed; } @mixin sexy-border($color , $width : 1in ) { border : { color: $color ; width : $width ; style : dashed; } } p { @include sexy-border(blue); }h1 { @include sexy-border(blue, 2in ); }p { border-color : blue; border-width : 1in ; border-style : dashed; } h1 { border-color : blue; border-width : 2in ; border-style : dashed; } p { @include sexy-border($color : blue); }h1 { @include sexy-border($color : blue, $width : 2in ); }@mixin box-shadow($shadows ...) { -moz-box-shadow : $shadows ; -webkit-box-shadow : $shadows ; box-shadow : $shadows ; } .shadows { @include box-shadow(0px 4px 5px #666 , 2px 6px 10px #999 ); } .shadowed { -moz-box-shadow : 0px 4px 5px #666 , 2px 6px 10px #999 ; -webkit-box-shadow : 0px 4px 5px #666 , 2px 6px 10px #999 ; box-shadow : 0px 4px 5px #666 , 2px 6px 10px #999 ; } @mixin colors($text , $background , $border ) { color : $text ; background-color : $background ; border-color : $border ; } $values : #ff0000 , #00ff00 , #0000ff ;.primary { @include colors($values ...); } .primary { color : #ff0000 ; background-color : #00ff00 ; border-color : #0000ff ; } @mixin wrapped-stylish-mixin($args ...) { font-weight : bold; @include stylish-mixin($args ...); } .stylish { @include wrapped-stylish-mixin(#00ff00 , $width : 100px ); } 在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content 标志的地方 @mixin apply-to-ie6-only { * html { @content ; } } @include apply-to-ie6-only { #logo { background-image : url(/logo.gif); } } * html #logo { background-image : url(/logo.gif); } =apply-to-ie6-only * html @content +apply-to-ie6-only #logo background-image: url(/logo.gif)
函数指令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $grid-width : 40px ;$gutter-width : 10px ;@function grid-width($n ) { @return $n * $grid-width + ($n - 1 ) * $gutter-width ; } #sidebar { width : grid-width(5 ); }#sidebar { width : 240px ; } #sidebar { width : grid-width($n : 5 ); }
输出格式 Sass默认的CSS输出格式很美观也能清晰反映文档结构,为满足其他需求Sass也提供了多种输出格式。
Sass提供了四种输出格式,可以通过:style option选项设定,或者在命令行中使用–style选项
:nested、:expanded、:compact、:compressed
拓展 Sass 自定义 Sass 函数 存储缓存 自定义导入