#main p { color: #00ff00; .redbox { color: #000000; } }
个人基本没怎么用过。
.funky { font: { family: fantasy; size: 30em; weight: bold; } }
&
a { font-weight: bold; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } &-sidebar { border: 1px solid; } }
%
与常用的 id 与 class 选择器写法相似,只是 # 或 . 替换成了 %。当占位符选择器单独使用时(未通过 @extend 调用),不会编译到 CSS 文件中。
/* */
,编译后保留;//
,编译后去除。$
$width: 5em; // 全局 $width: 6rem !default; // 设置默认值 #main { $width: 5em; // 局部 width: $width; } #main { $width: 5em !global; // 全局 width: $width; }
1, 2, 13, 10px
;"foo", 'bar', baz
;blue, #04a3f9, rgba(255,0,0,0.5)
;true, false
;null
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
;
1px 2px, 5px 6px
,(1px 2px) (5px 6px)
(key1: value1, key2: value2)
+, -, *, /, %
;<, >, <=, >=
;==, !=
。#{}
通过 #{} 插值语句可以在选择器或属性名中使用变量。
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }
@rule
@import
// 多文件导入,默认拓展名.scss .sass @import 'rounded-corners', 'text-shadow'; // 使用插值语法 $family: unquote('Droid+Sans'); @import url('http://fonts.googleapis.com/css?family=\#{$family}');
如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。
例如,将文件命名为 _colors.scss
,便不会编译 _colours.css
文件。
@import 'colors';
@import
// example 文件 .example { color: red; } #main { @import 'example'; // 等价下面 .example { color: red; } }
@extend
.error { border: 1px #f00; } a:hover { text-decoration: underline; } .seriousError { @extend .error; @extend a:hover; border-width: 3px; }
@if @else if @else
p { @if 1 + 1 == 2 { border: 1px solid; } @else if { border: 2px dotted; } @else { color: black; } }
@for
@while
@for $var from <start> through <end>
,包含<end>
;@for $var from <start> to <end>
,不包含<end>
。@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
@each
$var in <list>
。@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } // 类似 js 解构语法 每一项结构为 $animal, $color, $cursor @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; } }
@mixin
@include
// 定义 @mixin large-text { color: #ff0000; } // 引用 .page-title { @include large-text; padding: 4px; margin-top: 10px; } // 携带参数,并可以设置默认值 @mixin sexy-border($color, $width: 3rem) { border: { color: $color; width: $width; style: dashed; } } p { // 顺序参数 @include sexy-border(blue, 1in); // 指定参数 @include sexy-border($color: blue); } // 解构与打包,类似 js,只不过...后置 @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); } @mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); }