Application of SASS in HTML5 Mobile Application Development

Application of SASS in HTML5 Mobile Application Development

The Ionic mobile development framework uses sass to generate css, which greatly improves the efficiency and modularization of css writing, making css development no longer a task. By default, css is generated by the ionic framework through SASS. You can also easily write your own sass, expand or overwrite the default css, and generate only one css file! Sass is fully used in our project and css is no longer directly written. Combined with the gulp automation tool, the development efficiency and quality are greatly improved.

CSS is basically a designer tool, not a programmer tool. In the eyes of programmers, CSS is a very troublesome thing. It has no variables and no conditional statements. It is a simple description of a row, which is quite troublesome to write. Naturally, someone starts to add programming elements to CSS, which is called CSS preprocessor ). Its basic idea is to use a special programming language to design webpage styles and then compile them into normal CSS files. Among various CSS preprocessors, LESS and SASS are popular, and individuals prefer SASS.

 

1. What is SASSSASS? It is a CSS development tool that provides many convenient writing methods, greatly saving the designer's time and making CSS development easy and maintainable.
This article summarizes the main usage of SASS.
Ii. install and use 2.1 to install SASS is written in Ruby, but the syntax of the two is irrelevant. If you do not understand Ruby, you can still use it. You only need to install Ruby before installing SASS.
Suppose you have installed Ruby, and then enter the following command in the command line:

　　gem install sass

 

Then, you can use it.

2.2 The SASS file is a common text file, which can directly use CSS syntax. The file suffix is. scss, which means Sassy CSS.
The following command can display the css code converted from the. scss file on the screen. (Assume the file name is test .)
Sass test. scss
If you want to save the display result as a file, then follow the file name of .css.

 

 

　　sass test.scss test.css

SASS provides four compilation style options:
* Nested: nested indent css code, which is the default value.
* Expanded: No indented, extended css code.
* Compact: css code in concise format.
* Compressed: the compressed css code.
In the 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. 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

The SASS official website provides an online converter. You can run the following examples here.
3. Basic Sass usage 3.1 variables SASS allows variables. All variables start with $.

   $blue : #1875e7;　　　div {　　　color : $blue;　　}

　

 

If the variable needs to be embedded in a string, it must be written in.

    $side : left;　　.rounded {　　　　border-#{$side}-radius: 5px;　　}

　

 

 

 

3.2 The computing function SASS allows you to use the formula in the Code:

　　body {　　　　margin: (14px/2);　　　　top: 50px + 100px;　　　　right: $var * 10%;　　}

3.3 nesting SASS allows selector nesting. For example, the following CSS code:

　　div h1 {　　　　color : red;　　}

 

Can be written:

　　div {　　　　hi {　　　　　　color:red;　　　　}　　}

Attributes can also be nested. For example, the border-color attribute can be written as follows:

　　p {　　　　border: {　　　　　　color: red;　　　　}　　}

 

Note: The border must be followed by a colon.
In a nested code block, you can use $ to reference the parent element. For example, a: hover pseudo class can be written:

　　a {　　　　&:hover { color: #ffb3ff; }　　}

3.4 SASS has two annotation styles.
The standard CSS comments/* comment */are retained to the compiled files.
Single line comment // comment, which is only stored in the SASS source file and omitted after compilation.
Add an exclamation point after/* to indicate that this is an important comment. This line of comments will be retained even in Compressed Mode compilation, which can be used to declare copyright information.

/*! Important Notes! */

Iv. code reuse 4.1 inheritance SASS allows one selector and another selector. For example, the existing class1:
. Class1 {
Border: 1px solid # ddd;
}
To Inherit class1, use the @ extend command:
. Class2 {
@ Extend. class1;
Font-size: 120%;
}
4.2 MixinMixin is a bit like a C macro (macro). It is a reusable code block.
Use the @ mixin command to define a code block.

      @mixin left {　　　　float: left;　　　　margin-left: 10px;　　}

　

 

Use the @ include command to call 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;　　}

Add parameters as needed:

　div {　　　　@include left(20px);　　}

　

 

 

The following is a mixin instance 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;　　}

　

 

You can call it as follows:
　　

    #navbar li { @include rounded(top, left); }　　#footer { @include rounded(top, left, 5px); }

4.3 The color function SASS provides some built-in color functions to generate a series of colors.
　　

   lighten(#cc3, 10%) // #d6d65c　　darken(#cc3, 10%) // #a3a329　　grayscale(#cc3) // #808080　　complement(#cc3) // #33c

4.4 insert file @ import command, used to insert external files.

　　@import path/filename.scss;

 

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

　　@import foo.css;

 

 

5. Advanced usage 5.1 The Condition Statement @ if can be used to determine:

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

　

 

 

The @ else command is also supported:

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

　

 

 

 

5.2 loop statement SASS supports for loop:

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

　

 

The while loop is also supported:

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

　

 

The each command is similar to:

@each $member in a, b, c, d {　　　　.#{$member} {　　　　　　background-image: url(/image/#{$member}.jpg);　　　　}　　}

　

 

 

5.3 User-Defined Function SASS allows users to write their own functions.
　

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

 

Use sass with gulp in ionic Project

The reprinting of Jack Ma ends now. Next I will talk about the knowledge of gulp-sass. gulp is a relatively new js Automatic Build tool with the goal of replacing grunt, become the most popular js build tool. The ionic framework integrates the gulp sass plug-in to process sass.

To install sass, you must first install gulp, which is managed by npm of nodejs. Run the following command in the ionic project directory to install the relevant plug-ins.

 

npm install gulpnpm install gulp-sassnpm install gulp-minify-cssnpm install gulp-concatnpm install gulp-rename

 

Ionic uses the above gulp plug-ins. The functions of each plug-in should be named. After installing the plug-in, run the following command:

 

Gulp sassgulp watch # automatically compile the sass file after modification

You can modify./scss/ionic. app. scss. The generated css file is www/css/ionic.app.css.

 

This article introduces so much.

 

Reprinted please note