SASS – 变量

变量可以让整个网站保持一致性。你可以定义一个变量,然后在其他地方引用它,而不必再重复相同的值。要改这些值,只需在定义变量的那一个地方修改。

下面的Sass代码包含两个变量:$primary-color$secondary-color

$primary-color: orange;
$secondary-color: gold;

body {
  color: $primary-color;
  background: $secondary-color;
}

变量就像存储值的容器。在本例中,我们将值orange、gold存储在变量中。

每次需要使用orange颜色时,可以使用变量名来代替orange颜色。如果需要改一个颜色,只需在定义变量的那一个地方修改。

变量定义

  • 变量以美元符号($)开头,后面跟变量名。
  • 变量名和赋值之间用冒号(:)分隔。

注意:缩进语法、SCSS语法中,变量定义都是一样的。

连字符和下划线

变量名中连字符和下划线等效,$primary_color$primary-color是同一个变量。

下面的代码可以正常工作:

$primary_color: orange;
$secondary_color: gold;

body {
    color: $primary-color;
    background: $secondary-color;
}

局部变量

选择器中定义的变量是局部变量,作用范围是该选择器

示例:

header {
    $header-color: orange;
    color: $header-color;
}

不能在选择器外面使用局部变量,下面的做法是错误的:

header {
    $header-color: orange;
    color: $header-color;
}
article {
    color: $header-color;
}

如果编译该代码,会报错: error: Undefined variable: "$header-color"

!global 标志定义全局变量

可以在选择器中使用 !global 标志定义全局变量。

示例:

header {
    $header-color: orange !global;
    color: $header-color;
}
article {
    color: $header-color;
}

$header-color使用了全局变量标志,被定义为全局变量,外部就可以使用该变量。这段代码会编译成以下CSS:

header {
    color: orange; }

article {
    color: orange; }

变量值

变量值除了前面举例的颜色外,可以是任何css值,如字体族、字体权重、边框宽度、背景图像等

多种值类型示例:

$primary-color: orange;
$secondary-color: gold;
$font-stack: 'Open Sans', Helvetica, Sans-Serif;
$border-thick: 10px;
$border-bright: orange;
$border-style: solid;
$article-width: 60%;
$article-padding: 20px;
$article-margin: auto;

body {
    color: $primary-color;
    background: $secondary-color;
    font-family: $font-stack;
}
article {
    border: $border-thick $border-style $border-bright;
    width: $article-width;
    padding: $article-padding;
    margin: $article-margin;
}

上面的代码编译输出的CSS:

body {
  color: orange;
  background: gold;
  font-family: "Open Sans", Helvetica, Sans-Serif; }

article {
  border: 10px solid orange;
  width: 60%;
  padding: 20px;
  margin: auto; }

/*# sourceMappingURL=styles.css.map */

默认值

变量可以设置默认值。当变量没有赋值时会使用默认值。

默认值使用!default标志设置。

示例:

$primary-color: orange;
$primary-color: gold !default;

body {
  color: $primary-color;
}

编译输出的CSS如下:

body {
  color: orange; }

本例中没有使用默认值,因为该变量有赋值:$primary-color: orange;

如果去掉赋值,就会使用默认值。如下所示:

$primary-color: gold !default;

body {
  color: $primary-color;
}

编译后的CSS如下所示:

body {
  color: gold; }

变量数据类型

SASS有七种主要数据类型:

  • Numbers (e.g. 15, 3.5, 50px)
  • Strings 可带可不带引号 (e.g. “foo”, ‘foo’, foo)
  • Colors (e.g. orange, #ffcc00, rgba(105, 255, 0, 0.7))
  • Booleans (e.g. true, false)
  • Nulls (e.g. null)
  • Lists 空格或逗号分隔 (e.g. 2.5px 10px 0 7px, Helvetica, Arial, sans-serif)
  • Maps (e.g. (key1: value1, key2: value2))


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载