13-Sass教程

参考资料：

• sass官网：https://sass-lang.com.cn/
• sass教程：https://sass-lang.com.cn/documentation/

1. 介绍

sass最成熟、最稳定、最强大的专业级css扩展语言

• sass是css的预编译工具
• 更优雅的书写css
• 需要转换成css才能让浏览器认识和运行

安装一个插件：Easy Sass

• 可以自动将.scss的样式代码文件转成 css 代码文件，即会自动生成 .css 和 .min.css 两个文件

2. 语法

创建文件格式为 .scss 文件后缀。不建议 .sass （因为格式要求太严格，极易出错）

2.1 变量

Sass 使用 $ 符号来使某些内容成为变量。

$color: blue;
$width: 100px;

.box{
    background: $color;
    width: $width;
}

.box2{
    width: $width * 2;
}

.footer{
    border-top: 1px solid $color;
}

2.2 if 条件

@if - @else 条件判断仅支持 == ，注意没有 === 。

$isShowTab: true;
$isRed: true;

@if ($isShowTab == true) {
    .tabbar{
        position: fixed;
        left: 0;
        top: 0;
    }
}

@else {
    .tabbar{
        position: relative;
    }
}

div{
    width: 100px;
    height: 100px;
    @if ($isRed == true) {
        background: red;
    } @else {
        background: yellow;
    }
}

2.3 for 循环

// from 1 to 6: 1,2,3,4,5
// from 1 through 6: 1,2,3,4,5,6
@for $item from 1 through 6 {
    li:nth-child(#{$item}){
        position: absolute;
        left: ($item - 1) * 100px;
        top: ($item - 1) * 100px;
    }
}

2.4 each 遍历

$colors: red, green, yellow;

@each $item in $colors {
    $index: index($colors, $item);
    li:nth-child(#{$index}){
        background: $item;
    }
}

2.5 mixin 混入

@mixin 与 @include 类似函数 和 函数调用，而且支持传参 和 默认值。

@mixin jerry_transition($a:all, $b:1s) {
    transform: $a $b;
    -webkit-transform: $a $b;
    -moz-transform: $a $b;
}

.box {
    @include jerry_transition()
}

.box1 {
    @include jerry_transition(width, 2s)
}

3. 嵌套

按照层级去写，就可以转换为层级的样式。

div {
    width: 100px;
    height: 100px;
    p {
        width: 50px;
        height: 50px;
        span {
            color: red;
        }
    }
}

ul {
    > li {
        background: yellow;
        // & 代表它自己，必须加
        &:hover {
            background: red;
        }
        &:active {
            background: blue;
        }
    }
}

4. 继承

基样式 + @extend 基样式; 使用定义的基础样式，并在需要的元素上继承该样式

.base {
    width: 100px;
    height: 100px;
    outline: auto;
}

.btn1 {
    @extend .base;
    background: green;
}

.btn2 {
    @extend .base;
    background: red;
}

5. 导入

@import "路径" 导入公共的基样式文件。

base.scss

$color: blue;
$width: 100px;

导入.scss

@import "./base.scss";

.box-jerry {
    color: $color;
    width: $width;
}