この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
Sassとは
Sass (Syntactically Awesome Stylesheets)は、CSSを拡張した高機能なCSSのメタ言語で、Web開発において高い生産性を実現するために使用されます。
SassはCSSに変数、関数、演算、などの機能を追加し、CSSの記述をより効率的かつ柔軟にすることができます。
SassとSCSSの違いと記述方法
Sassには、SassとSCSSの2つのバージョンがあります。
SassとSCSSの違いは、構文の違いです。 Sassは括弧やセミコロンを省略することができ、記述が比較的簡潔です。一方SCSSは、CSSと同じような構文を持ち、Sassの機能も使用することができます。 SCSSは、CSSとの互換性が高いため、CSSとの統合も容易です。
- SCSS (SASS with CSS syntax)
- CSSと同じ構文を使用します。
- .scssという拡張子を使用します。
- Sass (indented syntax)
- インデントを使用して要素を階層化します。
- .sassという拡張子を使用します。
// SCSS $primary-color: #333; .container { width: 100%; color: $primary-color; h1 { font-size: 2rem; } } // Sass $primary-color: #333 .container width: 100% color: $primary-color h1 font-size: 2rem
Sassのメリットと特徴
Sassには以下のようなメリットがあります。
変数が使える
Sassは変数を使用することができ、色やフォントサイズなどのスタイルを変数に格納し、再利用することができます。これにより、スタイルの変更が必要な場合に、一箇所の変数を更新するだけで、すべてのスタイルを更新することができます。
$primary-color: #333; .container { color: $primary-color; }
ネストできる
Sassでは、セレクタを階層的に記述することができます。これにより、親要素と子要素の関係を明確にし、スタイルシートの見通しを良くすることができます。
.container { width: 100%; h1 { font-size: 2rem; } }
演算ができる
Sassでは四則演算ができるため、色やサイズなどのスタイルを演算することができます。これにより、スタイルの変更が必要な場合に、演算を使用して、スタイルを変更することができます。
ミックスインをつかって簡単にスタイルを使い回せる
ミックスインを使用して、複数のクラスを組み合わせることができます。これにより、同じスタイルを複数のクラスで共有することができます。@mixinを使用して、スタイルを定義し、@includeを使用して、それを適用します。
@mixin clearfix { &::after { content: “”; display: table; clear: both; } } .container { @include clearfix; }
関数が使える
SASSでは、計算をするための関数を使用することができます。例えば、色の計算や文字列の操作などができます。
$base-color: #333; .container { color: lighten($base-color, 20%); }
Sassのデメリット:
Sassには以下のようなデメリットがあります。
コンパイルが必要
SassはRubyで書かれており、Rubyのインタプリタを使用して、SassのコードをCSSに変換する必要があります。開発者はSassのコンパイルを行う必要があります。
学習コスト
SassはCSSの拡張機能を持っているため、学習コストが高いと言われています。
スタイルシートが大きくなる
Sassは変数や関数などを多用するため、スタイルシートが肥大して、読みにくくなる、またはファイルサイズが大きくなりやすいです。
