Front-end css framework SASS usage tutorial, csssass

Front-end css framework SASS usage tutorial (conversion), csssass
1. What is SASS?

 

SASS is a CSS development tool that provides a lot of convenient writing methods, greatly saving the designer's time, making CSS development easy and maintainable.

This article summarizes the main usage of SASS. My goal is that, with this article, you do not need to go to the official documentation for routine use.

Ii. Installation and Use

 

2.1 installation

SASS is written in Ruby, but its syntax 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 Use

The SASS file is a common text file, which can directly use the 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.

 

III. Basic 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 computing functions

SASS allows expressions in 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 nested code blocks, you can use & reference parent elements. For example, a: hover pseudo class can be written:

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

3.4 annotations

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 to inherit from 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 Mixin

Mixin is a bit like a C-language 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 color functions

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 a 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 condition statements

@ 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% {
　　　　
　　} @else {
　　　　background-color: #fff;
　　}

5.2 loop statements

SASS supports the 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 Functions

SASS allows users to write their own functions.

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

Address: http://www.ruanyifeng.com/blog/2012/06/sass.html