SASS Study notes--Variables and variable scope history legacy issues

Sass has two suffix file names:

A suffix named sass, you cannot use curly braces and semicolons when writing selectors

A suffix named scss, using curly braces and semicolons

The suffix name is sass syntax and cannot appear with curly braces and semicolons $highlight-color: #abcdef. Selected border:1px $highlight-color solid//suffix SCSS syntax, as with CSS, Curly braces and semicolons are required $highlight-color: #abcdef;. selected{border:1px solid $highlight-color;}

An important feature of Sass is that it introduces variables to CSS. You can define reusable CSS property values as variables, and then reference them by variable names without having to write the property value repeatedly. Or, for a property value that has been used only once, you can give it an easy-to-understand variable name, giving a glimpse of the purpose of this property value

Sass uses "$" to identify variables, such as: $highlight-color, $width

Variable declaration

1. Common variables

The declaration of the SASS variable is much like the declaration of a CSS property, followed by the variable name, separated by a colon between the variable name and the value.

$highlight-color: #abcdef;

This means that the value of the variable $highlight-color is now #abcdef, and the variable is not in effect until you reference the variable

. selected{border:1px solid $highlight-color;}

2. Default variables

If the value is appended with "!default", the default value

No "!default"

scss$color:red; $color: blue;p{color: $color;} CSS compilation p {color:blue;}

With "!default"

scss$color:red; $color: Blue!default;p{color: $color;} CSS compilation p {color:red;}

Sass compiled CSS is from top to bottom, the latter will overwrite the previous, so the first paragraph without!default parsing is blue, and the second code because of the!default, breaking this rule, using the previously defined red

scss$baselineheight:2px; This is written in a variable with!default, there is no meaning $baselineheight:1.5px!default;. box{line-height: $baseLineHeight;} CSS compilation. box {line-height:2px;}

3, #{} make everything into a string

In general, the variables we define are attribute values that can be used directly, but must be used as #{$variables} If the variable is a property, selector, or in some special case.

Scss$borderdirection:top!default; $baseFontSize: 12px!default; $baseLineHeight: 1.5!default;// Applies to class and attributes. border-#{$borderDirection} {border-#{$borderDirection}:1px solid #ddd;} Applied to complex attribute values body{font:#{$baseFontSize}/#{$baseLineHeight};} CSS compilation. border-top {border-top:1px solid #ddd;} body {font:12px/1.5;}

Scss@mixin Firefox-message ($selector) {Body.firefox #{$selector}:before {content: "Hi, Firefox users!"; }} @include Firefox-message (". Header");//css compile body.firefox. header:before {content: "Hi, Firefox users!";}

What if it's not okay? Try it:

scssbody{font: $baseFontSize/$baseLineHeight;} CSS compiler body {font:8px;}

The font is 8px, because the border-top, if not added #{}, cannot be compiled.

4. Multi-valued variables

Multi-valued variables are categorized as list type and map type, simply speaking, the list type is a bit like the array in JS, and the map type is a bit like the object in JS.

(1), List

The list data can be separated by spaces, commas, or parentheses, using nth ($var, $index) values. There are many other functions for list data operations such as length ($list), join ($list 1, $list 2,[$separator]), append ($list, $value, [$separator]), etc.

One-dimensional data $px:5px 10px 20px 30px;//Two-dimensional data, equivalent to JS in the two-dimensional array $px:5px 10px, 20px 30px, $px: (5px 10px) (20px 30px);

Scss$linkcolor: #f00 #eee!default;//The first value is the default value, the second value is the mouse over the value a{color:nth ($linkColor, 1);  &:hover{Color:nth ($linkColor, 2);  }}//CSS compilation A {color: #f00;} a:hover {color: #eee;}

(2), map

The map data appears in pairs of key and value, where value can be a list. The format is: $map: (key1:value1, Key2:value2, Key3:value3);. Values can be obtained by Map-get ($map, $key). There are many other functions for map data such as Map-merge ($map 1, $map 2), Map-keys ($map), Map-values ($MAP), etc.

Scss$headings: (H1:2em, H2:1.5em, h3:1em); @each $header, $size in $headings {#{$header} {font-size: $size;}} CSS compilation h1 {font-size:2em;} h2 {font-size:1.5em;} h3 {font-size:1em;}

In the above code, the attributes of the map data are treated as $header, and the attribute values are considered as $size for traversal (as the JS object to understand, so called attributes and attribute values, which is not necessarily true)

Variable operation

You can use the ' plus ' or ' minus ' operators to operate on variables of the same type, and if we want to manually slightly deepen a color value, we can subtract #101 by '-', and we can also increase the font value by 10px by ' + '.

scss$red: #f00; $fontSize: 12px;.  bar{color: $red + #101; Font-size: $fontSize +10px;}  CSS compilation. Bar {color: #ff0011; font-size:22px; }

Global variables and local variables

First of all: The current Sass version is 3.4.22, which is different from the previous version 3.3, about global variables. Follow the original document learning, in the compilation of the time there is a difference, troubled me for a long time, to some of the Exchange group asked also by people Wangzhi ridicule, finally very fortunate to get desert teacher guidance, point out the differences and share the newer documents, here again thanks to the desert Teacher!!!

Desert Teacher article: http://www.w3cplus.com/preprocessor/understanding-variable-scope-in-sass.html

In most of the current documents there is a phrase "sass no local variables ", and this example can be seen everywhere

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/8A/04/wKiom1gj7JugPDUrAAAbFnVvXBo721.png "title=" Qq20161110114125.png "alt=" Wkiom1gj7jugpduraaabfnvvxbo721.png "/>

You might want to recompile the SASS code, and we get the result:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/8A/00/wKioL1gj7Tzjhdu1AACRPbH2rL8946.png "title=" Qq20161110114446.png "alt=" Wkiol1gj7tzjhdu1aacrpbh2rl8946.png "/>

So, if you're a sass beginner like me, skip the old documents you see. Introduction to Variable Scope

Sass variable scope supports two types of variables: global variables and local variables

Global Variables : By default, all variables defined outside any selector are considered global variables. This means that they can be accessed anywhere in the style sheet

$BG-color:green;

Local Variables : Variables defined within selectors are called local variables

The first example is to first define a mixer and add a $btn-bg-color variable inside it, which is a local variable that is visible only within mixin

@mixin Button-style {$btn-bg-color:lightblue; Color: $btn-bg-color;}

Next, call this mixin

button {@include button-style;} Execute CSS compilation button {Color:lightblue;}

If it is not a mixin, but a selector to call this local variable, you can imagine, it should not be called

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8A/01/wKioL1gkAY7y3JJSAABi-uJ3XiQ717.png "title=" Qq20161110131126.png "alt=" Wkiol1gkay7y3jjsaabi-uj3xiq717.png "/>

Nested selectors

If we declare a variable inside a selector, it can be accessed in other selectors nested inside it.

scss.wrap {$BG-color:red;    &:after {background:lighten ($bg-color, 10%); }}//css.wrap:after {background: #ff3333;}

Looking at an example, we define a function and then use it in a nested selector.

Scss@function my-function () {$text-color:black; @return $text-color;}. Wrap {color:my-function ();} css.wrap {color:black;}

Let's change it a little bit:

Scss@function my-function () {$text-color:black; @return $text-color;}.    Wrap {color:my-function ();    &:after{background: $text-color; }}

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/8A/05/wKiom1gkB9mhzjomAABczYjNUxw949.png "title=" Qq20161110133821.png "alt=" Wkiom1gkb9mhzjomaabczyjnuxw949.png "/>

The result of the compilation is that the variable $text-color is undefined because it is not defined directly inside the selector, but rather calls the defined function inside the selector.

Global variables and local variables can define the same variable names, and we define three variables with the same variable name, except that they have different values. The first is a global variable, and the other two is a local variable

scss//defines a global variable $text-color:tomato;//defines a mixer @mixin button-style {$text-color:lime; Color: $text-color;}  @mixin Link-style {$text-color:black; Color: $text-color;} Call Mixer button {@include button-style;} a {@include link-style;} Call variable. Wrap {background: $text-color;} Cssbutton {color:lime;} a {color:black;}. wrap {Background:tomato;}

Global logo

"!global" can change the scope of a local variable and go back to the example where we started exploring the sass version.

scssp{$color: Blue!global; Color: $color;//blue}a{color: $color;//should be undefined variable}

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8A/06/wKiom1gkDprxBCSQAABGKqjjT9I459.png "title=" Qq20161110140705.png "alt=" Wkiom1gkdprxbcsqaabgkqjjt9i459.png "/>

Theoretically, $color is a local variable defined in p, and the color in a selector should not be accessible, but we can use the "!global" flag to make $color play a global variable.

Check if a variable exists

SASS provides two functions to test for the existence of a variable. We can use the variable-exists or global-variable-exists function to check whether our local or global variables exist separately

Scss$text-color:tomato; @if (Global_variable_exists (Text-color)) {#mainTitle {color: $text-color; }}//css#maintitle {Color:tomato;}

Friends with a certain base of English can also learn from the following two websites

Http://sass-lang.com/documentation/file.SASS_REFERENCE.html

https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1871447

SASS Study notes--Variables and variable scope history legacy issues