Application method of SASS in HTML5 mobile application development

First, what is sass sass is a kind of CSS development tool, provides many convenient writing, greatly saves the designer time, makes the CSS development, becomes simple and maintainable.
This paper summarizes the main usage of sass.
II. Installation and use 2.1 installation sass is written in Ruby, but the syntax of the two is not related. If you don't know Ruby, you'll still use it. Just have to install Ruby before installing sass.
Assuming you have Ruby installed, enter the following command at the command line:
Gem Install Sass

Then, you can use it.

2.2 Using the Sass file is a normal text file, 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
Sass's official website provides an on-line converter. You can go there and try running the various examples below.
Three, SASS basic Usage 3.1 variable sass allows variables to be used, all variables start with $.
$blue: #1875e7;　　div {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 the use of a calculation in code: body {margin: (14PX/2);　　　　top:50px + 100px;　　Right: $var * 10%; }
3.3 Nested 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 Note Sass A total of two annotation styles.
The standard CSS Comment/* Comment * * will persist to the compiled file.
Single-line comments//comment, reserved only in Sass source files, are omitted after compilation.
Add an exclamation point to/* to indicate that this is an important comment. 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:120%;
}
4.2 Mixinmixin is somewhat like a 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); }

Sass Application in HTML5 Mobile application development