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

38次阅读

共计 1006 个字符，预计需要花费 3 分钟才能阅读完成。

{
    "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 文件：是以严格的缩进式语法规定来书写。
.scss 文件：写法和 css 写法类似（集体举荐应用.scss 文件）

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

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

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

正文完