SASS

1. 样式规则

嵌套规则

sass允许将一套css 样式嵌套进另一套样式中，内层的样式将它外城的选择器作为父选择器

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

这样的好处就上避免了重复输入父选择器，同时也更符合css的嵌套结构，并且更加容易管理

父选择器 &

在嵌套规则中，我们可以使用父选择器 & 来引用父选择器，例如：

a {
    color: red;
    &:hover {
        color: blue;
    }
}

添加后缀

.aaa {
  &-bbb {
    color: red;
  }
  &_ccc {
    color: blue;
  }
}

在sassScript中使用父选择器

如果&表达式在任何样式规则之外使用，则返回null。由于null是假值，这意味着可以轻松使用它来确定mixin是否在样式规则中被调用

@mixin app-background($color) {
  #{if(&, '&.app-background',  '.app-background')} {
    background-color: $color;
    color: white;
  }
}

@include app-background(red);

.sidebar {
  @include app-background(blue);
}

嵌套属性

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

.a {
    font: {
        family: "serif";
        size: 16px;
        weight: bold;
    }
}

编译后

.a {
  font-family: "serif";
  font-size: 16px;
  font-weight: bold;
}

属性声明

.aaa {
    $size: 100px
    width: $size;
    height: $size;
    border-radius: $size * 0.5;
}

插值

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

隐藏声明

有时候只想声明有值的属性，如果声明的值为null或空 则不会被编译到css中

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

占位符选择器

%tool {
  display: flex;
  align-items: center;
  &:hover {
    background-color: #f0f0f0;
  }
}
.aaa {
  @extend %tool;
  color: red;
}

编译后

.aaa {
  display: flex;
  align-items: center;
}
.aaa {
  color: red;
}
.aaa:hover {
  background-color: #f0f0f0;
}

2. AT 规则

@use

@use规则是从其他的sass样式表中加载mixin，函数，和变量并将来自多个样式表css合并在一起。通过@use加载的样式表称为模块。sass还提供内置模块，其中包含很多有用的函数。

@use "sass/aaa";

// 设置命名空间
@use "scss/bbb" as b;

配置

$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

@use "library" with (
  $black: #222,
  $border-radius: 0.1rem
);

使用mixin

$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {
  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}

@mixin configure($black: null, $border-radius: null, $box-shadow: null) {
  @if $black {
    $-black: $black !global;
  }
  @if $border-radius {
    $-border-radius: $border-radius !global;
  }
  @if $box-shadow {
    $-box-shadow: $box-shadow !global;
  }
}

@mixin styles {
  code {
    border-radius: $-border-radius;
    box-shadow: -box-shadow();
  }
}

使用

@use "library";

@include library.configure($black: #222, $border-radius: 0.1rem);

@include library.styles;

配置变量

$color: red;

@use "library";
library.$color: blue;

@use "library";
@debug library.$color; blur

@use 的出现旨在替换@import 指令
它被有意思的设计为不同的方式工作

1. @use仅在当前文件的范围内提供变量、函数和mixin。它永远不会将它们添加到全局范围。这使得很容易确定它的来源
2. @use 仅加载每个文件一次。这确保您不会意外地重复依赖项
3. @use 必须出现在文件的开头，并且不能嵌套在样式规则中
4. 每个@use 规则只能有一个URL
5. @use要求在它的URL 周围使用引号，及时使用缩进语法

@forward

用法与@use 类似

用法就上，将模块中的变量、函数和mixin 转发给其他模块使用， 一般用作聚合入口

// index.scss (入口文件)
@forward "colors";
@forward "buttons";
@forward "typography";

// app.scss
@use "index";

body {
  background: index.$bg-color; // 继承了转发的成员
}

• 不执行代码，只是将成员重新导出，供其他文件通过 @use 访问
• 可以用 show / hide 控制暴露哪些成员
• 支持 as 为被转发的成员加前缀

@mixin 和 @include

@mixin 定义一个可重复使用的样式块，@include 用于在样式规则中使用该mixin

@mixin app-background($color) {
  background-color: $color;
  color: white;
}

.aaa {
  @include app-background(red);
}

接受参数

@mixin app-background($color) {
  background-color: $color;
  color: white;
}

.aaa {
  @include app-background(red);
}

可选参数

@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}

关键字参数

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}

接受任意参数

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

@function @return

@function 定义一个可重复使用的函数，@return 用于返回函数的值

@function square($size) {
  @return $size * $size;
}

.avatar {
  width: square(100px);
}

@extend

@extend 用于继承另一个选择器的样式规则

%tool {
  display: flex;
  align-items: center;
}

.aaa {
  @extend %tool;
  color: red;
}

编译后

.aaa {
  display: flex;
  align-items: center;
}
.aaa {
  color: red;
}

流程控制相关

@if @else @else if

@mixin app-background($color) {
  @if $color == red {
    background-color: $color;
    color: white;
  } @else {
    background-color: white;
    color: $color;
  }
}

.aaa {
  @include app-background(red);
}

@each

@each 用于遍历列表或映射中的每个元素

@each $color in red, green, blue {
  .#{$color}-text {
    color: $color;
  }
}

编译后

.red-text {
  color: red;
}
.green-text {
  color: green;
}
.blue-text {
  color: blue;
}

@for

@for 用于循环执行样式规则，通常用于生成重复的样式规则

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

编译后

.item-1 {
  width: 10px;
}
.item-2 {
  width: 20px;
}
.item-3 {
  width: 30px;
}

@while

@while 用于循环执行样式规则，直到满足某个条件为止

@while $i <= 3 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}

编译后

.item-1 {
  width: 10px;
}
.item-2 {
  width: 20px;
}
.item-3 {
  width: 30px;
}