CSSプリプロセッサの使い方

CSS でコードの競合が発生し、変数や算術計算などが実行できない場合があります。 CSS プリプロセッサを使用すると、近接変数や 4 規則計算などのプログラムを作成できます。そのため、次の記事では CSS プリプロセッサの使用方法を説明します。

まず見てみましょうCSS プリプロセッサとは何ですか?

デフォルトのCSSはこれまで実現できなかった記述であり、CSSのことを効果的に記述するのがCSSプリプロセッサです。

ただし、CSS プリプロセッサはブラウザでは使用できません。

SassやLessは色々ありますが、ここまでCSSで記述するのはまだ難しそうですが、「新CSS拡張版」と呼ばれています。

主なプリプロセッサの種類

Sass

Sass は、変数や数式を追加して scsss を変換する CSS ファイルで、拡張子は「.scss」です。 CSSプログラミングスタイルに。

「style.scss」のSassファイルを変換(コンパイル)することで「style.css」を作成できます。

これを使用するには、ruby をインストールする必要があります。

LESS

LESS は、Sass などの LESS ファイルを変換 (コンパイル) します。

変数の概念は少なくてもよいので、計算したり、階層的に記述したりできます。

ただし、「style.less」を使用するためにnode.jsがインストールされていない場合、「style.css」は変換されません。

具体的な例を見てみましょう

LESS の書き方

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

LESS

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

ブラウザの表示効果は次のとおりです:

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

style.css ファイル

h1 {
    font-size: 30px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

この場合、色を変更したい場合、すべての色を変更したい場合、2 h1h2 を変更したい場合は、次のように変数を使用して記述します。

うわー

以上がCSSプリプロセッサの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。