CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか

マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、いくつかの問題も抱えている。

一見非論理的なコードを大量に記述する必要があり、メンテナンスや拡張に不便で、再利用にも不向きです。特に、フロントエンド開発エンジニア以外の場合、CSS の記述経験が不足しているため、整理されたメンテナンスしやすい CSS コードを書くのが難しいことがよくあります。

CSSプリプロセッサは上記の問題の解決策です

前処理言語

CSS言語を拡張し、変数、ミックスイン、関数などの機能を追加し、CSSのメンテナンスが容易になり便利になりました。

本質的に、前処理はCSSのスーパーセットである

カスタム構文とパーサーのセットが含まれています。これらの構文に従って、独自のスタイル ルールを定義できます。これらのルールは最終的にパーサーによってコンパイルされ、対応する CSS ファイルが生成されます。

2. それらは何ですか

CSS プリコンパイル言語のフロントエンドには、次の 3 つの優れたプリコンパイル プロセッサがあります。

• サス
• 少ない
• スタイラス

サス

2007年に誕生した、最も初期かつ最も成熟したCSSプリプロセッサです。Rubyコミュニティと、最も強力なCSSフレームワークであるCompassのサポートを受けています。現在は、LESSの影響を受けて、CSSと完全に互換性のあるScssに進化しています。

ファイルの拡張子は.sassとscssです。sassのインデント方法に厳密に従い、中括弧とセミコロンを省略できます。

少ない

2009 年に登場したこの言語は、SASS の影響を強く受けていますが、CSS の構文を使用しているため、ほとんどの開発者やデザイナーにとって使い始めるのが簡単です。Ruby コミュニティ以外では、SASS よりもはるかに多くの支持者がいます。

SASS に比べてプログラム可能な機能が不足しているのが欠点ですが、シンプルさと CSS との互換性が利点であり、これが SASS の Scss 時代への進化に影響を与えました。

スタイラス

Stylus は CSS 前処理フレームワークです。2010 年に Node.js コミュニティから作成され、主に Node プロジェクトに CSS 前処理サポートを提供するために使用されます。

つまり、Stylus は、堅牢で動的かつ表現力豊かな CSS を作成できる新しい言語です。これは比較的新しいもので、本質的には SASS/LESS などと同じことを行います。

3. 違い

さまざまなプリプロセッサが強力ですが、最もよく使用されるものは次のとおりです。

• 変数
• 範囲
• コードミックスイン
• ネストされたルール
• モジュール

そこで、以下ではこれらの違いについて詳しく説明します。

基本的な使い方

less と scss

。箱 {
  表示: ブロック;
}

サス

。箱
  表示: ブロック

スタイラス

。箱
  表示: ブロック

ネスティング

3つのネスト構文はすべて同じで、親セレクタを参照する&タグも同じです。

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

少ない

.a {
  &.b {
    色: 赤;
  }
}

変数

変数は間違いなく CSS を再利用するための効果的な方法を追加し、CSS ではもともと避けられなかった繰り返しの「ハードコーディング」を減らします。

less で宣言される変数は @ で始まり、その後に変数名と変数値が続く必要があり、変数名と変数値はコロンで区切る必要があります。

@赤: #c00;

強い {
  色: @赤;
}

sass で宣言された変数は、変数名に @ というプレフィックスが付く点を除いて、less で宣言された変数と非常によく似ています。

赤: #c00;

強い {
  色: $red;
}

stylus で宣言される変数には制限はありません。先頭に $、末尾にセミコロンを使用できます。これはオプションですが、変数とその値の間には = が必要です。

stylusでは変数宣言の先頭に@記号を使用することは推奨されません。

赤 = #c00

強い
  色: 赤

範囲

CSS プリコンパイラは変数にスコープを割り当てます。つまり、変数にはライフ サイクルがあります。 js と同様に、最初にローカル スコープで変数を検索し、次に親スコープで変数を検索します。

Sassにはグローバル変数はありません

$色: 黒;
.スコープ {
  $bg: 青;
  $色: 白;
  色: $color;
  背景色:$bg;
}
.スコープなし{
  色:$色;
} 

コンパイル後

.スコープ {
  color:white;/* 白です*/
  背景色:青;
}
.スコープなし{
  color:white;/*white (グローバル変数の概念なし)*/
}

したがって、Sassで同じ変数名を定義しない方がよいでしょう。

less と stylus のスコープは、JavaScript のスコープと非常に似ています。まず、ローカルに定義された変数を検索します。見つからない場合は、バブリングのように、ルートに到達するまでレベルごとに下方向に検索します。

@色: 黒;
.スコープ {
  @bg: 青;
  @色: 白;
  色: @color;
  背景色:@bg;
}
.スコープなし{
  色:@color;
}

コンパイル後:

.スコープ {
  color:white;/*white (ローカル変数が呼び出されます)*/
  背景色:青;
}
.スコープなし{
  color:black;/*black (グローバル変数が呼び出されます)*/
}

ミキシン

Mixin は、プリプロセッサの最も重要な機能の 1 つです。簡単に言うと、Mixin はいくつかのスタイルを抽出し、それらを個別のモジュールとして定義して、多くのセレクタで再利用できるようにします。

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

Lessでは、混合使用とは、定義されたClassAに別の定義されたClassを導入し、パラメータを渡すこともできることを意味します。パラメータ変数は@宣言です。

.アラート{
  フォントの太さ: 700;
}

.ハイライト(@color: 赤) {
  フォントサイズ: 1.2em;
  色: @color;
}

。注意喚起 {
  .アラート;
  .ハイライト(赤);
}

コンパイル後

.アラート{
  フォントの太さ: 700;
}
。注意喚起 {
  フォントの太さ: 700;
  フォントサイズ: 1.2em;
  色: 赤;
}

Sassでミックスインを宣言するときは、@mixinnに続けてミックスインの名前を使用し、パラメータを設定する必要があります。パラメータ名は変数$declaration形式です。

@mixin 大きなテキスト {
  フォント：
    ファミリー: Arial;
    サイズ: 20px;
    太さ: 太字;
  }
  色: #ff0000;
}

.ページタイトル{
  @include 大きなテキスト;
  パディング: 4px;
  上マージン: 10px;
}

Stylus の Mixin は、前の 2 つの CSS プリプロセッサ言語とは少し異なります。シンボルを使用せずに Mixin 名を直接宣言し、等号 (=) を使用して定義されたパラメータとデフォルト値を接続できます。

エラー(境界線の幅= 2px) {
  境界線: borderWidth solid #F00;
  色: #F00;
}
.generic-error {
  パディング: 20px;
  マージン: 4px;
  error(); /* エラーミックスインを呼び出す */
}
.ログインエラー{
  左: 12px;
  位置: 絶対;
  上: 20px;
  error(5px); /* エラーミックスインを呼び出し、パラメータ $borderWidth の値を 5px に設定します */
}

コードのモジュール性

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

scss、less、stylusの使い方は以下の通りです。

@import './common';
'./github-markdown' をインポートします。
@import './mixin';
@import './variables';

参考文献

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

CSS プリコンパイル言語とその違いに関するこの記事はこれで終わりです。より関連性の高い CSS プリコンパイル言語については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。