CSSの前処理LessとSassの概要

lessはnodejsに基づいて書かれています

sassはrubyで記述され、node-sassパッケージはコンパイルの問題を解決するために使用されます

lessの変数はmixin@lessで定義されています。ブロックの

使用：

lessclessファイルをコンパイルするコマンド。メソッド：

"mixin"属性は既存のスタイルルールにのみ基づくことができます！mixinでクラスセレクターとIDセレクターを使用できます。

.a,#b{
    
    
    color: rebeccapurple;
}
.mixin-class{
    
    
    .a();
}
.mixin-id{
    
    
    #b();
}

出力：

.a,
#b {
    
    
  color: rebeccapurple;
}
.mixin-class {
    
    
  color: rebeccapurple;
}
.mixin-id {
    
    
  color: rebeccapurple;
}

ミックスインを呼び出す場合、括弧はオプションであることに注意してください：

.a()  //此种写法和下面写法无区别
.a;

出力されないMixin：

ミックスインを作成したいが、生成されたcssにミックスインを出力したくない場合は、その後に括弧（）を追加できます。

.my-mixin{
    
    
    color: black;
}
.my-other-mixin(){
    
    
    background: wheat;
}
.class{
    
    
    .my-mixin;
    .my-other-mixin;
}

出力：

.my-mixin {
    
    
  color: black;
}
//此处并没有输出 .my-other-mixin
.class {
    
    
  color: black;
  background: wheat;
}

less中的extend:

これが呼ばれるブロックmixinです：

lessの複数の場所が引用されている場合mixin：

次に、最終的に生成されたcssに多くの反復コードがあります。中間コードが多い

場合mixin、最終的に生成された反復コードはより多くなります。明らかにこれは望ましくありません。解決：

使用extend

結果：
共通のスタイルが1か所に抽出され、

別のスタイルがそこに抽出されます

lessloopサイクル

例を見てください。原則は再帰です。

結果は次のとおりです。

モジュール性が低い

sassの変数は$を使用します

sassのmixin言い回しはlessとは異なります。

まず、sassmixinは@mixin宣言とともに表示する必要があり、他のmixin名前の前にはドットを付けないでください。たとえば、
@ mixinブロックは@mixinと書くことはできません
。ブロックLessのmixinは、両方のクラスのように見えます。とミックスイン。

sassを使用する場合は、追加する必要があります@include

node-sassコマンドラインコンパイルの使用方法

sassでは、次のように拡張を使用します。

sassloopサイクル

sassはグリッドレイアウトを再帰的に書き込みます。sassは変数を参照するために使用され#{$n}、lessは変数を参照するために使用されることに注意してください。@{n}

だが！！！！！！！！！！！！！！！

実際、sassはループをサポートしているので、それほど面倒である必要はありません。

sassモジュラー

総括する：

CSSプリプロセッサフ​​レームワーク