Application of SASS in mobile application development of HTML5

The Ionic Mobile development framework uses SASS to generate CSS, greatly improving the efficiency and modularity of CSS, making CSS development no longer a chore. Ionic framework default CSS is generated through SASS, the same you can easily write your own sass, extend or overwrite the default CSS, and ultimately only create a CSS file! Our project has completely used sass, no longer directly write CSS. Combined with Gulp automation tools, the development efficiency and quality are greatly improved.

CSS is basically a designer's tool, not a programmer's tool. In the programmer's eyes, CSS is a very troublesome thing. It has no variables, there are no conditional statements, just a line of simple description, it is rather cumbersome to write. Naturally, someone started adding programming elements to the CSS, which is called the "CSS Preprocessor" (CSS preprocessor). Its basic idea is to use a special programming language, Web page style design, and then compiled into a normal CSS file. Among the various "CSS preprocessor", the more popular is less and sass, individuals prefer sass.

The following SASS usage section references Nanyi http://www.ruanyifeng.com/blog/2012/06/sass.html

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:

</pre><pre name= "code" class= "HTML" > 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 you to use a calculation in your 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 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: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); }

　

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 function Sass provides some built-in color functions to generate series colors.
　　

   Lighten (#cc3, 10%)//#d6d65c Darken (#cc3, 10%)//#a3a329 grayscale (#cc3)//#808080 complement (#cc3)//#33c

4.4 Insert File @import command to insert an external file.

@import "Path/filename.scss";

If you insert a. css file, it is equivalent to the import command for the CSS.

@import "Foo.css";

V. Advanced Usage 5.1 Article statement @if can be used to judge:

   p {@if 1 + 1 = = 2 {border:1px solid;}　　@if 5 < 3 {border:2px dotted;} }

　

The @else command is also available:

    @if lightness ($color) > 30% {background-color: #000;　　} @else {background-color: #fff; }

　

5.2 Loop Statement Sass support for Loop:

   @for $i from 1 to ten {. border-#{$i} {border: #{$i}px solid blue; }　　}

　

also supports the while loop:

$i: 6;　　　　@while $i > 0 {. item-#{$i} {width:2em * $i;}　　$i: $i-2; }

　

Each command, which acts like for:

@each $member in A, B, C, D {. #{$member} {background-image:url ("/image/#{$member}.jpg"); }　　}

　

5.3 The Custom function sass allows the user to write their own functions.
　

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

Using SASS with Gulp in the Ionic project

Nanda reprint to this end, below I talk about Gulp-sass knowledge, Gulp is a relatively new JS automatic building tool, the goal is to replace Grunt, become the most popular JS building tools. The Ionic framework integrates Gulp SASS plug-in processing sass.

Installing the sass requires the installation of Gulp, which is managed by Nodejs NPM. Run the following command under the Ionic project directory to install the relevant plugin

NPM Install gulpnpm Install gulp-sassnpm install gulp-minify-cssnpm install GULP-CONCATNPM install Gulp-rename

Ionic with the above Gulp plug-ins, the function of the plug-in to see the name should be able to come out, after installing the plug-in, run the following command

Gulp Sassgulp Watch #sass files are automatically compiled after modification

The following can modify the./scss/ionic.app.scss, and the resulting CSS file is www/css/ionic.app.css.

This is so much to say.

Reprint please indicate turn from Offbye Sound still-all-end technology blog