「less」と「sass」の使い方と違い

CSSプリプロセッサ

CSS プリプロセッサは、スタイルコードをより効率的に作成、編成、維持するためのプログラミング言語機能を追加することでネイティブ CSS を拡張するツールです。プリプロセッサを使用すると、開発者は変数、ネスト、関数、ミックスインなどを使用できるため、特に大規模で複雑なスタイルシートを扱う場合に、CSS がより読みやすく、保守しやすく、再利用しやすくなります。変数の導入によってスタイル構成を統一し、ネストによって階層を表現し、混合と継承によってスタイルの再利用を促進し、操作などの関数によってスタイル値を動的に計算することで、CSS コードをより保守しやすく柔軟にします。

レスと生意気の違い

LESS と Sass は 2 つの一般的な CSS プリプロセッサですが、構文、機能、エコシステムの点でいくつかの違いがあります。LESS と Sass の主な違いは次のとおりです。

文法：
- LESS: LESS は CSS に似た構文を使用しますが、変数、ネスト、ミックスインなどの機能が追加されます。ネストは階層を通じて表現されますdiv { .child { ... } }。
- Sass: Sass には、Sass スタイルと SCSS スタイルの 2 つの構文があります。Sass スタイルはインデントを使用してネストと階層関係を示します。一方、SCSS スタイルは標準の CSS 構文により似ていますが、変数、ネスト、混合などの機能が追加されています。
括弧とセミコロン:
- LESS: LESS はCSS と同様に中括弧{}とセミコロンを使用します;。
- Sass: Sass の Sass スタイルでは中括弧とセミコロンはオプションですが、SCSS スタイルでは標準の CSS 構文と同じです。
変数の表記:
- LESS:@ LESS は、変数を定義するために表記法を使用します@color: red;。
- Sass: Sass は$変数を定義するために表記法を使用します$color: red;。
関数とミックスイン:
- LESS: LESS はミキシング (Mixins) と関数をサポートしますが、Sass よりも機能は劣ります。
- Sass: Sass は、スタイルをより複雑に操作するための関数とミックスインの豊富なライブラリを提供します。
拡張機能名:
- LESS: LESS ファイルには.less.
- Sass:.sass Sass ファイルには、(Sass スタイル) または(SCSS スタイル)の拡張子を付けることができます.scss。
エコシステム:
- LESS: LESS にはある程度のサポートとコミュニティがありますが、エコシステムは Sass に比べて小さい可能性があります。
- Sass: Sass には、強力なコミュニティサポート、豊富なツールとプラグイン、多くのリソースとドキュメントがあります。

LESS を使用するか Sass を使用するかの選択は、好みとプロジェクトのニーズによって異なります。構文と機能にいくつかの違いがありますが、いずれも CSS の保守性と開発効率を向上させることを目的としています。

少なく、生意気な使用

少ない

ここではいくつかの例を示します。

変数とネスト:

@primary-color: #3498db;
@border-radius: 4px;

.header {
  background-color: @primary-color;
  color: white;
  padding: 20px;

  .logo {
    font-size: 24px;
  }

  .menu {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

ミキシング (ミックスイン):

.rounded-corners(@radius: 4px) {
  border-radius: @radius;
}

.box {
  .rounded-corners(8px);
}

手術：

@base-font-size: 16px;

body {
  font-size: @base-font-size;
}

.container {
  width: 100% - 20px;
}

@margin: 10px;

.button {
  margin: @margin * 2;
}

条件付きステートメントとループ:

@colors: red, green, blue;

.loop(@index) when (@index > 0) {
  .color-@{index} {
    color: extract(@colors, @index);
  }
  .loop(@index - 1);
}

.loop(length(@colors));

@max-width: 600px;

.responsive-box {
  width: 100%;
  @media (max-width: @max-width) {
    width: @max-width;
  }
}

継承:

.base-button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-primary {
  .base-button;
  background-color: blue;
  color: white;
}

.button-secondary {
  .base-button;
  background-color: gray;
}

輸入：

@import "variables"; // 导入其他 LESS 文件

.nav {
  ul {
    padding: 0;
    list-style: none;
    margin: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

生意気な

変数とネスト:

$primary-color: #3498db;
$border-radius: 4px;

.header {
  background-color: $primary-color;
  color: white;
  padding: 20px;

  .logo {
    font-size: 24px;
  }

  .menu {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

ネストされた属性とセレクター:

.box {
  font: {
    weight: bold;
    size: 14px;
    family: Arial, sans-serif;
  }

  background: {
    color: #f5f5f5;
    image: url("bg.jpg");
    position: top right;
  }
}

条件付きステートメントとループ:

$colors: red, green, blue;

@each $color in $colors {
  .color-#{$color} {
    color: $color;
  }
}

@mixin text-effect($effect) {
  @if $effect == underline {
    text-decoration: underline;
  } @else if $effect == capitalize {
    text-transform: capitalize;
  } @else {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }
}

.button {
  @include text-effect(underline);
}

機能と操作:

$base-font-size: 16px;

body {
  font-size: $base-font-size;
}

.container {
  width: calc(100% - 20px);
}

$margin: 10px;

.button {
  margin: $margin * 2;
}

継承とプレースホルダーセレクター:

%base-button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-primary {
  @extend %base-button;
  background-color: blue;
  color: white;
}

.button-secondary {
  @extend %base-button;
  background-color: gray;
}

インポートしてネストします。

@import "variables"; // 导入其他 Sass 文件

.nav {
  ul {
    padding: 0;
    list-style: none;
    margin: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

これらの例では、変数、ネスト、ミックスイン、条件ステートメント、ループ、関数、継承、プレースホルダーセレクター、インポートなど、Sass の重要な機能のいくつかを示します。Sass は、スタイル付きコードをより効率的に作成、整理、維持するのに役立つ豊富な機能を提供します。実際のプロジェクトのニーズに応じてこれらの関数を使用し、詳細については Sass の公式ドキュメントを参照してください。