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

本文會有後續的更新，學習不止，更新不止