SASS：現代のWeb開発のための究極のガイド

CSSの寿命が進むにつれ、現在スタイルシート言語で提供されているものよりも、組織をより詳細に制御し、より優れたワークフローを持つことがますます重要になっています。 このニーズは、LESS、PostCSSなどのCSSプリプロセッサによって満たされ、おそらく最も人気があります。 サス。 この投稿では、プリプロセッサとは何か、プリプロセッサがCSSワークフローにこのようなポジティブな影響を与える理由、およびSassの使用を開始する方法について説明します。

CSSプリプロセッサとは何ですか？

CSSプリプロセッサーは、基本的に、小さな構文のバリエーションを持つCSSコードを通常のCSS3に変換するスクリプト言語です。 Sassの場合、これはもともとRubyで記述されたスクリプトですが、JavaScriptなどの他の言語を使用してNode.jsから利用できるポートがあります。

Sassを使い始める方法

Sassを使用するには、さまざまなオプションがあります。 コマンドラインには、元のRuby gem、つまり Node.jsポート、またはGulpやGruntなどのタスクランナーを使用します。 GUIを使用したい場合は、Compass、CodeKit、Hammerなどの推奨事項がいくつかあります。

これらすべてのプログラムが行うことは、XNUMXつのスタイルシートからSassコードを取得することです（a .sass or .scss ファイル）、その後、通常のファイルにコンパイルします .css ファイル。 各オプションには長所と短所がありますが、どこから始めればよいかわからない場合は、GUIプログラムのXNUMXつから始めるのがよいでしょう。

Variables

Sassの最も便利な機能のXNUMXつは、変数を作成する機能です。 他の適切なプログラミング言語と同様に、変数に値を割り当てて、いつでもそれを呼び出すことができます。 Sassの変数は、 $ 名前の前に署名します。例：

$ mainColor：＃dbcbb4;

これは少なくとも1つの理由で役立ちます。2.同じ色または他の値を再利用したい場合は、変数を再利用するだけでよく、一般的なスタイルを覚えておく必要はありません。 XNUMX.複数のセレクターの値を変更する必要がある場合は、変数のXNUMXつの値を変更するだけです。

ネスティング

SassのもうXNUMXつの便利な機能は、宣言を相互にネストできることです。 これは、異なる宣言が相互にどのように関連しているかを示すのに役立ちます。 例として、次のように書く代わりに：

.container {width：800px; } .container h1 {font-size：40px; }

あなたは単に書くことができます：

.container {幅：800px; h1 {フォントサイズ：40px; }}

機能

Sassには多くの組み込み関数があり、CSSコードを実際に操作できます。 以下はほんの数例です。

XNUMXつの色を混ぜる：

mix（$ primarycolor、$ secondcolor）

色を暗くします（ $amount どれだけ暗くするかという値です）：

暗くする（$色、$量）

数学

別の便利な機能は、数式をマークアップに適用する機能です。 プログラミング言語で通常サポートされているすべての演算子を使用できます。加算、減算、除算、乗算、モジュロ、等式、不等式です。

注意すべき点のXNUMXつは、値の単位を混在させることはできないということです。 したがって、以下が有効である間：

$ menu-height：100％-20％;

以下は不可能です。

$ menu-height：100％-40px;

Sassの一般的な使用例

以前の投稿では、Sassのセットアップと、ファイルを標準のCSSに変換できることについて説明しました。 この投稿では、Sassを最大限に活用するための最も一般的な手法のいくつかについて説明します。これにより、さまざまなスタイルルールを非常に簡単に記述できるようになります。

ミックスイン

さまざまなCSSプロパティに対するさまざまなレベルのブラウザーサポートでは、ブラウザー間の互換性を確保するために、プロパティにさまざまなベンダープレフィックスを提供する必要があるのが一般的です（特にInternet Explorerのサポートが必要な場合）。

P {
  -webkit-transform：scale（2）; 
      -ms-transform：scale（2）;
          変換：scale（2）;
}

 

これは、さまざまなレベルのサポートがあるプロパティごとに繰り返し実行しなければならない苦痛です。 サスを使う ミックスイン コードの大きなセクションを繰り返す必要がある場合はいつでもプロセスを簡略化できます。

のコードを使用して transform 上記のプロパティを例にすると、これを再利用可能なミックスインに簡単に変換して、 transform: scale() ルール：

@mixin transform-scale（$ x）{
    -webkit-transform：scale（$ x）;
        -ms-transform：scale（$ x）;
            変換：scale（$ x）;
}

 

上記のミックスインで、それぞれをスケーリングする量を定義します transform $x 引数。 このミックスインは、次を使用して、任意のSassコードブロックで使用できます。 @include 事前のステートメント：

P {
    @include transform-scale（2）;
}

 

ループ用

JavaScript、PHP、Pythonなどのプログラミング言語と同様に、Sassでは、 for ループ、定義された回数を繰り返します。 を使用して定義 @for キーワードの場合、Sass forループの長さは、「xからy」または「xからy」のXNUMXつの異なる方法で示すことができます。 x 出発点であり、 y 終点です。 でループを定義するとき through、ループは include 最終値（つまり、 1 through 10 ループに10が含まれます）が、 to ループに到達しますが、終了値は含まれません（つまり、 1 to 10 は1から9までです）。 使用例として 1 through 10:

@for $ i 1から10 {
    .col-＃{$ i} {幅：100％/ 10 * $ i; }
}

 

@for 上記のループは、 width 10の異なるCSSクラスへの計算（それぞれが .col- 1から10までの数字が続きます）。 ループは、CSSクラスごとに幅を設定し、100％/ 10にクラス数（1〜10）を掛けて定義します。 これにより、クラスごとに次のルールセットが生成されます。

.col-1 {
    幅：10％;   
}
.col-2 {
    幅：20％;
}
.col-3 {
    幅：30％;
}
.col-4 {
    幅：40％;
}
​,war
...
​,war
.col-10 {
    幅：100％;
}

 

これは、基本的なグリッド構造で列を定義するための迅速かつ簡単な方法です。

部分

Sassを使用する場合、適用するスタイルのタイプに基づいて、コードを再利用可能なセクションまたはファイルに整理することをお勧めします（たとえば、グリッドレイアウト用のファイル、ミックスイン用のファイル、配色用のファイルなど）。 。）。 Sassは、いわゆるモジュラーワークフローを使用してこのモジュラーワークフローを促進します パーシャル。 パーシャルは、アンダースコアで始まるSassファイルです（_）、 例えば _grid.scss。 次に、すべてのパーシャルのディレクトリ、次にこれらをインポートするXNUMX​​つのメインSassファイルを作成できます。 main.scss.

これらのパーシャルをメインファイルにインポートするには、単に @import ファイルの先頭にあるステートメント：

// main.scssファイル
​,war
@import 'グリッド'
@import 'mixins'

 

パーシャルを操作する場合、アンダースコアやファイル名拡張子を指定する必要はありません。 Sassはこれらを自動的に検出します。 これにより、パーシャルを簡単に使用してコードをより適切に整理できます。

 node-sassを使用してnpmスクリプトでSassファイルをコンパイルする方法

人気のあるSassプリプロセッサを通常のCSSにコンパイルする方法を選択するためのオプションは多数ありますが、LibSassエンジンを利用するコンパイラがますます一般的になっています。 当初はRubyで記述されていましたが、元のRuby gemまたはCompassなどのRubyベースのプログラムを使用してSassをコンパイルすると、コンパイル時間が遅いことに関するさまざまな批判がすぐに寄せられました。 全体的な速度。 パフォーマンスの不満に応えて、元のSassエンジンはLibSassとしてC / C ++に移植され、ほぼすべての一般的なプログラミング言語でSassエンジンを実行するために多数のラッパーが利用可能になりました。 このチュートリアルでは、Sassプログラミング言語を紹介し、ステップバイステップガイドも提供します node-sassラッパーを使用してSassコードをnpmスクリプトとして直接コンパイルする方法。 ご了承ください node-sass との使用を目的としています .scss ではなくファイル .sass、前者がより一般的で人気のあるオプションです。

Sass CSS Preprocessorについて

サス、または構文的に素晴らしいスタイルシートは、CSSプリプロセッサの例です。 レスポンシブウェブ開発者 XNUMXつの言語でコードを作成し、それをCSSに「変換」します。 SassはMITの下でライセンスされており、CSSとの互換性と非常に機能豊富なプログラミング言語を誇り、スタイルシートとコンピュータープログラムの特性の完璧な組み合わせとなっています。 この意味で、プログラミングに精通しているWebサイト開発者にとっては強力なツールですが、十分な練習でSassの操作方法を誰でも学ぶことができます。 また、Sass言語には、Sassy CSS（略してSCSS）と単にSassのXNUMXつのわずかなバリエーションがあります。 Sassy CSSは構文の点でCSSにはるかに似ていますが、Sassyは アプリ開発者 利便性が気になる方 後者のオプションは、中括弧とセミコロンを省略し、代わりにインデントに基づいてコードを読み取ります。

CSSに類似しているため、ほとんどの開発者とオンラインドキュメントソースはSCSS構文を使用することに注意してください。 さらに、WebブラウザーはSassまたはSCSSファイルを読み取らないことに注意してください。 したがって、Webサイトをインターネットに公開する前に、すべてのSCSS / SassファイルをCSSに変換する必要があります。 これを行う方法の説明については、以下の「SCSSからCSSファイルへの変換」を参照してください。

Sassのセットアップ

Node.jsとNPMをインストールする

Node.jsをまだインストールしていない場合は、最新バージョンをダウンロードできます。 公式サイト。 この用語に慣れていない場合、Node.jsはJavascriptの人気のあるランタイム環境です。 Nodeには、公式のNode Package Managerであるnpmが事前にパッケージ化されており、開発者はオープンソースのJavascriptコードにアクセスできるため、同時にインストールされます。 （興味がある場合、またはnpmを個別にインストールする必要がある場合は、 公式ウェブサイト npmの場合。）npmが正常にインストールされたことを確認するには、次を実行します。 npm -v ターミナルで、現在コンピューター上にあるnpmのバージョンを確認します。 このブログ投稿が更新されたとき、リリースされたnpmの最新バージョンは 6.7.0.

node-sassをインストールする

npmをインストールしたら、node-sassをインストールします。 あなたは実行することによってそうすることができます npm install -g node-sass ターミナルでパッケージをグローバルにインストールする（つまり、システム全体で利用できる）か、実行します npm install node-sass なしで -g 現在のディレクトリにのみインストールするフラグ。

プロジェクトのセットアップ package.json

と仮定すると node-sass これでグローバルにインストールされました。Sassファイルを監視するプロジェクトディレクトリを作成または選択します。 プロジェクトディレクトリに移動し、次のコマンドでプロジェクトを初期化します。 package.json ファイル、実行することによって npm init.

プロジェクトに関するさまざまな詳細を入力するように求められます。 package name, version, description およびその他の詳細。 この情報を今すぐ入力するか、単に Enter これらのプロンプトごとに、後で入力します。

各プロンプトを循環した後、入力した情報（または情報を空白のままにする）を確認するプロンプトが表示されます。 Enterキーをもう一度押すと、 package.json ファイルが作成されます。

加えます node-sass スクリプト

Video Cloud Studioで package.json 任意のテキストエディタでファイルを作成し、次の行を "scripts" オブジェクト：

"scss": "node-sass --watch assets/scss -o assets/css"

上記の行は伝えます npm スクリプトの実行、変更の監視 .scss のファイル assets/scss ディレクトリに移動し、これらの変更を対応するCSSファイルにコミットします。 assets/css ディレクトリ。 それに応じてディレクトリのパスを変更する必要があります。

あなたの編集 package.json ファイルは次のようになります。

{
  "名前": 「sass-ex」,
  "バージョン": "1.0.0",
  「説明」: "",
  "メイン": 「index.js」,
  「スクリプト」：{
    "テスト": "echo \"エラー：テストが指定されていません\ "&& exit 1",
    「scss」: 「node-sass」 --watch 資産/SCSS -o 資産/CSS"
  },
  「著者」: "",
  "ライセンス": 「GO」
}

 

ファイルを保存して閉じます。 プロジェクトディレクトリのルートで、次を実行します。 npm run scss の変更を監視し始める .scss ファイル。

Sassをインストールする別の方法

Sassのインストールにはさまざまな方法があることに注意してください。 たとえば、次のような有料および無料のアプリケーションを介してSassをインストールできます。 コードキット および スカウトアプリ。 さらに、からパッケージをダウンロードしてSassをインストールすることもできます。 公式Githubサイト パスに直接追加します。

Sassを使用した設計の概要

前述のように、SassにはWebサイト開発者にとって強力なツールとなる多くの有益な機能が備わっています。 Sassは、基本的なプログラミング言語からこれらの特徴を採用しました。このブログ投稿のいくつかについて、以下で説明します。 これらの機能のより完全なガイドとコードにそれらを実装する方法については、公式ガイドにアクセスしてください SassのWebサイト.

Variables

プログラミングと同じように、スタイルシート全体でSassに変数を作成して実装できます。 これは、Webサイト全体で使用したい特定のスタイル（たとえば、フォントパッケージのタイプ、色など）がある場合、それを変数に格納してスタイルシート全体で使用できるため、非常に便利です。 Sassで変数を宣言することは、Javascriptと概念的に同じであるため、プログラマにとって特に簡単です。 たとえば、あなたが宣言した場合 $primary-color: #525; （$ variable：value;）スタイルシートの最初に、次のように入力できます $primary-color 任意のカラー値。

ネスティング

HTMLと最も一般的なプログラミング言語は、インデントまたはネストを使用してクリーンな構造を維持します。 一方、従来のCSSスタイルシートは、さまざまなスタイルのかなり長くて雑然としたリストです。 しかし、Sassを使用すると、他のコード内に異なるコードブロックを配置して、スタイルシートを読みやすくすることができます。 たとえば、従来のナビゲーションバーのスタイルの内側に、リストアイテムの配置とテキストのスタイルを設計するためのコードをネストできます。 ネストによるコードのこの視覚的な階層は、多くの開発者がWebサイトでのSassの使用に引き付けられるもうXNUMXつの理由です。

SASSファイルのインポート

WebサイトとHTMLドキュメントがより複雑になると、通常、CSSファイルも同時に増加します。 ただし、より多くのスタイルを作成すると、最終的にはスタイルシートが乱雑になり、整然とした方法で保守および記述することが難しくなります。 さいわい、Sassを使用すると、スタイルシートを複数のSassファイルに分割できます。 Webサイトを起動する準備ができたら、複数のSCSSファイルをXNUMXつのマスタースタイルシートに結合し、インポート機能を介してこれをHTMLドキュメントにリンクできます。 CSSとは異なり、単一のSass「マスター」スタイルシートをロードするのに必要なHTTPリクエストはXNUMXつだけです。 CSSでは、クライアントはインポートされた各スタイルシートに対してHTTPリクエストを行います。 スタイルシートをインポートするには、キーワードを書くだけです @import 引用符で囲まれたサブスタイルシートの名前（@import 「スタイルシート」;）。 これは、Webサイトの管理プロセスを簡素化するSassのもうXNUMXつの重要な機能です。

ミックスインの使用

プログラミングの経験を持つほとんどの人は、プログラムで関数やメソッドを書くことに慣れています。 ただし、従来のCSSファイルはこの機能をサポートしていません。 幸い、Sassを使用すると、開発者はミックスイン、またはグループ化されたCSS宣言のグループを記述して、スタイルシートのどこにでも繰り返し使用できます。 ミックスインは基本的に関数と同等です。 入力値を受け入れて、ミックスイン内にグループ化されたCSS宣言にプラグインできます。 ミックスインを作成するには、単に @mixin mixinName(value) 入力された値を使用するCSS宣言が続きます。 スタイルシートでこのミックスインを呼び出すには、キーワードを記述します @include 続いて、ミックスインの名前と値（該当する場合）。 SassのMixinsは、繰り返しの少ないコードを作成することにより、強力で効率的なWebサイトデザインへの道を確実に開きます。

継承とその他のディレクティブの使用

Sassを使用したWebサイト開発を通じて実装できるもうXNUMXつの強力なプログラミング機能は、継承です。 Sassではこれを「拡張」セレクターと呼ぶことができます。 の使用で @extend、セレクターは他のセレクターのCSSプロパティを継承できるため、反復的なコードが不要になるため、コードが大幅に簡略化されます。 これにより、キーワードでセレクターを「オンにする」だけで、スタイルシートの柔軟性が高まります。 @extend。 この機能を使用するには、単に % このセレクタのCSSプロパティを拡張できることを示すために、前に記号を付けます。 これで、別のセレクターを作成するときに、次を呼び出すことができます @extend %selectorName; そしてそのプロパティはその新しいセレクターによって継承されます。

一方、 @extend 関数はSassの支持者の間で非常に人気があります。Sass言語に統合された多くの基本的なプログラミング関数があります。 たとえば、ほとんどのプログラマーは条件文の使用に慣れています。 現在、Sass開発者は @if および @else より強力なウェブサイト開発につながるディレクティブ。 同様に、従来のforループとwhileループに精通しているユーザーは、これらのJava関数を @for および @while ディレクティブ

演算子の使用

プログラマーは常に数学的に駆動されるアルゴリズムを使用します。 一方、従来のCSS設計では、数学の使用はほとんどありません。 幸い、Sassでは、開発者が基本的な演算子（+、-、*、/、％）を使用してCSS宣言のピクセル値またはパーセント値を計算できます。 これは、より複雑なWebサイトを作成したいデザイナーにとっては、小さいながらも非常に実用的なツールです。 Sassの公式ドキュメントによると、Sass開発者が使用できる数学駆動型関数のライブラリもあります。 実際、ほとんどのプログラマーはおそらく、ライブラリ内のこれらの関数の多くに精通しているでしょう。 次のような機能が含まれています abs($number) 絶対値を見つけるには min($numbers…) 複数の値の最小値を見つける random() ランダムな数値を返します。 Sassで利用可能なすべての機能を表示するには、 公式ドキュメントサイト サスのために。

SCSSからCSSファイルへの変換

Sassを使用してHTML要素のデザインを終えたら、いよいよWebサイトを公開します。 ただし、WebサイトをロードするときにSCSSファイルを直接使用することはできません。 代わりに、ファイルをCSSに変換する必要があります。 コマンドラインからインストールできるSass gemでは、さまざまな実行可能ファイルを利用できます。 Sass gemをインストールしていない場合は、別のソースでSass実行可能ファイルを実行することもできます。

• sass or $ bundle exec sass：ソースSassファイルをCSSファイルに変換するために使用されます。 走る sass --help 詳細については、詳細をご覧ください。
• sass-convert or $ bundle exec sass-convert：Sass、SCSS、CSSファイル間の変換に使用されます。 走る sass-convert --help 詳細な手順については。 これは、SCSS形式に切り替えたい既存のプロジェクトに最適な実行可能ファイルです。

その他のCSSプリプロセッサ

スタイラス

SassをモデルにしたStylusは、CSSプリプロセッサのもうXNUMXつの非常に人気のある代替品です。 多くのユーザーをStylusに引き付ける特に便利な機能は、その非常に動的で柔軟な言語と構文です。 中括弧、コロン、セミコロンなどの句読点を省略するオプションがあります。 特定のキーワード（たとえば、 @mixin）必要に応じて。 Sassと同様に、Stylusは、関数/ミックスイン、変数、反復、継承などの多くの強力なプログラミング機能を統合しています。 Stylusの特に便利な機能はCSSリテラルです。 @css。 このキーワードは、スタイラスがリクエストに対応できない場合にCSSタイプに戻すために使用できます。

もっと少なく

Leaner Stylesheetsの略であるLessは、別のCSSプリプロセッサオプションで、その代替案と非常に似ています。 多くの組み込みプログラミング機能を提供します。 これには、変数の作成、ミックスインの使用、コードのネスト、組み込み関数のライブラリの利用が含まれます。 Stylusとは異なり、Lessの構文はより厳密です。 実際、従来のCSSコードの構文を実際に複製します。 あなたの個人的な好みに基づいて、あなたはこれを長所または短所として見るかもしれません。

 

SASSとLESS

SASSとLESSが何であるかを理解するには、いくつかの基本を理解する必要があります。 それでは、CSSプリプロセッサについて説明することから始めましょう。 CSS前処理は、プログラマーがXNUMXつの言語でコードを作成するときにCSSを拡張するために使用するスクリプト言語です。 次に、CSSプリプロセッサはそれをCSSにコンパイルします。 SASSはこの最も人気のある例です CSS LESSやStylusのような他のものはあまり知られていませんが、プリプロセッサ。

SASSとは何ですか？

SASSはSyntheticallyAwesome Style Sheetsの略で、ユーザーが変数、インラインインポート、ネストされたルールなどのいくつかのものをコードに追加できるようにします。 SASSはまた、ユーザーがコーディングプロセスを通じて物事を整理し、これらのシートの取り扱いを容易にするのに役立ちます。 SASSは CSSのすべてのバージョン ただし、所有者はシステムにRubyをインストールする必要があります。

SCSS

同様に、SCSSは、ブラウザー用のCSSスタイルシートをアセンブルするRubyの特別なファイルタイプです。 つまり、SCSSはCSSに似ていますが、コーディングのフォーマットが優れていると言えます。

LESSとは何ですか？

LESSはLearnerStyle Sheetsの略で、CSSで使用される下位互換性のある言語拡張機能です。 CSSと同じように見えるので、LESSを学ぶのはかなり簡単です。 LESSを使用して、ルールをルール内にネストすることができます。これにより、ルールは外部ルールセレクター内に適用されます。

これにより、開発者と設計者は、ドキュメントのDOM構造に従って独自のCSSルールを追加できます。 これらのネストされたルールにより、コードを実行する際の理解と従いが容易になります。

LESSまたはSAAS：何を使用すればよいですか？

LESSがSAASよりも優れているか、またはその逆であるかを理解することは非常に困難ですが、それらの機能を比較して、XNUMX人のユーザーがどちらを選択すべきかをより明確に理解することができます。 SASSとLESSの比較分析を行って、どちらが優れているかをよりよく理解しましょう。

SASSとLESSはどちらも同様の機能とミックスインを使用します。 ただし、SASSはRubyを基本言語として使用します。 一方、LESSは コーディング用のJavaScript。 コーディング言語の違いは、これらの言語のいずれにもまだ優位性を与えていません。

LESSを使用すると、ユーザーは特定の条件下でのみミックスインを使用できます。 これは便利な機能のように聞こえますが、LESSの論理リンク制限についても説明しています。 SASSは、異なるアプローチを提供します。 たとえば、SASSを使用すると、ユーザーはプログラミング中にループやケース指向の区別を利用できます。

SASSは、ユーザーにSCSSまたはインデントされた構文を使用する自由を与えます。これにより、CSS規則に従うか、CSS規則から逸脱する自由が与えられます。 ただし、LESSのコードは自動的にCSSのスーパーセットになります。 SASSは、その機能だけでなく、古い言語であるため、開発コミュニティの間でより人気があります。

SASS、SCSS、LESSのどちらが良いですか？

SASS、SCSS、およびLESSの個々の特性を見て、これらのCSS拡張機能のどれが開発者に適しているかを確認しましょう。

SASS

• SASSは、CSSの繰り返しを減らして時間を節約するのに役立ち、CSSの拡張機能です。 これは、Ruby言語でコード化されたCSSのスーパーセットです。
• SASSには構文があり、読み取り可能な形式でCSSにコンパイルします。
• SASSは構文エラーを報告できます
• ユーザーが関数を作成し、ユーザーのコンテキストで使用できるようにします。
• SASSはミキシングを使用して、使用および再利用できるスタイルを作成します
• SASSは知識ベースに重点を置いているため、ビジュアルはありません

もっと少なく

• LESSは、ユーザーがWebサイトのスタイルシートを維持、カスタマイズ、管理、および処理するのに役立ちます。 これは動的言語であり、いくつかのブラウザーで動作します。
• JavaScriptで開発され、冗長性を減らすために使用されるCSSのスーパーセットになります
• 正確なエラーとエラーの場所について説明します
• JavaScriptを介して値を操作するのに役立ちます。これにより、色、ラウンド関数、天井関数などを変更できます。
• LESSはMixensも使用します。
• LESSは、手順を簡単に実行できる魅力的なビジュアルを備えたドキュメントを提供します。

SCSS

• SCSSは、CSSで追加機能を可能にするSASS用の特別なタイプのファイルです。
• SCSSは構文コードを必要としません
• SASSSとは異なり、SCSSは厳密なインデントに従う必要はありません。
• SCSSは文体のSASSに似ていますが、角かっことセミコロンを使用する必要があります
• ファイル拡張子があります
• SCSSはSASSと比較して開発者コミュニティが小さいため、SCSSでのサポートも低くなっています。

BootstrapはSASSまたはLESSを使用しますか？

Bootstrapは、世界中の開発コミュニティに人気のある選択肢であり、Boostrap 3の期間中、LESSが市場に大きな影響を与えたため、SASSの代替手段を提供しました。 ただし、Boostrap 4を検討すると、状況は完全に変わります。これは、Boostrap4がSASSを完全に使用しているためです。 BoostrapのソースコードがSAASを使用するのはこれが初めてです。

したがって、SASSは将来のより安全な考慮事項であると言っても過言ではありません。 専門家は、SASSユーザーの数がLESSユーザーと比較してほぼXNUMX倍であるため、Boostrapがこの大胆な動きをしたと信じています。

CSSの代わりにLESSとSASSを使用する開発者が増えているのはなぜですか？

最近の 市場動向 さまざまな理由で、CSSの代わりにLESSとSASSを使用する開発者が増えていることを明らかにします。 たとえば、開始するプロジェクトは、CSSのいくつかのルールのみを必要としますが、プロジェクトが進むにつれてルールは複雑になります。 これにより、CSSの学習と、より高度なプロジェクトへの適応が困難になります。 したがって、人々は、本番環境に対応した機能を利用できるLESSやSASSなどのオプションを選ぶのが好きです。

同様に、CSSを介した開発には時間がかかり、タスクを完了するために必要な平均時間が長くなります。 JavaScriptのような他の言語は、進歩について伝えるために定期的な会議を開催しますが、CSSにはそのようなことはありません。 これらすべてのことにより、LESSとSASSはCSSよりもはるかに優れた代替手段になります。

とはいえ、SASSとLESSの両方が開発の世界で重要な役割を果たしていることは明らかです。 SASSは、LESSよりも早く業界に参入したにもかかわらず、依然として人気があります。 これらの拡張機能には両方とも長所と短所があり、それはすべてユーザーがそれらをどのように利用するかに依存します。

結論

全体として、Sassは優れたツールです ウェブサイト開発者 基本的なプログラミング機能でWebデザインを強化しようとしている人。 インストールが簡単なだけでなく、Sassの言語と構文もすぐに習得できます。

ミックスインや変数などのさまざまなプログラミング機能、およびSassの視覚的な階層により、より効率的で保守しやすいスタイルシートが作成されます。

この記事が、上記の最先端テクノロジーを試す際の参考になることを願っています。