目次
SASS（Syntactically Awesome Stylesheets）は、変数を使用できるCSSプリプロセッサです。
数学演算、ミックスイン、ループ、関数、インポート、およびその他の興味深い機能
これにより、CSSの記述がはるかに強力になります。Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。SassはCSSのすべてのバージョンと完全に互換性があります。
それは変数を提供します:
変数は、スタイルシート全体で再利用したい情報を格納する方法と考えてください。
色、フォントスタック、または再利用したいと思うCSS値などを保存できます。
Sassは$記号を使用して、何かを変数にします。
次に例を示します:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sassが処理されると、$font-stackと$primary-colorに定義した変数と
CSSに配置された変数値を使用して通常のCSSを出力します。これは、作業時に非常に強力になる可能性があります
ブランドカラーを使用し、サイト全体で一貫性を保ちます。
ネストされた構文を使用します:
HTMLを書くとき、あなたはおそらくそれが明確なネストされた視覚的な階層を持っていることに気づいたでしょう。一方、CSSはそうではありません。
Sassを使用すると、HTMLの同じ視覚的階層に従う方法でCSSセレクターをネストできます。
ルールが過度にネストされると、CSSが過剰に修飾され、保守が困難になる可能性があることに注意してください。
一般的に悪い習慣と見なされます。
これを念頭に置いて、サイトのナビゲーションの一般的なスタイルの例を次に示します。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
ul、li、およびセレクターがnavセレクター内にネストされていることに気付くでしょう。
これは、CSSを整理して読みやすくするための優れた方法です。
ミックスインが含まれています：
CSSのいくつかのことは、特にCSS3と存在する多くのベンダープレフィックスを使用して、書くのが少し面倒です。
ミックスインを使用すると、サイト全体で再利用するCSS宣言のグループを作成できます。
それはあなたのSassを非常に乾いた状態に保つのに役立ちます。値を渡して、ミックスインをより柔軟にすることもできます。
これがテーマの例です。
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
ミックスインを作成するには、@mixinディレクティブを使用して名前を付けます。ミックスインテーマに名前を付けました。
また、括弧内に変数$ themeを使用しているため、必要なテーマを渡すことができます。
ミックスインを作成したら、@includeで始まりその後に続くCSS宣言として使用できます。
ミックスインの名前。
分割統治することができます：
幸い、SASSには@importルールがあります。 @importを使用すると、コードをモジュール化して簡単にできます
小さいSASSファイルをインポートして維持します。これとCSS@importルールの違いは
インポートされたすべてのSCSSファイルは1つのCSSファイルにマージされるため、最終的には1つのHTTPのみになります。
一意のCSSファイルをWebサーバーに提供するため、呼び出しが要求されます。
SCSS/SASSファイルのインポートは本当に簡単です。
@import "source/font-awesome";
@import "source/slick";
@import "framework/bootstrap";
@import "my-custom-theme";
CSS（Cascading Style Sheets）を作成することは、HTML要素をどのように表示する必要があるかを効果的に説明するために重要です。
Webページで、スタイル、デザイン、レイアウト、および見事なWebサイトを作成するために必要なすべてを定義します。
しかし、大規模で複雑なサイトで作業を始めると、CSSの方が優れているのではないかと思うかもしれません。
あなたがこれらの考えを持っているならば、おめでとうございます！ SASSの時が来ました。
