Scss と css変数 の同居メモ

Scss と css変数 の同居について気になったので少し検証してみました。

コード

@charset "utf-8";

@use "sass:color";

$main-color: #CF649A;
$main-color_d: color.scale($main-color, $lightness: -8%);
$main-color_l: color.scale($main-color, $lightness: 8%);

:root {
    --bg-color: #fff;  /* css変数 */
    --color: #333;
    --main-color: #{$main-color}; /* Scss変数 を css変数 として展開 */
}

css変数はそのまま。 Scss変数 を使う場合は calc() と同様に #{} で囲めばOK。

@charset "utf-8";

@use "../foundation" as f;

.l-main {
    background-color: var(--bg-color);
    color: var(--color);
}

普通に通りますね。なお、 sass: 1.50.0 で試験しました。

.stylelintrc.json

{
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-standard-scss",
        "stylelint-config-recommended-scss",
        "stylelint-config-prettier"
    ],
    "syntax": "scss",
    "ignoreFiles": [
        "src/scss/global/_var.scss"
    ],
    "rules": {
        "declaration-empty-line-before": null,
        "max-line-length": 300,
        "indentation": 4,
        "no-missing-end-of-source-newline": true,
        "function-parentheses-newline-inside": "never-multi-line",
        "function-parentheses-space-inside": "never-single-line",
        "function-comma-newline-after": "never-multi-line",
        "function-comma-newline-before": "never-multi-line",
        "declaration-block-no-shorthand-property-overrides": true,
        "max-empty-lines": 2,
        "rule-empty-line-before": [
            "always",
            {
                "ignore": [
                    "after-comment",
                    "inside-block"
                ]
            }
        ],
        "selector-class-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",
        "color-function-notation": "legacy",
        "at-rule-no-unknown": null,
        "function-no-unknown": [
            true,
            {
                "ignoreFunctions": [
                    "/^map\\..+/",
                    "/^color\\..+/"
                ]
            }
        ],
        "scss/at-rule-no-unknown": true,
        "scss/dollar-variable-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",
        "scss/at-mixin-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",
        "scss/at-mixin-argumentless-call-parentheses": "always"
    }
}

このような設定を用意して

    "devDependencies": {
        "stylelint": "^14.5.1",
        "stylelint-config-prettier": "^9.0.3",
        "stylelint-config-recommended-scss": "^6.0.0",
        "stylelint-config-standard": "^25.0.0",
        "stylelint-config-standard-scss": "3.0.0",
        "stylelint-scss": "^4.1.0",
    }

これで stylelint も通ることを確認しました。ひとまず大丈夫そうですね。

参考

• sassでcss変数を使うとき – web
• CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ | コリス
• CSS変数（カスタムプロパティ）を使う上でのポイントと注意点