CSSフロントプロセッサ

CSSプリプロセッサとは、cssファイルを作成する前にプリプロセッシングすることである.
cssフロントプロセッサ独自の構文(構文)を使用してcssファイルを作成します.

cssフロントプロセッサの利点

再使用

の共通要素または重複属性を変数で置き換えることができます.

時間コストの削減

ランダム関数と組み込み関数を使用して、開発時間を短縮できます.

メンテナンス
コードは、

ネストまたは継承コレクタによって読み取り可能に管理できます.

コンパイル方法

이렇게 작성 된 css전처리기는 그냥 실행 할 경우 브라우저가 해석 할수 없음.
 -> CSS Compiler를 통해 css로 파일로 변환해주어야 함

コンパイル中にエラーで挿入します.
node-sassとnodeを最新バージョンに変更することをお勧めします.そうしないと、互換性がないためにエラーが発生する可能性があります.

node-sass

Node-sassはNodeです.jsをコンパイラLibSassのライブラリにバインドします.
npmによるグローバルインストール

npm install -g node-sass

インストールが正しいか確認してください.

npm show sass version

Scss->css変換

Sassとあまり違いはありませんが、括弧とセミコロンに詳しいので、長い間パズルに慣れました.
SCSSを使います.
ファイル拡張子はscssとして作成する必要があります.

sass <변환할 파일명.scss> <변환할 파일명.css> 을 입력

変換に成功した場合.cssファイルと.mapファイルが作成されました
結果を確認すると.
変数としてcolorを用いて格納し,再使用とメンテナンスの利点を理解した.

Sass Watchオプション

scssで作成し、手動でcssに変換する必要があります.これは一般的な面倒ではありません.
ファイルまたはフォルダを監視するwatchオプションを使用すると、ファイルの変更時に自動的にファイルをコンパイルできます.
ファイルモニタリング

sass --watch style.scss style.css

フォルダ内のすべての変更を監視

sass --watch scss:css