SCSS (SASS, CSS) learning

Read this article http://www.frostsky.com/2014/07/sass-scss/writing is still relatively clear

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.

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.

The difference between sass and SCSS is as follows:

Sass has two grammatical rules (syntaxes), and now the new syntax rules (starting with Sass 3) are called "SCSS" (Fashionable css (sassy CSS)), which is an extension of the CSS3 syntax,
That is, every syntactically correct CSS3 file is also a valid scss file, scss file uses. scss as an extension. The second syntax does not become indented (or Sass), and it is inspired by the concise refinement of Haml, which is created for people to write CSS in a way that is similar to CSS, but in a more streamlined manner. It does not have parentheses, semicolons, and it uses line indentation to specify the CSS block, although sass is not the most primitive syntax, but the indentation syntax will continue to be supported, in the indented syntax of the file with. Sass as the extension name.

Here are some examples:

——————————— Use variables in scss ——————————— $blue: #3bbfce; $margin: 16px;. Content-Navigation {border-9%22; border -color: $blue;} Convert to CSS as follows:/**/. Content-Navigation {border-color : #3bbfce; color: #2b9eab;}. Border {padding:8px;margin:8px;border-color: #3bbfce;}

——————————————-

Scss nesting:

——————————————-

0 ; td.ln {text-1. 2em;}} Convert to CSS as follows:/**/0;} Table.hl td.ln {text-align:right;} Li {font-family:serif;font-weight:bold;font1. 2em;}

Sass files are ordinary text files, which can be directly used in CSS syntax. The file suffix name is. scss, meaning sassy CSS.

The following command allows you to display the CSS code for the. scss file conversion on the screen. (Assume that the file name is test.) ）

Sass Test.scss

If you want to save the displayed results as a file, followed by a. css file name.

Sass Test.scss Test.css

Sass offers four compile-style options:

* Nested: Nested indentation of the CSS code, which is the default value.

* Expanded: No indented, extended CSS code.

* Compact: A concise form of CSS code.

* Compressed: Compressed CSS code.

In a production environment, the last option is generally used.

Sass–style Compressed Test.sass test.css

You can also let sass listen to a file or directory, and once the source file changes, the compiled version is automatically generated.

Watch a file

Sass–watch Input.scss:output.css

Watch a Directory

Sass–watch app/sass:public/stylesheets

Basic usage

3.1 Variables

SASS allows the use of variables, with all variables starting with $. $blue: #1875e7;d IV {color: $blue;} If a variable needs to be embedded in a string, it must be written in #{}. $side: Left;. Rounded {border-#{$side}-radius:5px;}

3.2 Calculation function

SASS allows you to use a calculation in your code: body {margin: (14px/2+ 100px;right: $var) ;}

3.3 Nesting

sass allow selectors to be nested. For example, the following CSS code: div h1 {color:red;} Can be written as: div {hi {color:red;}} Attributes can also be nested, such as the border-color property, which can be written as: p {border: {color:red;}} Note that a colon must be appended to the border. 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;}}

3.4 Notes

/** */ / comment, reserved only in Sass source file, is omitted after compilation.   Add an exclamation point to/* to indicate 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. /*! Important Notes! */

Iv. Reuse of code

4.1 Inheritance

SASS allows a selector to inherit from another selector. For example, existing CLASS1:.CLASS1 {border:1px solid #ddd;} Class2 to inherit Class1, use the @extend command:. class2 {@extend. Class1;font-size:

4.2 Mixin

Mixin is a bit like the C-language macro, which is a code block that can be reused. Use the @mixin command to define a block of code. @mixin Left {float: Left;margin-left:10px;} Use the @include command to invoke this mixin. div {@include left;} The power of mixin is that you can specify parameters and default values. @mixin Left ($value: 10px) {float: Left;margin-Right: $value;} When used, add parameters as needed: div {@include left (20px);} The following is an example of a mixin that is used to generate a browser prefix. @mixin rounded ($vert, $horz, $radius: 10px) {border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;} When used, it can be called as follows: #navbar li {@include rounded (top, left);} #footer {@include rounded (top, left, 5px);}

4.3 Color functions

Ten // #d6d65c Ten // #a3a329 // #808080 // #33c

4.4 Inserting files

@import command to insert an external file. @import "Path/filename.scss"; If you insert a. css file, it is equivalent to the import command of the CSS. @import "Foo.css";

V. Advanced usage

5.1 article statements

1 1 2  53 {background-color: # $;} @else { Background-color: #fff;}

5.2 Loop Statements

 from 1 Ten {. Border-60  {. Item-#{$i} {width:2em *2 in a   , B, C, D {. #{$member} {background-image:url ("/image/#{$member}.jpg"   );}}

5.3 Custom Functions

Double2double(5px);}

SCSS (SASS, CSS) learning