Sass syntax

nested

// Hierarchy nesting, id or class name
#main{
    width: 100%;
    .container{
        font-size: 16px;
    }
    button{
        padding: 4px 6px;
        &:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden; }}}// attribute nested font family, font size, font weight; Abbreviations for three properties
.container{
    font:{
        family: fantasy;
        size: 30em; weight: bold; }}Copy the code

The data type

/* * 1. Number type */
1, 2, 15, 20px

/* * 2. String */
"fff", 'ccc', ddd

/* * 3. Color value */
blue, #efefed, rgba(0.0.0.0.6)

/* * 4. Boolean type */
true, false

/* * 5. Null value */
null

/* * 6. Array, comma separated */
table-layout,table-layout-row, table-layout-col, table-layout-item 

/* * 7. Object, map type key:value */
(
    key1: value1,
    key2: value2,
    key3: value3
)
Copy the code

The operator

Sass supports addition, subtraction, multiplication and division of numbers;

$w: 20px;
$h: 10px;

p{
    font-size: $w / 2;
    height: round($h) * 2;
    padding: 5px + $h / 2;
}
Copy the code

Interpolation statements (concatenation characters)

#{ };
Copy the code

Cycle control

/ / each loop
$array:(a,b,c,d);

@each $i in $array# {{.$i} {color:#ccc; }}// For loop, independent of arrays
@for $i from 1 through 5 {
    .item-# {$i} { 
        width: 2em * $i; }}/ / while loop
$i: 5;
@while $i > 0 {
    .item-# {$i} { 
        width: 2em * $i; 
    }
    $i:$i - 1; 
}

Copy the code

function

And JavaScript functions, usually used to do a certain kind of thing; For example, page compatibility

@function v($px) {@if $px= =0{
        @return 0;
    }
    @return $px / 1334 * 100vw;
}

@function h($px) {@if $px= =0{
        @return 0;
    }
    @return $px / 750 * 100vh;
}

.container{
    width: v(520);
    height: h(340);
}
Copy the code

Mixing instructions

Commonly used to define repeatable styles, avoiding uncontested class names;

@mixin clearfix {
    display: inline-block;
    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    * html & { height: 1px }
}

.list{
    @include clearfix;
    padding: 4px 0;
}

// Mixin with arguments
@mixin box-shadow($shadows...). { -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

.shadows{
    @include box-shadow(0px 4px 5px # 666.2px 6px 10px # 999);
}
Copy the code

The extend inheritance

.clearfix {
    display: inline-block;
    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    * html & { height: 1px }
}

.container{
    padding: 5px 8px;
    @extend .clearfix;
}
Copy the code