SkyBlog

SASS

SASS 使用教程

CSS 功能拓展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器

p {
  color: #00ff00;
  .redbox {
    color: #000000;
  }
}

p {
  color: #00ff00;
}
p .redbox {
  color: #000000;
}

父选择器 &

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递。& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器

#main {
  color: black;
  &-sidebar {
    border: 1px solid;
  }
  a {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}

#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}

属性嵌套

有些 CSS 属性遵循相同的命名空间,比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中。命名空间也可以包含自己的属性值

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold;
}

占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器:占位符选择器。与常用的 id 与 class 选择器写法相似,只是 #. 替换成了 %。当它们单独使用时,不会被编译到 CSS 文件中,必须通过延伸指令 @extend 调用

#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;
}

注释 /* *///

Sass 中有单行注释 // 和多行注释 /* */ 两种,和 JavaScript 的注释方式一样,但是编译之后单行注释不会保留,多行注释在压缩编译的时候,也不会被保留。我们可以对多行注释使用强制注释 /*! */ ,表示在压缩输出模式下保留这条注释并输出到 CSS 文件中,通常用于添加版权信息。插值语句 #{} 也可写进多行注释中输出变量值

$version: '1.2.3';
/* This CSS is generated by My Snazzy Framework version #{$version}. */

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

SassScript

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。通过 #{}SassScript 甚至可以生成选择器或属性名,这一点对编写 @mixin 有很大帮助

变量 $

SassScript 最普遍的用法就是变量,变量以美元符号 $ 开头,赋值方法与 CSS 属性的写法一样。变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明。

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

数据类型

SassScript 支持 6 种主要的数据类型:

  • 数字,1, 2, 13, 10px
  • 字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
  • 颜色,blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型,true, false
  • 空值,null
  • 数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)

运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值

函数

SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用。Sass 函数允许使用关键词参数 ,关键词参数可以打乱顺序使用,如果使用默认值也可以省缺,另外,参数名被视为变量名。

p {
  color: hsl(0, 100%, 50%);
}
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

p {
  color: #ff0000;
}

Sass 支持自定义函数。与 @mixin相同,也可以传递若干个变量给函数作为参数。一个函数可以含有多条语句,需要调用 @return 输出结果

$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;
}

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

p.foo {
  border-color: blue;
}

@-Rules 与指令

@import

Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 @mixin 都可以在导入的文件中使用。允许同时导入多个文件。导入文件也可以使用 #{} 插值语句,但不是通过变量动态导入 Sass 文件,只能作用于 CSS 的 url() 导入方式

@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');

@extend

@extend 的作用是将重复使用的样式延伸给需要包含这个样式的特殊样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error,
.seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

控制指令

@if

@if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码。@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明

$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

这个指令包含两种格式:@for $var from <start> through <end>,或者 @for $var from <start> to <end> > through:[start, end] > to:[start, end) startend 必须是整数值

@for $i from 1 through 2 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名,而 <list> 是一连串的值,也就是数组列表

@each $animal in puma, sea-slug {
  .#{$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');
}
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer) {
  .#{$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;
}
@each $header, $size in (h1: 2em, h2: 1.5em) {
  #{$header} {
    font-size: $size;
  }
}

h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环,只是很少会用到

$i: 4;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

混合指令

混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式

定义混合指令 @mixin

混合指令的用法是在 @mixin 后添加名称与样式,混合也可以包含选择器和属性,甚至可以用 & 引用父选择器

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用混合样式 @include

使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选)

.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 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;
}

有时,不能确定混合指令需要使用多少个参数,比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时,可以使用参数变量 声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理

@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;
}