SCSS 利用方法 MAC

SCSSはコンパイルしないとCSSにならない

結論 VSCodeのプラグインで対応

Live sass compilerを利用

インストールしたら

Watchを押す

違うフォルダに書き出したい時

Settingsから下記をクリック

setting.jsonを記載

        "workbench.colorTheme": "Monokai",
        "workbench.iconTheme": "material-icon-theme",
        "liveServer.settings.donotShowInfoMsg": true,
        "explorer.confirmDelete": false,
        "workbench.sideBar.location": "left",
        "window.zoomLevel": 0,

        "liveSassCompile.settings.formats":[


             // ここを記載するとCSSの出力先を変更できる
            {
                "format": "expanded",
                "extensionName": ".css",
                "savePath": "~/../css/"
            },

                     
            {
                "format": "compressed",
                "extensionName": ".min.css",
                "savePath": "~/../css/"
            },
        ],
        "files.autoSave": "off",
        "liveSassCompile.settings.excludeList": [
            
            "**/node_modules/**",
            ".vscode/**"
        ],
        "terminal.integrated.shellArgs.windows": "null",
        "liveSassCompile.settings.autoprefix": [],
        "workbench.welcomePage.hiddenCategories": [
            "Beginner",
            "Setup"
        ],
    
}

---

下記はbrewから sassパッケージをインストールする方法

結論：　しないほうが良い

理由： OSのデフォルトのRubyのバージョンをMACは変更できない。そのためbrewでrvmをインストールして、まずrubyのバージョンを整えるところからしないといけない。ハードルが高い。VSCodeのプラグインを入れるほうが環境も汚れない

インストール方法

macの場合 brewコマンドが良い 公式サイトも推奨する方法

brew install sass/sass/sass

sass-lang.com

利用方法は２つ

コンパイル

sass style.scss:style.css

自動的にコンパル

sass --watch style.scss:style.css

うまく行かないrubyを別途brewでinstallする必要がある