SASS - variable

Copyright Notice: Copyright, without permission prohibited reproduced! https://blog.csdn.net/weixin_43031412/article/details/91361383

---

• SASS - Introduction
• SASS - environment to build
• SASS - use program Sass
• SASS - Syntax
• SASS - variable
• SASS- local file (Partial)
• SASS - Mixed (Mixin)
• SASS - @extend (inherited) Directive
• SASS - Operators
• SASS - Functions
• SASS - Output format

---

Variables can make the entire site to maintain consistency. You can define a variable and then refer to it in other places, without having to repeat the same value. To change these values, simply modify it in a place defined variables.

Sass code contains the following two variables: $primary-color,$secondary-color

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

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

Variables like container stored value. In this example, we will value orange, gold stored in a variable.

Every time you need to use the orange color, you can use the variable name instead of orange color. If you need to change a color, just modify it in a place defined variables.

Variable definitions

• Variable with a dollar sign ($) at the beginning, followed by the variable name.
• With a colon (:) to separate between variable names and assignments.

Note: indentation syntax, SCSS syntax, variable definitions are the same.

Hyphens, and underscores

Variable names hyphens, and underscores equivalent, $primary_colorand $primary-coloris the same variable.

The following code works correctly:

$primary_color: orange;
$secondary_color: gold;

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

Local variables

Variable selector local variable is defined, that the scope selector

Example:

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

Local variables can not be used outside of the selector, the following is wrong:

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

If you compile this code, you will get an error: error: Undefined variable: "$header-color".

! Global symbol definition of global variables

You may be used in the selector !globalflag define global variables.

Example:

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

$header-colorUse a global variable flag is defined as a global variable, you can use the external variable. This code is compiled into the following CSS:

header {
    color: orange; }

article {
    color: orange; }

variable

In addition to variable values ​​earlier example color, css may be any value, such as font family, font weight, border width, background images, etc.

Example types of multiple values:

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

The above code is compiled output of 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 */

Defaults

Variables can set the default value. It will use the default value when a variable is not assigned.

Use the default !defaultflag is set.

Example:

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

body {
  color: $primary-color;
}

Compiled CSS output as follows:

body {
  color: orange; }

This embodiment does not use the default value, because the variable has an assignment: $primary-color: orange;.

If you remove the assignment, it uses the default value. As follows:

$primary-color: gold !default;

body {
  color: $primary-color;
}

CSS compiled as follows:

body {
  color: gold; }

Variable data types

SASS There are seven main types of data:

• Numbers (e.g. 15, 3.5, 50px)
• Strings may be with or without quotation marks (eg "foo", 'foo', foo)
• Colors (e.g. orange, #ffcc00, rgba(105, 255, 0, 0.7))
• Booleans (e.g. true, false)
• Nulls (e.g. null)
• Lists spaces or commas (eg 2.5px 10px 0 7px, Helvetica, Arial, sans-serif)
• Maps (e.g. (key1: value1, key2: value2))