Sass BASICS (I), sass Basics

Sass BASICS (I), sass Basics

Css is a combination of some very simple statements. Since simple statements, there are inevitably many repetitive and redundant items, and there is no traditional
Programming Language variables, control statements and other advanced features, so css writing is inefficient, often need to find replacement, a large number of copies to modify or write. Sass is used
Make up for these defects, making development more convenient and convenient for management.
1. Differences between Sass and SCSS.
Different file extensions. Sass uses the ". sass" suffix as the extension, while SCSS uses the ". scss" suffix as the extension.
Syntax writing is different. Sass is written based on strict indented syntax rules, without braces ({}) and semicolons (;).
SCSS syntax writing is similar to CSS syntax writing.
Example: Sass syntax
$ Font-stack: Helvetica, sans-serif // define variables
$ Primary-color: #333 // define the variable

Body
Font: 100% $ font-stack
Color: $ primary-color
Example: SCSS syntax
$ Font-stack: Helvetica, sans-serif;
$ Primary-color: #333;
Body {
Font: 100% $ font-stack;
Color: $ primary-color;
}
Compiled CSS
Body {
Font: 100% Helvetica, sans-serif;
Color: #333;
}

The. CSS file is still used when the page is used.
The styles compiled in Sass can be displayed in different styles.
1. nested output mode nested
Example: nav {
Ul {
Margin: 0;
Padding: 0;
List-style: none;
}
Li {display: inline-block ;}
A {
Display: block;
Padding: 6px 12px;
Text-decoration: none;
}
}
Compiled style: nav ul {
Margin: 0;
Padding: 0;
List-style: none ;}
Nav li {
Display: inline-block ;}
Nav {
Display: block;
Padding: 6px 12px;
Text-decoration: none ;}
2. expanded output mode expanded
Example: nav {
Ul {
Margin: 0;
Padding: 0;
List-style: none;
}
Li {display: inline-block ;}
A {
Display: block;
Padding: 6px 12px;
Text-decoration: none;
}
}
Compiled style:
Nav ul {
Margin: 0;
Padding: 0;
List-style: none;
}
Nav li {
Display: inline-block;
}
Nav {
Display: block;
Padding: 6px 12px;
Text-decoration: none;
}
3. compact
Example: nav {
Ul {
Margin: 0;
Padding: 0;
List-style: none;
}
Li {display: inline-block ;}
A {
Display: block;
Padding: 6px 12px;
Text-decoration: none;
}
}
Compiled style:
Nav ul {margin: 0; padding: 0; list-style: none ;}
Nav li {display: inline-block ;}
Nav a {display: block; padding: 6px 12px; text-decoration: none ;}
4. compressed
Example: nav {
Ul {
Margin: 0;
Padding: 0;
List-style: none;
}
Li {display: inline-block ;}
A {
Display: block;
Padding: 6px 12px;
Text-decoration: none;
}
}
Compiled style:
Nav ul {margin: 0; padding: 0; list-style: none} nav li {display: inline-block} nav a {display: block; padding: 6px 12px;
Text-decoration: none}
Declare variables starting with "$,
$ Width: 300px;
"$": Variable Declaration
Width: variable name
300px variable value
Global variables and local variables
Variables defined outside selector, function, and Mixed Macro... are global variables.
For example:
. Block {
Color: $ color; // call global variables
}
Em {
$ Color: red; // defines local variables
A {
Color: $ color; // call a local variable
}
}
Span {
Color: $ color; // call global variables
}
After compilation:
// CSS
. Block {
Color: orange;
}
Em {
Color: red;
}
Span {
Color: orange;
}

$ Color is a global variable that is defined inside the element. For example, $ color: red is a local variable.
When do I declare variables?
1. This value must have been repeated for at least two times;
2. The value may be updated at least once;
3. All representations of this value are related to variables (not coincidentally ).
Sass Nesting is divided into three types:
Selector nesting
Attribute nesting
Pseudo-class nesting
For example, in css
Nav {
Color: red;
}
Header nav {
Color: green;
}
In sass
Nav {
A {
Color: red;
Header &{
Color: green;
}
Nesting-attribute nesting
Sass provides property nesting, and css has some attributes with the same prefix.
For example, the style used:
. Box {
Border-top: 1px solid red;
Border-bottom: 1px solid green;
}
In Sass, we can write as follows:
. Box {
Border :{
Top: 1px solid red;
Bottom: 1px solid green;
}
}