• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： css 中文手册 -> scss 样式

    变量

    Sass 变量很简单：给以$开头的名称赋值，然后可以引用该名称而不是值本身。但是尽管它们很简单，但它们是 Sass 带来的最有用的工具之一。变量可以减少重复、进行复杂的数学运算、配置库等等。

    变量声明看起来很像属性声明：它是这样写的<variable>:<expression>。与只能在样式规则或规则中声明的属性不同，变量可以在您想要的任何地方声明。要使用变量，只需将其包含在值中。

    scss 语法css 语法
    $base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

    .alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

    CSS有自己的变量，与 Sass 变量完全不同。了解差异！

    • Sass 变量都被 Sass 编译掉了。CSS变量包含在 CSS 输出中。
    • CSS 变量对于不同的元素可以有不同的值，但 Sass 变量一次只有一个值。
    • Sass 变量是命令式的，这意味着如果你使用一个变量然后改变它的值，之前的使用将保持不变。CSS 变量是声明性的，这意味着如果您更改值，它将影响早期使用和后期使用。
    scss 语法css 语法
    $variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

    .rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}
    Sass 变量与所有 Sass 标识符一样，将连字符和下划线视为相同。这意味着$font-size和$font_size都指的是同一个变量。这是 Sass 早期的历史遗留问题，当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配CSS的语法，这两者就等同于使迁移更容易。


    默认值

    通常，当您为变量赋值时，如果该变量已经有一个值，它的旧值将被覆盖。但是如果您正在编写一个 SASS 库，您可能希望允许您的用户在使用它们生成CSS之前配置您的库的变量。为了使这成为可能，Sass 提供了!default标志。仅当该变量未定义或其值为null。否则，将使用现有值。

    scss 语法css 语法
    // _library.scss
$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;
}

    // style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

    .code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}


    内置变量

    不能修改由内置模块定义的变量。

    @use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;


    范围

    在样式表顶层声明的变量是全局的。这意味着在声明它们之后，可以在其模块中的任何地方访问它们。但并非所有变量都是如此。在块中声明的那些（ SCSS中的花括号或 Sass 中的缩进代码）通常是局部变量，并且只能在它们声明的块中访问。

    scss 语法css 语法
    $global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable;
}

    .content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

    .code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}


    局部变量甚至可以声明为与同名全局变量一样的名称。如果发生这种情况，实际上有两个不同的变量同名：一个是本地的，一个是全局的。这有助于确保编写局部变量与全局变量不冲突。

    scss 语法css 语法
    $variable: global value;

.content {
  $variable: local value;
  value: $variable;
}

.sidebar {
  value: $variable;
}

    .content {
  value: local value;
}

.sidebar {
  value: global value;
}

    如果您需要在本地范围内（例如在 mixin 中）设置全局变量的值，则可以使用该!global标志。标记声明为!global的变量，将始终分配给全局范围。

    scss 语法css 语法
    $variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

    .content {
  value: second global value;
}

.sidebar {
  value: second global value;
}
    该!global标志只能用于设置已在文件顶层声明的变量。它不能用于声明新变量。

    流控制范围

    流控制规则中声明的变量，具有特殊的作用域规则：它们不会影响与流控制规则处于同一级别的变量。相反，他们只是分配给这些变量。这使得有条件地为变量赋值或构建一个值作为循环的一部分变得更加容易。

    scss 语法css 语法
    $dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

    .button {
  background-color: #750c30;
  border: 1px solid #f5ebfc;
  border-radius: 3px;
}
    ⚠️注意！
    流控制范围内的变量可以分配给外部范围内的现有变量，但它们不能在那里声明新变量。确保变量在分配之前已经声明，即使您需要将其声明为 null。


    高级变量函数

    Sass 核心库提供了一些用于处理变量的高级函数。该meta.variable-exists()函数返回具有给定名称的变量是否存在于当前范围内，并且该meta.variable-exists()函数执行相同的操作，但仅针对全局范围。

    用户偶尔希望使用插值来定义基于另一个变量的变量名称。Sass 不允许这样做，因为它让人很难一眼看出哪些变量是在哪里定义的。但是，您可以做的是定义从名称到值的映射，然后您可以使用变量访问该映射。

    scss 语法css 语法
    @use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

    .alert {
  background-color: #ffc107;
}

    上篇：占位符选择器

    下篇：插值