Scss/Sass使用

开发工具：vscode
安装插件：Easy Sass

创建项目目录scss-test, 在scss-test目录里，安装俩个依赖：yarn add sass-loader node-scss

1、创建index.html文件

    
    
    
    
    


    

        
这里是标题

        
这里是第一部分内容
        
这里是第二部分内容
    

2、创建index.scss文件

// 导入外部的scss
@import "./scss/mixin";

// 全局变量
$high-color: #f90;
$bg-color: #000;

#app{
    // 嵌套语法
    .zheli{
        color: #f90;
        font-weight: 700;
        font-size: 30px;
        margin: 20px 40px;
    }
}

.neirong{
    // 局部变量，只在块内使用
    color: #FFF;
    $font-size: 20px; 
    font-size: $font-size;
    background-color: $bg-color;

    // 使用这个块，并传入参数
    @include default0; 

    .main{
         // 父级引用&
        &:hover{
            color: rgb(0, 255, 64);
            font-size: large;
        }
    }
}

.neirong2{
    // 样式的继承
    @extend .neirong;
    // 使用这个块，并传入参数
    @include default40(40px, 20px); 
    color: aqua;
}

创建scss/mixin.scss文件

@mixin default0 {
    margin: 40px;
    padding: 40px;
}

// 公共的块，单独提出来
@mixin default40($margin, $padding) {
    margin: $margin;
    padding: $padding;
}

3、在index.scss文件ctrl+s保存的时候会自动生成index.css和index.min.css俩个文件
4、浏览器打开index.html文件，可见scss效果