关于sass:Sass-css预处理器使用

Hbuilder中Sass配置

{
    "name": "sass",
    "id": "compile-node-sass",
    "version": "0.0.4",
    "displayName": "scss/sass编译",
    "description": "编译scss/sass为css。uni-app编译或对文件右键-外部命令编译时应用",
    "engines": {
        "HBuilderX": "^1.0.0"
    },
    "external": {
        "type": "node",
        "programPath": "${pluginPath}",
        "executable": "/node_modules/.bin/node-sass",
        "programName": "node-sass-china",
        "commands": [
            {
                "id": "SASS_COMPILE",
                "name": "编译scss/sass",
                "command": [
                    "${programPath}",
                    "${file}",
                    "../css/${fileBasename}.css"  // 批改此处可扭转编译后的文件输入地位
                ],
                "extensions": "scss,sass",
                "key": "",                     // 通过key，能够配置快捷键
                "showInParentMenu": false, 
                "onDidSaveExecution": true    // 配置保留的时候是否触发执行; 默认为false; true: 代表执行，主动将scss文件转化为css文件
            }
        ]
    },
    "dependencies": {
        "node-sass-china": "^4.7.2"
    },
    "extensionDependencies": [
        "npm"
    ]
}

sass文件

sass文件能够有两种后缀名

1. .sass文件： 是以严格的缩进式语法规定来书写。
2. .scss文件： 写法和css写法类似（集体举荐应用.scss文件）

Sass变量

变量的定义： 应用$符号来标识变量，因为好认，具备美感，且在css中并无他用，不会导致与现存活将来的css语法抵触。
变量存在作用域：变量在css规定块内进行定义时，变量只能在此规定块内应用

$heightlight: #F90;                 // 变量的定义
div {
    color: $heightlight;           // 变量的应用
    font-size: 30px;
    $normal-font: 14px;
    p {
        font-size: $normal-font;
    }
}

本文会有后续的更新，学习不止，更新不止