コーディングをしていく上でCSSを記述するのに時間がかかってしまうと感じていませんか？
今回はそんな悩みを解決してくれるSassについて解説します！
最後まで見ていってください！
Sassとは
「Sass (サス、サース)」とは、CSSのメタ言語です。
メタ言語とは拡張言語とも呼ばれ、ある言語書くための別の言語で、SassはCSSを効率的に書くために拡張した言語ということになります。
Sassは「Syntactically Awesome StyleSheet」の略で「構文的に素晴らしいスタイルシート」という意味です。
CSSは修正する際にひとつひとつ変更する必要があるというデメリットがありますが、Sassはその点を補い、記述量を減らし、作業を効率化できます。
Sassの主な機能
- 四則演算
- ネスト(入れ子)
- 変数
- 関数
- mixin・継承
- モジュール化
四則演算
値を足したり引いたりかけたり割ったりすることができ、変数と組み合わせて使用すると便利です。
ネスト(入れ子)
CSSではセレクタを独立させて記述しますが、Sassでは親子関係にあるセレクタを「{} (波かっこ)」を使用して入れ子にし、まとめてスタイルを適用することができます。
親子関係の可読性も上がります。
変数
よく使う項目(サイトのカラーや横幅など)を変数で指定しておくと、変更があった際に変数の値のみを変えればいいので効率性が上がります。
関数
引数に値を入れれば処理をして値を返してくれるのでとても便利です。
mixin・継承
定義したスタイルに引数を持たせることができます。
関数は値を返してくれるのに対して、ミックスインはスタイルを返してくれるので、共通して使用するボタンのスタイルを指定しておくのに便利です。
継承は引数を持たないスタイルで、使いまわすことが可能です。
モジュール化
ファイルを分割し、最終的に一つのスタイルシートに統合することができるので、管理がしやすくなります。
例えば、ヘッダーやフッター、ページごとにファイルを分けておくことができます。
詳しいSassの書き方についてはこちらの記事をご覧ください！
Sassの仕組みについて
SassはCSSの拡張言語のため、ブラウザでは読み込むことができません。
なので、コンパイルする必要があります。
「コンパイルする」とは、「Sassファイル」を「CSSファイル」に書き換えることでSassが反映されるようにすることです。
SCSS記法とSASS記法について
Sassには「SASS記法」と「SCSS記法」の2つがあります。
SCSS記法
SCSS記法はCSSの記法に近いので、CSSを使用したことがあれば直感的に書きやすいので一般的にはこちらが使用されています。
SCSSで記述されたファイルの拡張子は「.scss」です。
以下のように記述します。
<section>
<h1>見出しが入ります</h1>
</section>
section{
background-color: green;
h1{
font-size: 32px;
}
}SASS記法
最初の頃はこちらが使用されていました。
「{} (波かっこ)」や「; (セミコロン)」が省略され、SCSSより簡略化されているという特徴がありますが、CSSと記述方が異なり、あまり普及しませんでした。
@mixinや@includeなどを記号で表したり、インデントを使用したり、「: (コロン)」の後には半角スペースを使用するルールがあります。
SASSで記述されたファイルの拡張子は「.sass」です。
以下のように記述します。
<section>
<h1>見出しが入ります</h1>
</section>
section
background-color: green
h1
font-size: 32px
まとめ
今回はSassについて解説しました。
いかがだったでしょうか？
一度Sassを使い始めるとCSSには戻れなくなるほど開発スピードが上がります。
別投稿にてコーディングについても解説していきますので、そちらもぜひチェックしてみてください！
コメント