sass と scss の違いは何ですか

Sass と scss は、CSS プリプロセッサ Sass によって提供される 2 つの異なる構文で、どちらも似ており、同じことを行いますが、異なるスタイルで記述されています。 SCSS は最新であり、Sass よりも優れていると考えられています。

まずは、CSS プリプロセッサ Sass が提供する 2 つの異なる構文 sass と scss について学びましょう。

sass は、インデント構文とも呼ばれ、Ruby に似たプログラミング言語です。

これは、Haml と呼ばれる別のプリプロセッサから来ており、Haml のシンプルさにインスピレーションを得て、Ruby 開発者によって設計および記述されているため、Sass スタイルシートは Ruby のような構文を使用します。 No

sass は、CSS と同様のシンプルさを好む人向けです。括弧やセミコロンの代わりに行のインデントを使用してブロックを指定するため、括弧はありますが、セミコロンはなく、厳密なインデントが使用されます。 Sass 構文のファイルには拡張子 .sass が使用されます。

例:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius.my-element
  color= !primary-color
  width= 100%
  overflow= hidden.my-other-element
  +border-radius(5px)

ご覧のとおり、これは通常の CSS と比較してかなりの変更です。変数フラグは「$」ではなく「!」、代入記号は「:」ではなく「=」です。これは少し奇妙です。

ただし、これは 2010 年 5 月にバージョン 3.0 が登場する前の Sass の外観であり、その後、Sassy CSS は scss と呼ばれるまったく新しい構文を導入しました。この構文は、CSS に優しい構文を導入することで、Sass と CSS の間のギャップを埋めることを目的としています。

scss は CSS の構文と同様、CSS 標準に完全に準拠しています。

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}
.my-other-element {
  @include border-radius(5px);
}

scss は明らかに sass よりも CSS に近いものです。

scss と sass の違い

sass 構文は Ruby に似ていますが、括弧の使用法では、厳密なインデントやセミコロンはありません。変数記号は「$」の代わりに「!」、代入記号は「:」の代わりに「=」です。

less 構文は CSS に似ており、中括弧とセミコロンの使用が必要です。変数記号は「$」、代入記号は「:」です。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がsass と scss の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。