CSSを書いたことがあるなら、大規模なプロジェクトのスタイルを維持することが難しいことを知っているでしょう。ファイルが大きくなり、ルールが混乱し始め、ある時点でコントロールを失っているように感じます😅。このようなとき、次のようなプリプロセッサが役立ちます。 SASS と LESSしかし、それは何ですか？なぜそれらが必要なのですか？見てみましょう！

SASSとLESSとは何ですか？

SASS （構文的に素晴らしいスタイルシート）と LESS とは CSSプリプロセッサ. これらは標準のCSSに新しい機能を追加し、スタイルの記述をより便利で迅速にします。簡単に言うと、SASSとLESSは、スタイルを作成する際に遭遇するルーチンタスクを自動化して簡素化するのに役立ちます。

SASSは2006年に作成されて以来、最も人気のあるCSSプリプロセッサの1つになりました。通常のCSSに似たSCSS構文と、よりミニマリストなSASS構文の両方をサポートしています。LESSは2009年に少し遅れて登場し、そのシンプルさと柔軟性により大きな人気を博しました。どちらのツールも世界中の開発者によって積極的に使用されており、CSSコードの記述とサポートに関連する多くの問題を解決するのに役立ちます。

プリプロセッサーが必要な理由

プリプロセッサを使用すると、変数, 機能, ミキシン, ネスト コードを作る他のチップ より構造化され、読みやすくこれは、スタイルを整理するのが難しい大規模プロジェクトの場合に特に重要です。

SASSまたはLESSを使用する理由は次のとおりです。

🌈 コードの再利用同じスタイルを複製する必要はありません。変数またはミックスを作成して再度使用するだけです。
✨ 便利なスペル：通常のCSSに変換されるコンパクトで簡潔なコードを書くことができます。これにより、エラーが減り、コードの保守性が向上します。
🚀 自動化: SASSとLESSは、頻繁に使用されるプロセスを自動化することで、ルーチンを回避するのに役立ちます。スタイルをより速く作成および更新できるようになります。これは、動的なWebアプリケーションを開発する際に特に重要です。
🔄 プロジェクト構造の改善: プリプロセッサを使用すると、コードを複数のファイルに分割できるため、整理されやすく、サポートが容易になります。

🔥 10万人以上の学生が参加中

理論を読むのに疲れた？
コーディングの時間だ！

Kodik — 実践でプログラミングを学ぶアプリ。AIメンター、インタラクティブなレッスン、実際のプロジェクト。

Кодик

SASSとLESS：主な機能

それでは、これらのプリプロセッサの主な機能を見て、CSS をより便利にする方法を理解しましょう。わかりやすくするために、各段階で例を挙げます。

変数

同じ色を複数の場所で使用したいと想像してみてください。通常のCSSでは、毎回色の値をコピーする必要があります。SASSとLESSでは、変数変数は、色、インデント、フォントサイズなどの値の管理を一元化するのに役立ち、変更が簡単かつ迅速になります。

SASS:

$main-color: #3498db;
$font-size: 16px;

body {
  background-color: $main-color;
  font-size: $font-size;
}

LESS:

@main-color: #3498db;
@font-size: 16px;

body {
  background-color: @main-color;
  font-size: @font-size;
}

変数を使用すると、プロジェクト全体の配色を簡単に変更できます。変数の値を変更するだけで、その変数を使用するすべての要素が自動的に更新されます。これにより、コードが柔軟になり、変更が容易になります。

ネストルール

SASSとLESSを使用すると ネストこれにより、コードの構造が簡素化されます。ネストされたルールは、HTMLの構造を反映しているため、より直感的に見えます。これは、リストやフォームなどのネストされた要素を含むコンポーネントを操作する場合に特に便利です。

例:

nav {
  background: #333;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: inline;
      margin-right: 15px;
      a {
        color: white;
        text-decoration: none;
        &:hover {
          color: #ff6347;
        }
      }
    }
  }
}

ネストを使用すると、繰り返しの数を減らし、コードをより整理できます。これは、HTML構造が複雑で、多くのネストされた要素のスタイルを作成する必要がある場合に特に便利です。

ミキシナ

ミキシナ - これは、複数回使用できるコードの断片を作成する方法です。たとえば、要素に追加することがよくあります影, グラデーション または アニメーション同じものを書かないように、ミックスを作成して、必要なときに呼び出すことができます。ミックスはパラメータを受け取ることもできます。これにより、非常に柔軟になります。

SASS:

@mixin box-shadow($color) {
  box-shadow: 0 4px 8px $color;
}

@mixin button-style($bg-color, $text-color) {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  cursor: pointer;
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

.card {
  @include box-shadow(#aaa);
}

.button-primary {
  @include button-style(#3498db, #fff);
}

LESS:

.box-shadow(@color) {
  box-shadow: 0 4px 8px @color;
}

.button-style(@bg-color, @text-color) {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: @bg-color;
  color: @text-color;
  border: none;
  cursor: pointer;
  &:hover {
    background-color: darken(@bg-color, 10%);
  }
}

.card {
  .box-shadow(#aaa);
}

.button-primary {
  .button-style(#3498db, #fff);
}

ミックスを使用すると、スタイルを簡単に再利用でき、コードがよりわかりやすく簡潔になります。これは、インターフェース要素の統一されたスタイルを維持する必要がある場合に特に重要です。

継承（拡張）

SASSを使用すると継承これは、あるクラスが別のクラスのスタイルを継承できることを意味します。これにより、コードがさらに簡潔になり、スタイルの重複を回避できます。継承は、重複するプロパティの数を減らし、コードの保守性を高めるのに役立ちます。

%button-style {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3498db;
}

.button-primary {
  @extend %button-style;
  color: white;
}

.button-secondary {
  @extend %button-style;
  background-color: #2ecc71;
  color: #fff;
}

継承は、類似したスタイルを持つ複数のクラスがある場合に特に便利です。これにより、コードが読みやすくなり、変更が容易になります。

SASSとLESSの操作方法

SASSとLESSの操作はとても簡単です！まず、SASSとLESSは通常のCSSファイルではないため、 コンパイルする 通常のCSSで。あなたは使うことができます コマンドライン、特別 エディター用プラグイン、Visual Studio CodeやSublime Textなど、または 組み立てツール、Webpack、Gulp、Gruntなど。

SASSの使用を開始する

SASS の使用を開始するには:

SASSをインストールする。npmを介してインストールできます。
```
npm install -g sass
```
コードをコンパイルするたとえば、SASSをCSSにコンパイルするには：
```
sass input.scss output.css
```
また、フラグ --watch を使用して、SASS が変更を自動的に追跡し、ファイルをコンパイルすることもできます。
```
sass --watch input.scss:output.css
```

LESSの使用を開始する

LESSを使用するには：

LESSをインストールするこれは npm を介して行うこともできます。
```
npm install -g less
```
コードをコンパイルする:
```
lessc input.less output.css
```

LESSは、適切なプラグインとビルドツールを使用してファイルを変更するときに自動コンパイルもサポートします。

類似のものにはどんなものがありますか？

SASSとLESSに加えて、CSSを操作するための他のツールもあります。

Stylus —柔軟な構文や色とインデントを操作するための便利な機能など、多くの機能を提供するもう1つの人気のあるプリプロセッサー。Stylusを使用すると、コードをさらに簡潔に記述でき、複数の構文をサポートできるため、さまざまなコーディングスタイルに便利です。
PostCSS は、CSSで動作するプラグインを使用できるツールであり、高度なカスタム機能に適しています。PostCSS を使用すると、すべてのブラウザでまだサポートされていない場合でも、最新の CSS 機能を使用できます。PostCSSは完全なプリプロセッサーではなく、書かれた後にCSSファイルを操作するためのツールですが、強力な機能を備えており、SASSやLESSと一緒に使用されることが多いです。

これらのツールにはそれぞれ利点がありますが、SASSとLESSはその柔軟性と使いやすさから最も人気のあるものの1つです。どちらを選ぶかは、開発者の好みとプロジェクトの特性によって異なります。

まとめ

SASSとLESSは、CSSの操作を大幅に簡素化できる強力なツールです。変数、ミックス、ネストされたルールなどを使用できるため、コードを構造化して使いやすくなります。ウェブ開発が初めての場合でも、SASSとLESSを学ぶことはスキルを向上させるための素晴らしいスタートです。プリプロセッサは、ルーチンタスクを自動化し、コードの重複を回避し、スタイルをよりモジュール化してサポートするのに役立ちます。

SASSとLESSはコードをより読みやすくし、サポートを簡素化します。これは、大規模プロジェクトでは特に重要です。たとえば、変数とミックスのおかげで、各ファイルを手動で編集するのではなく、1つの場所で値を変更するだけで、プロジェクトのデザインを簡単に変更できます。

SASSとLESSの基本を理解したところで、次のプロジェクトにこれらのツールを追加してみてください！違いを感じ、CSSを使用することがいかに簡単になるかを理解するでしょう😎。ミックス、継承、ネスティングを試すことを恐れないでください。これにより、スタイルがよりプロフェッショナルで柔軟になります。

SASSとLESS：CSSプロセッサのガイド

SASSとLESSとは何ですか？

プリプロセッサーが必要な理由

理論を読むのに疲れた？
コーディングの時間だ！

SASSとLESS：主な機能

変数

ネストルール

ミキシナ

継承（拡張）

SASSとLESSの操作方法

SASSの使用を開始する

LESSの使用を開始する

類似のものにはどんなものがありますか？

まとめ

記事は気に入った？
実践の時間だ！

SASSとLESS：CSSプロセッサのガイド

SASSとLESSとは何ですか？

プリプロセッサーが必要な理由

理論を読むのに疲れた？ コーディングの時間だ！

SASSとLESS：主な機能

変数

ネストルール

ミキシナ

継承（拡張）

SASSとLESSの操作方法

SASSの使用を開始する

LESSの使用を開始する

類似のものにはどんなものがありますか？

まとめ

記事は気に入った？実践の時間だ！

理論を読むのに疲れた？
コーディングの時間だ！

記事は気に入った？
実践の時間だ！