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;
    }
}

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