Sass 使用文档

bestadc

已于 2023-12-08 20:02:19 修改

阅读量390

点赞数

分类专栏： css 文章标签： sass css 前端

于 2022-08-01 23:10:08 首次发布

本文链接：https://blog.csdn.net/bestadc/article/details/126112047

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Sass 使用文档

只记录些经常用的，后续用到的会补充上，全文请查看官方文档

基本规则

一般嵌套

内层的样式将它外层的选择器作为父选择器

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

& 作为选择器的第一个字符时，其后可以跟随后缀生成复合的选择器。

#main {
  color: black;
  &-sidebar {
    border: 1px solid;
  }
}

编译为

#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

属性嵌套

属性嵌套在命名空间中

命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

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

注释 `/* */` 与 `//`

/* */ 可以使用插值语句且会被完整输出到编译后的 CSS 文件中， // 则不会。

将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。

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

// These comments are only one line long each.

编译为

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

SassScript

变量 `$`

变量支持全局变量和局部变量（块级作用域），将局部变量转换为全局变量可以添加 !global 声明（最好别这么干，找个变量找死人！）：

#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)

运算符

数字运算

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

p {
  width: 1in + 8pt;
  height: (500px/2);
  color: #010203 + #040506;
  background-color: #010203 * 2;
  font-family: sans- + "serif";
}

编译为

/* 值转换了 */
p {
  width: 1.111in;
  height: 250px;
  color: #050709;
  background-color: #020406;
  font-family: sans-serif;
}

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

函数

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用

p {
  color: hsl(0, 100%, 50%);
}

编译为

p {
  color: #ff0000;
}

插值语句 `#{}`

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

  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p.foo {
  border-color: blue;
  font: 12px/30px;
}

变量默认值 `!default`

在变量的结尾添加 !default

如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

/* 变量是 null 空值时将视为未被 !default 赋值 */
$content: null;
$content: "Non-null content" !default;

$new_content: "First content";
$new_content: "Second content?" !default;
#main {
  content: $content;
  new-content: $new_content;
}

编译为

#main {
  content: "Non-null content";
  new-content: "First content";
}

@-Rules 与指令

@import

导入 SCSS 或 Sass 文件，允许同时导入多个文件。

@import "foo.scss";

@import "rounded-corners", "text-shadow";

@use

将另一个 Sass 文件作为模块

base.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

styles.scss

@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

编译为

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

@media

与 CSS 中用法一样，只是增加了一点额外的功能，比如嵌套。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

@extend

这个很他妈复杂，去官网看吧。

和 mixin 类似，但编译方式有所不同。对于扩展，sass 不会多次复制相同的声明，而是把选择器组合在一起，这样它们就会包含同样的规则。

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

@at-root

在文档的根部发出一个或多个规则

.parent {
  @at-root .child {
  }
}

编译为

.parent {
}
.child {
}

控制指令

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}

编译为

p {
  border: 1px solid;
}

@else if

$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> 的值。

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

编译为

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

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名

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

@while

@while 指令重复输出格式直到表达式返回结果为 false。

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

混合指令

定义混合指令 @mixin 和引用混合样式 @include

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

函数指令

支持自定义函数

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar {
  width: grid-width(5);
}