[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて

2022-01-26 22:21:56

I. 何であるか

Cssは比較的シンプルな構文で、ユーザーからの要求も少ないマークアップ言語ですが、以下のような問題点もあります。

一見非論理的なコードをたくさん書く必要がある、保守・拡張が容易ではない、再利用に向かない、特にフロントエンド以外の開発エンジニアにとっては、CSSの記述経験がないため、整理された保守しやすいCSSコードを書くことが難しい場合が多い。

Cssプリプロセッサーはこの問題を解決するものである

プリプロセッシング言語

Css言語を拡張し、変数、ミキシン、関数などの機能を追加して、Cssをより保守的で便利なものにする。

基本的に、プリプロセッシングはCssのスーパーセットである

には、独自の構文セットと、それらの構文に基づいて独自のスタイルルールを定義するパーサーが含まれており、最終的にパーサーを通過してコンパイルされ、対応する Css ファイルが生成されます。

II. はどのようなものですか？

Cssのプリコンパイル言語には、フロントエンド内部に3つの優れたプリコンパイル処理系があり、それは以下の通りです。

サス
レス
スタイラス

サス

2007年に誕生し、Rubyコミュニティと最強のCSSフレームワークであるCompassの支援を受け、最も早く、最も成熟したCSSプリプロセッサであるScssは、現在、LESSの影響を受け、完全にCSS互換のScssに発展しています。

.sassとscssのファイル拡張子により、sassのインデントに厳密に従った中括弧とセミコロンの省略が可能になります

少ない

2009年に登場し、SASSから強い影響を受けていますが、CSS構文を使用することで多くの開発者やデザイナーが利用しやすくなっており、SASSよりもRubyコミュニティ以外の支持者がはるかに多いのが特徴です。

SASSに比べてプログラム性が低いというデメリットがありますが、シンプルでCSSとの互換性が高いというメリットがあり、それがSASSのScss時代への進化に影響を与えているのです

スタイラス

Stylusは、2010年にNode.jsコミュニティから生まれたCSSプリプロセッシングフレームワークで、主にNodeプロジェクトのCSSプリプロセッシングサポートに使用されています。

Stylusは、堅牢でダイナミック、かつ表現力豊かなCSSを作成するための新しい言語なんですね。比較的新しい言語ですが、本質的には SASS/LESS などと似たようなことをします。

III. 違い

様々なプリプロセッサは強力ですが、最も使用される、機能は次のとおりです。

変数
スコープ
コードミキシング（ミキシン）
ネストされた（ネストされたルール）
コードのモジュール化（Modules）

そこで、これらの分野の違いについて、次のように展開します。

基本的な使い方

lessとscss

.box {
  display: block;
}

サス

.box
  display: block

スタイラス

.box
  display: block

ネスト

ネストの構文は3つとも同じで、親セレクタの & を参照するマークアップも同じです。

違いは、SassとStylusは中括弧なしで記述できることです

少ない

.a {
  &.b {
    color: red;
  }
}

変数

変数によって、CSSを再利用する効果的な方法が追加され、CSSで避けられなかった繰り返しのハードコーディングが軽減されます。

宣言された変数は @ で始まり、変数名と値が続き、変数名と値はコロンで区切られる必要があります。

red: #c00;

strong {
  color: @red;
}

sass が宣言する変数は、変数名の先頭に @ が付くことを除けば less と非常によく似ています。

$red: #c00;

strong {
  color: $red;
}

Stylus で宣言された変数は修飾されず、$ で始まりセミコロンで終わります。セミコロンの有無にかかわらず使用できますが、変数と変数値の間には = が必要です。

スタイラスでは、@記号で変数を開始することは推奨していません。

赤色 = #c00

strong
  color: red

スコープ

Css のプリコンパイラでは変数にスコープを割り当てますが、これはライフサイクルがあることを意味します。js と同じように、まずローカルスコープから変数を探し、次に上位のスコープを探します。

sassにはグローバル変数がありません。

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

コンパイル後

.scoped {
  color:white;/*is white*/
  background-color:blue;
}
.unscoped {
  color:white;/* white (no global variable concept)*/
}

そのため、sassで同じ変数名を定義しない方がよいでしょう

less と stylus のスコープは、まずローカルで定義された変数を探し、見つからなければ泡のようにルートへ降りていくという点で、javascript のスコープと非常によく似ています

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

コンパイル後。

.scoped {
  color:white;/*white (local variable is called)*/
  background-color:blue;
}
.unscoped {
  color:black;/* black (global variable called)*/
}

ミックスイン

Mixinは、プリプロセッサの最も本質的な機能の1つであると言っても過言ではありません。簡単に言うと、Mixin はスタイルの一部を個別に定義されたモジュールとして取り出し、多くのセレクタで再利用することができます。

変数やデフォルトパラメータをMixinで定義することができる

lessでは、ミキシンの使用は、定義されたClassAを別の定義されたClassに取り込み、またパラメータを渡すことができることを意味し、パラメータ変数は@宣言となります。

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

コンパイル後

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sassは@mixinnの後にミキシン名を付けてミキシンを宣言し、変数$宣言の形でパラメータを設定することも可能です。

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylus の mixin は、最初の 2 つの Css プリプロセッサ言語の mixin と若干異なり、表記なしで mixin の名前だけを宣言し、等号 (=) を使って定義されたパラメータをデフォルト値に接続します。

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* call error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* call error mixins and specify the value of the parameter $borderWidth as 5px */
}

コードのモジュール化

モジュール化とは、CSSのコードをモジュールに分割することです

scss、less、stylus は、以下のように使用します。

@import '. /common';
@import '. /github-markdown';
@import '. /mixin';
@import '. /variables';

参考文献

https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA

Cssプリグラミング言語とその違いについての記事は以上です。Cssプリグラミング言語に関するより詳しい情報は、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください。