SkyBlog

SASS

SASS 使用教程

这篇文章发布于 2023年12月01日，星期五，01:55，归类于 CSS。阅读 ? 次，0 条评论

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) start 和 end 必须是整数值

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