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

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