Sass learning logs and sass logs

Sass learning logs and sass logs

1. What is SASS?

SASS is a CSS development tool. It provides a lot of convenient writing methods, greatly saving designers time and making CSS development easy and maintainable. This article summarizes the main SASS methods. Our goal is that, with this article, you do not need to read official documents 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 use it as usual. You only need to install Ruby first and install SASS. If you have installed RUby, run the following command on the command line:

Gem insrall 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 suffix is. Scss, which means Sassy CSS. The following command shows the code for converting the. scss file to css on the screen. (Assume the file name is test)

Sass test. scss

If you want to save the result file, follow the file name of .css.

Sass test. scss test.css

SASS provides four programming style options

* Nested: nested indent css code, which is the default value.

* Expanded: expanded css code without indentation.

* Compact: css code in concise format.

* Compressed: compressed css code

In the production environment, the last option is generally used.

Sass --- style commp ressed test. sass test.css

It also allows SASS to listen to a file or directory. Once the file changes, it will automatically generate the compiled version.

// Watch a file

Sass -- watch input. scss

// Watch a directory

Sass -- watch app/sass: public/stylesheets

The SASS official website provides an online converter where you can run the following examples

III. Basic usage

3.1 Variables

SASS allows the use of variables, so the variable starts 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

P {

Border :{

Color: red;

}

}

Note that the border must be followed by a colon.

In the nested code, you can use & reference the parent element. For example, the border-color attribute can be written as follows:

A {

&: Hover {color: # ffb3ff ;}

}

3.4 annotations

SASS has two annotation styles.

The standard CSS comment/* comment */retains the compiled file.

Single line comment // comment, which is only stored in the SASS source file and omitted after compilation.

Add an exclamation point after/*, "indicating this is an important comment". This line of comment is retained even if it is compiled in compression mode, which can be used to declare copyright information.

/*!

Important Notes

*/

Iv. code reuse

4.1 inheritance

SASS allows one selector, for example, another selector, for example, existing class1:

. Class1 {

Border: 1px solid # ddd;

}

To Inherit class1, use the @ extend command:

. Class {

 

@ 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.

@ Mimin 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

# Navbar li {@ include rounded (top, left );}

# Footer {@ include rounded (top, left, 5px );}

4.3 color functions

SASS provides some built-in 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 into 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 {

 

}

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/Temporary temporary 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 );

}