What is SCSS?

SCSS is Sass's new syntax, is a shorthand for sassy CSS, is a superset of CSS3 syntax, meaning that all valid CSS3 styles are equally suitable for sass.

Sass is an extension of CSS3, adding rules nesting, variables, blending, selector inheritance, and more. Convert it to standard, well-formed CSS code by using the command line tool or the Web framework plugin.

1 For example:2 3 ———————————4 5 using variables in Scss6 7 ———————————8 9 $blue: #3bbfce;Ten  One $margin: 16px; A  -. content-Navigation { -  theborder-color: $blue; -  - Color: -  +Darken ($blue,9%); -  + } A  at . Border { -  -padding: $margin/2; -  -Margin: $margin/2; -  inborder-color: $blue; -  to } +  - convert to CSS as follows: the  * /*CSS*/ $ Panax Notoginseng. content-Navigation { -  theborder-color: #3bbfce; +  A color: #2b9eab; the  + } -  $ . Border { $  - padding:8px; -  the margin:8px; - Wuyiborder-color: #3bbfce; the  -}

Nesting

TABLE.HL {

Margin:2em 0;

TD.LN {

Text-align:right;

}

}

Li {

Font: {

Family:serif;

Weight:bold;

Size:1.2em;

}

}

Convert to CSS as follows:

/* CSS */

TABLE.HL {

Margin:2em 0;

}

Table.hl Td.ln {

Text-align:right;

}

Li {

Font-family:serif;

Font-weight:bold;

Font-size:1.2em;

}

1 Basic Usage2 3 variables4 5 SASS allows the use of variables, with all variables starting with $. 6 7 $blue: #1875e7;8 9 Div {Ten color: $blue; One     } A  - if a variable needs to be embedded in a string, it must be written in #{}.  -  the $side: Left; -  - . Rounded { -border-#{$side}-radius:5px; +     } -  + calculation function A  at SASS allows you to use a calculation in your code: -  - Body { -Margin: (14px/2); -top:50px +100px; -Right: $var*Ten%; in     } -  to Nesting +  - sass allow selectors to be nested. For example, the following CSS code: the  * Div H1 { $ color:red;Panax Notoginseng     } -  the can be written as: +  A Div { the Hi { + color:red; -     } $     } $  -Attributes can also be nested, such as border-the Color property can be written as: -  the p { - border: {Wuyi color:red; the     } -     } Wu  - Note that a colon must be appended to the border.  About  $ within a nested code block, you can use $ to reference the parent element. For example, A:hover pseudo-class, can be written as: -  - a { -&: hover {color: #ffb3ff;} A     } +  the Notes -  $ Sass A total of two annotation styles.  the  theStandard CSS Annotations/*Comment*/, it is persisted to the compiled file.  the  theSingle-line Comment//comment, left only in the Sass source file, is omitted after compilation.  -  inIn/*followed by an exclamation point indicating that this is an important note. This line of comments is retained even in compression mode compilation, and can often be used to declare copyright information.  the  the     /*! About Important Notes!  the     */

Custom functions

@function Double ($n) {@return $n* *;} #sidebar {width:double (5px);}

What is SCSS?