Sass common usage notes and sass usage notes

Sass common usage notes and sass usage notes

Sass is required for h5 projects recently developed by the company. Therefore, the leaders recommended me to go to the SASS Usage Guide blog of the great god of Ruan Yifeng to learn how to use sass for future convenience, so we should record it here.

I. code reuse

1. Inheritance: SASS allows one selector and inherits another selector.

To Inherit class1, use the @ extend command:

.class1 {　　　　border: 1px solid #ddd;}
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
}

2. Mixin: Mixin is a bit like macro in C language. It is a reusable code block.

Use the @ mixin command to define a code block. Use the @ include command to call this mixin.

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

The power of mixin is that you can specify parameters and default values. Add parameters as needed:

　  @mixin left($value: 10px) {　　　　float: left;　　　　margin-right: $value;　  }
　　div {
　　　　@include left(20px);
　　}

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. Insert a file

@ Import command, used to insert external files

@import "path/filename.scss";

Ii. Advanced usage

1. 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;　　}

2. Loop statements

For Loop:

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

While loop:

　$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");　　　　}　　}

3. User-Defined Functions

SASS allows users to write their own functions.

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