Introduction to sass basic syntax and sass basic syntax

Introduction to sass basic syntax and sass basic syntax

Note: It is mainly used for record

Preface:

Sass is a type of css pre-compilation tool. It can be used in combination with compass to greatly speed up css development. It can also solve some unpleasant issues in css development. Sass can make css development more friendly to programmers.

Installation and use:

Sass is based on ruby. First, you need to download and install ruby from the ruby official website. Ruby.

The download and installation process is very simple. Remember to check and add to PATH. Then you can use ruby-v in the command line to check whether the installation is successful.

Then you can use the gem package management tool to change the source because it is easy to be used by the wall:

Gem sources -- add https://gems.ruby-china.org/-- remove https://rubygems.org/

May encounter an SSL Certificate problem, change to http://gems.ruby-china.org/

Then install sass with gem install sass

You can also use gem install compass to install compass.

After the program is successfully created, you can use compass create projectName in a directory to create a new sass project.

Then, compass watch can be used to monitor and reload the css file that is compiled and output after the project is reloaded in real time.

The usage of cpmpass will be summarized later. Let's talk about Sass first.

 

Sass Syntax:

Note: sass uses different syntax because of historical issues such as scss and sass file extensions. Sass uses indentation for nesting. The syntax is concise and efficient, but it is difficult for users to read. The scss syntax is similar to the nesting of css for easy reading. This article uses scss.
According to the degree of use, this article only records some common core functions. For more information, see the official documentation.

Variable:

Abstract The styles that need to be reused on the web page and define them as variables.

The variable is like this: $ screen-ff: Arial;

Use the variable:. screen {font-family: $ screen-ff ;}

Will be automatically compiled as:. nav {height: Arial ;}

Variable definitions are generally placed in a separate file, such as _ variables. scss (the file name must be prefixed with an underscore, indicating that it is a module. The module and the file to be compiled cannot be renamed again) and then imported using the @ import "variables" method.

@ Import is different from the native command of css.

Nesting:

. Screen {
Height: $ screen-ff;

. Head {
Font-size: 14px;
}
}
Output:

. Screen {
Height: Arial;
}
. Screen. head {
Font-size: 14px;
}
Attributes can also be nested:

. Head {
Font :{
Family: $ screen-ff;
Size: 14px;
}
}
Such nesting may cause problems:

A {
: Hover {
Color: #66 ccff;
}
}
Output:

A: hover {
Color: #66 ccff;
}

This will let the sub-level label included in tag a get this style, this is not the expected result, at this time we need to use & to confirm the introduction of the parent level label

Rewrite:

A {
&: Hover {
Color: #66 ccff;
}
}
The output is changed:

A: hover {
Color: #66 ccff;
}

Mixin:
Generally, when a webpage has a div with repeated functions, mixin is used to construct a template for reuse. Mixin can also be introduced as a local file

Example:

@ Mixin col ($ width: 50% ){
Width: $ width;
Float: left;
}

This method is used to set the screen share ratio of a module. You can set the default parameters when passing parameters.
Usage:

. Body {
@ Include col (25% );
}
Output:

. Body {
Width: 25%;
Float: left;
}

 

Extend:
Inheritance, which everyone is familiar with, can simplify the code structure and speed up development and operation when they want to build new elements and have similar elements.
For example, a style exists:

. Danger {
Color: # f00;
}

We want to add a higher level of style:

. Danger-serious {
Color: # f00;
Border: 2px # f00;
}

In this way, code redundancy occurs and is transformed through extend:

. Danger {
Color: # f00;
}
. Danger-serious {
@ Extend. danger;
Border: 2px # f00;
}

Output:

. Danger,. danger-serious {
Color: # f00;
}
. Danger-serious {
Border: 2px # f00;
}

If you do not need to use the. danger style, you can change. error to % eroor, which is only used for inheritance and does not output itself (analogy constructor ?)
It may take a complicated style to reflect the power of extend...
Different from class inheritance, extend is more like interface inheritance. It is used to introduce all attributes of the parent style class.
In addition, extend cannot inherit the nested selector sequence.

That's all about the basic sass syntax. In addition, sass also has many built-in functions for building larger plug-in modules. as developers, writing these plug-ins is inefficient, therefore, we generally use the Compass framework to improve sass efficiency.