Sass learning

1. What is SASS

SASS is a CSS development tool that provides many convenient writing methods, greatly saving designers time and making CSS development simple and maintainable. This article summarizes the main methods of SASS. Our goal is that with this article, daily general use does not need to read the official documentation.

2. Installation and use

2.1 Installation

SASS is written in Ruby language, but the syntax of the two has nothing to do with it. If you don’t understand Ruby, you can still use it. Just install Ruby first and then install SASS. Assuming you have already installed RUby, then enter the following command on the command line:

gem insrall sass

Then you can use it.

2.2 Use

SASS files are ordinary text files, and CSS syntax can be used directly in them. The suffix name is .Scss, which means Sassy CSS. The following command can display the code converted from .scss file to css on the screen. (Assume the file name is test)

sass test.scss

If you want to save the displayed results to a file, follow it with a .css file name.

sass test.scss test.css

SASS provides four programming style options

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

*expanded: Unindented, expanded css code.

*compact: css code in a concise format.

*compressed: Compressed css code

In a production environment, the last option is generally used

sass ---style compressed test.sass test.css

He can also let SASS monitor a file or directory. Once If the file changes, a compiled version will be automatically generated.

//watch a file

sass --watch input.scss

//watch a directory

sass --watch app/sass:public/stylesheets

The official website of SASS provides an online converter, You can run the various examples below there

3. Basic usage

3.1 Variables

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

SASS allows the use of calculations 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 as

div{

Hi{

color : red;

}

}

attributes can also be nested , for example, the border-color attribute can be written as

p{

border:{

color:red;

}

}

Note that a colon must be added after border.

Within nested code, you can use & to refer to parent elements. For example, the border-color attribute can be written as:

a{

&:hover{ color : #ffb3ff; }

}

3.4 Comments

SASS has two comment styles.

Standard CSS comments /* comment */ will retain the compiled files.

The single-line comment //comment is only kept in the SASS source file and is omitted after compilation.

Add an exclamation point after /*, "indicating that this is an important comment." Even if it is compiled in compressed mode, this line of comment will be retained, and it can usually be used to declare copyright information.

/*!

Important Notes

*/

4. Code Reuse

4.1 Inheritance

SASS allows a selector, such as another selector, such as existing class1:

.class1{

border:1px solid #ddd;

}

class2 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), which 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 The difference is that parameters and default values ​​can be specified.

@mimin left($value:10px){

float:left;

Margin-right:$value

}

When using, add parameters as needed

div{

@include left(20px );

}

The following is an example of a mixin used to generate browser prefixes.

@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, 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 functions in order to generate series color.

lighten(#cc3,10%)//#d6d65c

darken(#cc3,10%)//#a3a329

grayscale(#cc3)//#808080

complement(#cc3)//#33c

4.4 Insert files

@import command, used to insert external files.

@import “path/filename.scss”;

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

@import “foo.css”;

5. Advanced usage

5.1 Conditional statement

@if can be used to judge;

p{

@if 1+1 ==2{border:1px solid;}

@if 5< 3{border: 2px dotted;}

}

is also supported by the @else command:

@if lightness($color)>30%{

}@else{

}

5.2 Loop statement

SASS supports for loop:

@for $i from 1 to 10 {

.border-#{$i}{

Border:#{$i}px solid blue;

}

}

also Support while loop:

$i:6;

@while $i >0{

.item-#{$i}{width:2em *$i}

$i:$i-2

}

each command, similar to for:

@each $member in a,b,c,d{

.#{$member}{

Background-image:url(“image/#{$member }.jpg”);

}

}

5.3 Custom functions

SASS allows users to write their own functions.

@function double($n){

@return $n*2;

}

#sidebar{

Width:double(5px);

}