Sass基本语法

一、sass有两种后缀名文件

1.  sass，不使用大括号和分号。
2.  scss，与css文件格式差不多，使用大括号和分号。

二、编译格式

• nested ----------- 嵌套
• compact ----------- 紧凑
• expanded ----------- 扩展
• compressed ----------- 压缩

配置修改

三、变量

sass使用  $  符号来标识变量

// 声明变量
$color: #fff;

// 变量使用
div {
    border: $color;
}

四、嵌套规则

选择器嵌套

nav {
    height: 100px;
    ul {
        margin: 0;
        li {
            padding: 5px;
            list-style: none;
        }
    }
}

父选择器的标识符  &

a {
    color: blue;
    &:hover {
        color: red 
    }
}

属性嵌套

例如：border-styleborder-widthborder-color以及border-等属性的书写过于复杂。但在sass中，你只需敲写一遍border：

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

五、样式复用  mixin

1.  定义 mixin：使用 @mixin 加名称定义样式模块

语法

@mixin 名字 (参数1, 参数2...) { ... }

案例 

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

         2. 使用 @include 指令 调用 @mixin 样式模块

.button-green {  
    @include button;  
    background-color: green;  
}

@mixin button-blue {  
    @include button;  
    @include link;  
}

        3. 参数使用

// 声明
@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

// 调用
.button-green {  
    @include button(green);  
}

参数设置默认值

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

六、样式继承 @extend

.box {
    background-color: red;
}

div {
    // 样式继承
    @extend .box;
    color: #fff;
}

七、引入sass文件 @import

@import "base";

八、控制指令

1. @if

// -------------- 语法 ------------
@if 条件 {
    ...
}
// -------------------

// 变量声明
$use-prefixes: true;

.rounded {
    @if $use-prefixes {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    border-radius: 5px;
}

// 变量声明
$theme: "dark";

body {
    @if $theme == dark {
        background-color: black;
    } @else @if $theme == light {
        background-color: white;
    } @else {
        background-color: grey;
    }
}

2. @for

// ------------ 语法 ------------
@for $var from <开始值> through <结束值> {
    ...
}
// -------------------------------

$columns: 4;
// through 包含4
@for $i from 1 through $columns{
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}


// ------------ 语法 -------------
@for $var from <开始值> to <结束值> {
    ...
}
// -------------------------------

$columns: 4;
// to 不包含4
@for $i from 1 to $columns{
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}

3. @each

@each $var in $list {
    ...
}

$icons: success error warning;
@each $icon in $icons {
    .icon-#{$icon} {
        background-image: url(./images/icons/#{$icon}.png)
    }
}

4. @while

@while 条件 {
    ...
}

$i: 6;
@while $i > 0 {
    .item-#{$i} {
        width: 5px * $i;
    }
    $i: $i -2;
}

内容来源：稀土掘金

转载链接：https://juejin.cn/post/7165343063814963214