CSSで複雑な形も簡単設定！実務でも使えるclip-pathの基本形状と応用例を紹介
みなと
フロントエンドクリップ
現場で使えるSassの8つの機能と導入ガイド！基本から実践まで
みなと
Sassについて聞いたことはあるけど、詳しくは知らないという方も多いのではないでしょうか。
私はフロントエンドエンジニア歴15年以上になりますが、その間、Sassには多くの場面で助けられてきました。
Sassは、CSSを書くうえでよくある「もう少し効率的にできないかな？」という悩みを解消してくれる便利なツールです。CSSが増えてくると、どうしても管理がごちゃごちゃしてしまいますよね。
この記事では、教科書的な内容ではなく、現実的に役立つSassの活用方法を交えながら、Sassの基本や導入方法、メリット・デメリットまでをわかりやすく紹介していきます。Sassがコーディングにどう役立つか、この記事が少しでもヒントになれば嬉しいです！
Sassとは
Sass（サス、Syntactically Awesome Style Sheets）は、CSSをもっと効率よく、柔軟に書けるようにしてくれる便利な言語です。日本語に翻訳すると「構文的に素晴らしくてイケてるスタイルシート」という感じです。
普段のCSSだと、どうしても同じようなコードを何度も書いたり、スタイルの管理が面倒になったりします。そこでSassを使うと、変数やネスト、ミックスインなどの機能が使えて、もっとスッキリと管理できるようになります。
純粋なCSSだけでやるのは大変？
今の時代、純粋なCSSだけで新規ページを作るのは、結構キツいです。Sassを使わないと時間も労力もかかりすぎてしまう場面が多いんです。
フロントエンドの開発環境といっても、いろいろありますよね。ECサイトやCMSなどの動的サイト、ReactやVue.jsなどのフレームワークベースのサイト、あるいは既存サイトの改修なんかだと、必ずしもSassが必要とは限りません。だから、どんな場面でも「Sassを絶対に使うべき」というのは極端かと思います。
Sassの使用が効果的なのは、LP（ランディングページ）とか企業のコーポレートサイトみたいな静的ページが中心のサイトを一からコーディングする場合です。こういうプロジェクトでは、デザインがしっかりレイアウトされていて、手作業でCSSを書き続けると非効率になることが多いです。そんなときに、Sassを使えば、コードをスッキリまとめて、作業がグンとラクになります。
どうしてSassは広く使われるようになった？
Sassが広く浸透した背景にはいろんな要因があると思いますが、私自身が感じているのは次の3つです。
要因1：CSS3の登場とフラットデザインの普及
まず、CSS3の登場がSassの普及に大きく影響したんじゃないかと思います。CSS3では、アニメーションやグラデーション、トランジションなど、表現力豊かなデザインが簡単に実装できるようになりました。ただ、その分コードが複雑化し、ベンダープレフィックスを使って各ブラウザに対応する必要が出てきました。Sassを使えば、こういった複雑な処理をまとめて管理できるので、大きなメリットになりました。
また、同じ頃にフラットデザインが流行し始めたことも、Sassの普及を後押ししたと思います。フラットデザインはシンプルで統一感のあるスタイルを重視するので、Sassの変数を使って色やフォントサイズを一括管理することで、デザインの一貫性を簡単に保つことができました。
さらに、レスポンシブデザインの登場によって、メディアクエリを使った異なるデバイスへの対応が求められるようになりました。Sassではメディアクエリをネストして（入れ子にして）書けるので、デバイスごとのスタイルをシンプルに整理するのに役立ちました。
要因2：CSS設計手法の進化
次に、CSS設計手法の進化もSassの普及に貢献したと思います。OOCSS、SMACSS、BEMといった設計手法は、CSSをモジュール化して、再利用性や保守性を高めるためのものです。これらの手法とSassのネストやミックスインの機能を組み合わせることで、より整理されたスタイルシートが書けるようになり、特にBEMのような複雑なクラス構造もわかりやすくまとめられるようになりました。
私も普段、BEMを応用した独自の書き方をすることが多いのですが、Sassがあることでコーディングの効率がグンと上がったと感じています。
要因3：タスクランナーとの相性
最後に、Sassはタスクランナーとの相性が良いことも、普及の一因だと思います。タスクランナー（gulpやGruntなど）を使えば、Sassのファイルを自動的にコンパイルしてCSSに変換するだけでなく、画像の圧縮やファイルの最適化といった作業もまとめて行えるため、開発作業全体が効率的に進みます。これで、Sassを使った作業がよりスムーズに進んで、プロジェクト全体の管理もグッとラクになりました。
もし、gulpの使い方や実践的な活用例についてもっと知りたい方は、こちらの記事も参考にしてください！
あわせて読みたい
実務で使える！初心者からプロまで役立つgulpの基本と応用ガイド
2つの記法
Sassには、SCSS記法とSASS記法という2つの書き方があります。それぞれちょっとした違いはあるんですが、最終的にはどちらを使っても同じ結果が得られます。好きな方を選んで使ってみてください。
SCSS記法
まず、SCSS記法は、普通のCSSに拡張機能を加えたような書き方です。基本形はCSSそのままなので、CSSに慣れている人なら、すぐに使えるようになるのがメリットですね。
ファイルの拡張子は「.scss」です
例えば、次のようなコードが書けます。
$main-color: #3498db;
body {
background-color: $main-color;
font-size: 16px;
color: #333;
header {
background-color: darken($main-color, 10%);
padding: 20px;
}
}このように、CSSと同じくセミコロン（;）や波括弧（{}）を使って、スタイルを整理します。SCSSでは、インデントを揃えなくても問題ありませんが、コードの読みやすさのために揃えるのがおすすめです。
さらに、SCSS記法では普通のCSSをそのまま書いてもエラーにはなりません。つまり、CSSファイルをそのままSCSSファイルにしても、問題なく動作します。
SASS記法
一方、SASS記法は、波括弧やセミコロンを使わない書き方です。インデント（字下げ）だけでコードを整理するスタイルで、SCSS記法よりも先に作られたオリジナルの記法です。
ファイルの拡張子は「.sass」です
例えば、同じスタイルをSASS記法で書くと、こんな感じになります。
$main-color: #3498db
body
background-color: $main-color
font-size: 16px
color: #333
header
background-color: darken($main-color, 10%)
padding: 20px最初はインデントの使い方に慣れが必要かもしれませんが、セミコロンや波括弧を省略できる分、コードがシンプルで見やすくなります。
どっちを選べばいい？
「どっちの記法を使うべきか？」と迷うこともあるかもしれませんが、両方試してみて、書きやすい方を選べば良いと思います。それぞれに特徴があるので、最終的には好みで選んで大丈夫です。
ただし、既存のCSSに部分的に変更を加える場合は、SCSS記法のほうが効率的な場合が多いです。SCSSはCSSとほぼ同じ書き方なので、既存のCSSに手を加えつつSassを導入したいときに特に便利です。
実際、使われている割合的にもSCSS記法のほうが多いみたいですし、この記事でも、この後に出てくるコード例はSCSS記法で書くことにしますね。
私個人としてはSASS記法を使うことのほうが多いです。理由は、余計な記述がない分、慣れてしまえばより速く書けるから。そして、インデントのおかげでコードの構造がわかりやすくなり、エディタでコードを折りたたむ機能を使うときにも、ブロック単位で管理しやすいというメリットがあるんです。
Sassのメリット
Sassにはたくさんの便利な機能がありますが、具体的な使い方や詳しい説明は後で紹介します。ここでは、Sassを使うことでどんなメリットがあるのかを簡単にお伝えしますね。
メリット1：コードが整理されてわかりやすくなる
CSSだけで書いていると、色やフォントサイズなどをページのあちこちに書き込むことになります。例えば、ボタンや背景の色を変更したい時、ファイル内のすべての色指定を探して修正するのはかなり大変です。
Sassでは、こうした色やフォントサイズを変数として定義しておけるので、一箇所を変えるだけで全体に反映されるんです。これだけで、後からの修正がすごくラクになります。それに、ネストを使えば、HTMLの構造に合わせてスタイルを書けるので、どこに何が適用されているのかが直感的に分かりやすくなります。
メリット2：作業が効率的に進む
CSSだけで同じスタイルを何度も書くのは手間がかかります。例えば、同じボタンデザインを複数箇所に書く場合、それを適用していくのは大変ですし、一部だけスタイルを変えたい場合はさらに面倒ですよね。
Sassのミックスインを使えば、一度作ったデザインを再利用できるだけでなく、「色だけ変えたい」「サイズだけ変えたい」といった場合にも柔軟に対応できます。例えば、基本のボタンデザインに対して、色だけ変えたバージョンを簡単に作ることができるんです。こうすることで、必要な部分だけカスタマイズしながらも、繰り返し書く手間を省けます。
メリット3：保守がラクになる
大規模なサイトになってくると、スタイルが増えてどんどん管理が大変になってきます。CSSだけでやろうとすると、どの部分にどのスタイルが適用されているのかを探すのも一苦労です。
Sassを使うと、スタイルシートをモジュール化して整理できるので、コードがごちゃごちゃしなくて済みます。ファイルを分けて管理できるから、「ヘッダーのスタイルはここ」「フッターはこっち」といった感じで見つけやすくなりますし、後からスタイルを変更したい時も必要な部分だけを修正すれば良いので、作業がスムーズです。
Sassのデメリット
Sassは非常に便利ですが、導入時には少しハードルを感じることもあります。
デメリット：初期設定が面倒
Sassを使うには、コンパイルしてCSSに変換する必要があります。これにはタスクランナーを設定したり、ツールを導入するなど、最初にちょっと手間がかかることも。特に初心者には、この設定が難しく感じるかもしれません。CSSならそのままブラウザで動くのに、Sassだとコンパイルを挟むのは少し面倒ですよね。
ただ、一度設定してしまえば、Sassの便利さが発揮され、作業効率が大幅にアップするので、最初のひと手間をかける価値は十分にあります。
実は昔、仕事関係の方から「Sassを使うといいよ」とアドバイスをもらったことがあったのですが、その時は自分のCSSでの作業にそこまで効率の悪さを感じていなかったので、すぐに導入しませんでした…。今思えば、もっと早くSassを取り入れていれば良かったです。
主な機能
Sassにはたくさんの便利な機能があります。ここでは、Sassの主要な機能を一つずつ紹介していきます。
機能1：ネスト
Sassのネスト（入れ子）機能を使うと、HTMLの構造に合わせてCSSを階層的に書くことができます。普通のCSSだと、階層が深くなるとセレクタが長くなってゴチャゴチャしますが、Sassならスッキリとまとめることができるんです。
例えば、こんな感じでSassを書くと…
.navbar {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: #333;
}
}
}
}コンパイルすると、こんなCSSになります。
.navbar ul {
list-style: none;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
text-decoration: none;
color: #333;
}ネストを使うと、どのスタイルがどの要素に適用されているかが見やすくなるので、後から修正するときもラクになります。
Sassを使えばネストができると説明しましたが、実は最近、純粋なCSSでもネストができるようになってきています。そのあたりを詳しく知りたい方は、こちらの記事を参考にしてみてください！
あわせて読みたい
CSSネストの7つの書き方をマスター！Sassとの違いもサクッと解説
機能2：変数
Sassの変数は、よく使う値を一箇所にまとめて管理できる、とても便利な機能です。例えば、テーマカラーやフォントサイズなんかを、ページのあちこちで使うことってありますよね。普通のCSSだと、色を変えたいときに、わざわざ全部の値を探して変更しないといけないので、手間がかかります。
でも、Sassの変数を使えば、こんな面倒な作業が一気にラクになります！例えば、以下のようにテーマカラーを変数にしておくと…
$primary-color: #3498db;
.navbar {
background-color: $primary-color;
}
.button {
color: $primary-color;
}コンパイルすると、こんな感じのCSSになります。
.navbar {
background-color: #3498db;
}
.button {
color: #3498db;
}もちろん、変数で管理できるのはカラーだけじゃありません。例えば、次のようなものも変数にしておくと効率的です。
- フォントサイズやフォントファミリー：全体の文字の大きさや種類を統一するのに便利
- 間隔（マージンやパディング）：レイアウトの間隔を一定に保つ
- ブレークポイント：レスポンシブデザインで使うメディアクエリのサイズ
- アニメーションの時間：トランジションやアニメーションの速さを統一
これらを変数にしておくと、後からデザインを変更したいときに、一箇所を変えるだけで全体に反映できるので、とても効率的です。
自分が管理することで効率化されると思うものは、上記の例にとらわれず、自由に変数で管理してみてください！
機能3：四則演算
Sassでは、四則演算（足し算、引き算、掛け算、割り算）が直接使えます！CSSでもcalc()を使って計算できますが、Sassの四則演算にはそれ以上の便利さがあります。
例えば、最近では高解像度ディスプレイに対応するため、デザインカンプから画像を2倍の大きさで書き出し、CSSには画像サイズの半分の値を指定することがよくあります。そんなとき、Sassの計算がとても役に立ちます。
.image {
width: 240px / 2;
height: 180px / 2;
}コンパイルすると、こんな感じのCSSになります。
.image {
width: 120px;
height: 90px;
}これで、わざわざ計算結果をいちいち手で入力しなくても、Sassが自動的に処理してくれます。
また、CSSのcalc()と違って、Sassの計算結果はコンパイル後のコードに直接反映されるので、ブラウザが処理する負担を減らせるというメリットもあります。
さらに、Sassで計算式を残しておくと、後から「なんでこの値にしたんだっけ？」となることが少なくなります。計算式がそのままコードに残っているので、値の意図がわかりやすく、修正もしやすくなるんです。
機能4：ファイルの分割
Sassのファイルの分割は、大きなプロジェクトを効率的に管理するのに欠かせない機能です。普通のCSSだと、全部のスタイルを一つのファイルに書き続けると、すぐにゴチャゴチャして管理が大変になっちゃいます。でも、Sassなら、スタイルを細かくファイルに分けて整理することができます。
例えば、ヘッダーやフッター、ボタンなど、それぞれのパーツごとにファイルを分けておくと、あとからどこに何が書かれているのかが一目でわかるようになります。
// _header.scss
.header {
background-color: #333;
color: #fff;
}
// _footer.scss
.footer {
background-color: #222;
color: #ccc;
}これらのファイルをパーシャルと呼びます。パーシャルファイルはアンダースコア（_）で始めるのがポイントです。アンダースコアをつけることで、コンパイル時に個別のCSSファイルが生成されないようになります。
そして、メインのスタイルシートでこれらを@useを使ってインポートします。
// styles.scss
@use 'header';
@use 'footer';コンパイルすると、すべてが一つのCSSファイルにまとめられます。
.header {
background-color: #333;
color: #fff;
}
.footer {
background-color: #222;
color: #ccc;
}これで、ファイルを分けて管理しながらも、最終的なCSSは一つにまとまるので、ページの読み込みも早くなります。
大きなサイトになればなるほど、この分割方法は効率的ですよ。
機能5：ミックスイン
Sassのミックスインは、同じスタイルを何度も書く手間を省くための便利な機能です。例えば、ボタンやカードなど、似たようなデザインをページのあちこちで使う場合、普通のCSSだとその都度書かなきゃいけません。でも、ミックスインを使えば、一度スタイルをまとめて定義しておいて、必要なところで呼び出すだけでOKなんです。
例えば、ボタンのスタイルをミックスインにしてみましょう。
@mixin button-style {
padding: 10px 20px;
background-color: #3498db;
border-radius: 5px;
color: white;
}
.button-more {
@include button-style;
margin-top: 20px;
}
.button-contact {
@include button-style;
width: 300px;
margin: 40px auto;
}コンパイルすると、こんな感じのCSSになります。
.button-more {
padding: 10px 20px;
background-color: #3498db;
border-radius: 5px;
color: white;
margin-top: 20px;
}
.button-contact {
padding: 10px 20px;
background-color: #3498db;
border-radius: 5px;
color: white;
width: 300px;
margin: 40px auto;
}@include button-style;を使うだけで、同じスタイルを何度も書く手間が省けます。しかも、必要に応じてミックスインに引数を渡すことで、ちょっとだけ違うデザインにも対応できます。
例えば、背景色を変えたいときもミックスインで対応できます。
@mixin button-style($color) {
padding: 10px 20px;
background-color: $color;
border-radius: 5px;
color: white;
}
.button-more {
@include button-style(#3498db);
margin-top: 20px;
}
.button-contact {
@include button-style(#e74c3c);
width: 300px;
margin: 40px auto;
}コンパイルすると、こんな感じ。
.button-more {
padding: 10px 20px;
background-color: #3498db;
border-radius: 5px;
color: white;
margin-top: 20px;
}
.button-contact {
padding: 10px 20px;
background-color: #e74c3c;
border-radius: 5px;
color: white;
width: 300px;
margin: 40px auto;
}これで、ボタンのスタイルを再利用しつつ、背景色だけ変えることができるんです。ミックスインを使うと、コードがスッキリして管理がラクになりますよ。
メディアクエリを含めた分岐も簡単にできる
さらに、ミックスインを使えば、メディアクエリを含めた「PC画面のとき」「SP画面のとき」のスタイルも簡単に切り替えることができます。例えば、@contentを使って、任意のスタイルを条件に応じて挿入するミックスインを作ることができます。
@mixin pc {
@media (min-width: 768px) {
@content;
}
}
@mixin sp {
@media (max-width: 767px) {
@content;
}
}
.navbar {
background-color: #333;
color: white;
@include pc {
width: 500px;
padding: 40px 0;
}
@include sp {
padding: 20px 0;
}
}コンパイルすると、こんな感じのCSSになります。
.navbar {
background-color: #333;
color: white;
}
@media (min-width: 768px) {
.navbar {
width: 500px;
padding: 40px 0;
}
}
@media (max-width: 767px) {
.navbar {
padding: 20px 0;
}
}この例では、.navbarに対してPC画面とSP画面で異なる幅とパディングを設定しています。@include pcと@include spを使って、メディアクエリの条件をミックスインで管理することで、画面サイズごとのスタイルを簡単に切り替えることができます。これで、レイアウトの調整もスッキリとまとめられます。
SASS記法ならさらにシンプルに書ける
SASS記法では、ミックスインを「=」、呼び出しを「+」で書くことができます。シンプルでスッキリとした表現になるので、書くのがさらにラクになりますよ。
先ほどのメディアクエリを使った例も、SASS記法だとこんな感じに書けます。
=pc
@media (min-width: 768px)
@content
=sp
@media (max-width: 767px)
@content
.navbar
background-color: #333
color: white
+pc
width: 500px
padding: 40px 0
+sp
padding: 20px 0見ての通り、=と+で書けるのでコードが短くなり、読みやすくなります。
この簡潔さが、私がSASS記法を好む理由の一つです。シンプルな表記で、サクサクとコーディングできるのが魅力的です。
機能6：継承
Sassの継承は、似たようなスタイルを持つ要素に対して、共通のスタイルを「引き継ぐ」ことができる機能です。CSSで同じスタイルを何度も書くのは効率が悪いし、変更が必要になったときに、あちこち修正しないといけなくなりますよね。継承を使うことで、共通部分をまとめて管理しやすくなります。
例えば、メッセージのスタイルを継承でまとめてみましょう。.messageクラスをベースに、.successと.errorで異なる部分だけを追加する場合です。
%message {
padding: 10px;
border: 1px solid;
border-radius: 5px;
}
.success {
@extend %message;
border-color: green;
color: #3c763d;
}
.error {
@extend %message;
border-color: red;
color: #a94442;
}コンパイルすると、こんな感じのCSSになります。
.success,
.error {
padding: 10px;
border: 1px solid;
border-radius: 5px;
}
.success {
border-color: green;
color: #3c763d;
}
.error {
border-color: red;
color: #a94442;
}ここでは、.successと.errorが%messageのスタイルを引き継いでいるので、共通のスタイルを一箇所にまとめて管理できます。ポイントは、ベースとなるスタイルを定義するときに、%messageのようにパーセント記号（%）を使うことです。これをプレースホルダーと呼びます。@extendを使ってプレースホルダーを引き継ぐことで、コードがスッキリします。
ミックスインとの違いは？
「ミックスインと継承の違いって何？」と思うかもしれませんが、違いは「どのように再利用するか」です。ミックスインは呼び出すたびにスタイルが繰り返し書き出されるのに対して、継承は共通のスタイルを一つにまとめて適用します。継承を使うと、共通部分のコードがCSSに一度だけ出力されるため、コードが少しコンパクトになります。
ミックスインの方が柔軟で、引数を使ってカスタマイズできるため、私自身は最近は継承をほとんど使っていません。どちらを使うかは、ぜひ自分で試してみて判断してみてください。
機能7：関数
Sassの関数は、ちょっと複雑な計算や処理をまとめて使い回せる便利な機能です。例えば、フォントサイズをremで指定するときに、毎回計算するのってけっこう面倒ですよね。そんなときも関数でサクッと解決できます。
では、remのサイズを計算してくれる関数を作ってみましょう。これで、基準となるフォントサイズをもとにremを計算してくれます。
@function rem($size, $base: 16px) {
@return $size / $base * 1rem;
}
.title {
font-size: rem(32px); // 基準が16pxなら2rem
}
.note {
font-size: rem(14px); // 基準が16pxなら0.875rem
}コンパイルすると、こんな感じのCSSになります。
.title {
font-size: 2rem;
}
.note {
font-size: 0.875rem;
}こんな風に、rem関数を使ってフォントサイズを一発で計算できます。基準のサイズを変えたいときも、関数の引数を変えるだけで全体に反映できるから便利！
そして、Sassにはこうした自作の関数だけじゃなくて、組み込み関数もたくさん用意されてます。私がよく使うのはrgba。デザインツールから16進数のカラーコードをコピーすることが多いので、これをそのままrgbaに変換できるのはとても便利です。
.button {
background-color: rgba(#3498db, 0.8);
}コンパイルすると…
.button {
background-color: rgba(52, 152, 219, 0.8);
}これなら16進数の色をそのまま透過させられるので、RGB値を調べる手間が省けてラクになります。
関数はいろんな使い方ができるので、実際に試してみて、自分のプロジェクトで活用できそうな場面を探してみてくださいね。
機能8：ループと条件分岐
Sassには、ループと条件分岐というプログラミングのような機能があって、これがなかなか便利です。CSSを書くときに、「同じスタイルを何度も繰り返したい」とか「特定の条件に応じてスタイルを変えたい」ってこと、結構ありますよね。Sassなら、これらを自動化できるんです。
ループ
まずはループから見ていきましょう。例えば、複数の要素を少しずつずらして並べたい場合、普通のCSSだと一つひとつ手作業で位置を指定しないといけません。でも、Sassのループを使えば、こんな感じで効率よく書けます。
.box {
position: absolute;
width: 50px;
height: 50px;
background-color: #3498db;
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
left: $i * 10px;
top: $i * 20px;
}
}
}コンパイルすると、こんな感じのCSSになります。
.box {
position: absolute;
width: 50px;
height: 50px;
background-color: #3498db;
}
.box:nth-child(1) {
left: 10px;
top: 20px;
}
.box:nth-child(2) {
left: 20px;
top: 40px;
}
.box:nth-child(3) {
left: 30px;
top: 60px;
}
.box:nth-child(4) {
left: 40px;
top: 80px;
}
.box:nth-child(5) {
left: 50px;
top: 100px;
}このように、@forループを使うと、要素の位置を自動的にずらして配置できます。少しずつ変化するスタイルを指定するのに、このループを使うと効率的にコーディングできます。
条件分岐
次に条件分岐です。スタイルを特定の条件で切り替えたいときに便利です。例えば、開発用と本番用で画像のURLを切り替えたい場合、@ifを使って関数を設定できます。
$env: "development"; // "production"に切り替えれば本番用
@function image-url($filename) {
@if $env == "development" {
@return url('/images/#{$filename}');
} @else if $env == "production" {
@return url('https://cdn.example.com/images/#{$filename}');
}
}
.banner {
background-image: image-url('banner.jpg');
}
.logo {
background-image: image-url('logo.png');
}
コンパイルすると、開発用の環境ではこんな感じ。
.banner {
background-image: url('/images/banner.jpg');
}
.logo {
background-image: url('/images/logo.png');
}
$envを「production」に切り替えると、本番用のパスに自動的に切り替わります。
.banner {
background-image: url('https://cdn.example.com/images/banner.jpg');
}
.logo {
background-image: url('https://cdn.example.com/images/logo.png');
}
このように、@if文を使った関数で環境に応じた画像のパスを切り替えることができます。これで、開発時と本番環境で画像のURLを手動で変える必要がなくなり、管理がラクになりますよ。
ループや条件分岐を使うと、繰り返しのスタイルや条件付きのスタイルを効率的に書けるので、コーディングの幅が広がります。
ただ、使いすぎるとコードが複雑になりがちなので、必要なときにうまく活用してみてくださいね。
Sassの導入方法と使い方
Sassを使うためには最初に少しだけセットアップが必要です。でも、一度設定してしまえば、CSSを書くのがぐっとラクになります。ここでは、初心者の方でもわかりやすいように、Sassの導入方法から基本的な使い方までを紹介します。
1. Sassをインストールしよう
まず、Sassを使うためにはインストールが必要です。Sassをインストールする方法はいくつかありますが、ここではNode.jsを使った方法を紹介します。Node.jsをまだインストールしていない場合は、Node.js公式サイトからインストールしてください。
Node.jsがインストールされていれば、ターミナルで以下のコマンドを実行してSassをインストールできます。
npm install -g sassこのコマンドで、Sassをグローバル環境にインストールできます。これで、どのプロジェクトでもSassを使えるようになります。
2. Sassファイルを作成しよう
次に、Sassファイルを作成します。前述したように、SassにはSCSS記法とSASS記法の2つの記法があります。それぞれに拡張子があり、SCSS記法は.scss、SASS記法は.sassとなります。今回は、よく使われるSCSS記法を使ってみましょう。
ここでは、styles.scssというファイルを作成してみましょう。
// styles.scss
$primary-color: #3498db;
body {
font-family: Arial, sans-serif;
background-color: $primary-color;
color: white;
.container {
margin: 0 auto;
width: 80%;
}
}
このファイルに、Sassの記述方法でスタイルを書きます。変数やネストなど、Sassの機能を自由に使いましょう。
3. Sassファイルをコンパイルしよう
SassファイルをコンパイルしてCSSを生成するには、まずターミナルで、Sassファイルが保存されているディレクトリに移動します。そして、以下のコマンドを実行します。
sass styles.scss styles.css
このコマンドを実行すると、styles.cssというCSSファイルが生成されます。このCSSファイルをHTMLに読み込ませればOKです。
<link rel="stylesheet" href="styles.css">
これで、Sassで書いたスタイルが適用されます。
4. 自動コンパイルを設定しよう
手動でコンパイルするのが面倒な場合は、自動コンパイルの設定がおすすめです。--watchオプションを使うと、Sassファイルの変更を監視して自動的にコンパイルしてくれます。
sass --watch styles.scss:styles.css
このコマンドを実行すると、styles.scssに変更があるたびに自動でstyles.cssが更新されます。これで、作業効率がアップします。
5. プロジェクトでの活用
実際のプロジェクトでは、Sassファイルを複数に分割して効率的に管理することが多いです。例えば、_variables.scssや_mixins.scssなどのファイルを作り、メインのstyles.scssでそれらを読み込むようにします。
// styles.scss
@use 'variables';
@use 'mixins';
body {
font-family: Arial, sans-serif;
background-color: variables.$primary-color;
color: white;
}
このように、Sassの基本的な使い方を押さえれば、あとはプロジェクトに応じて活用するだけです。
最初は少し難しく感じるかもしれませんが、使っていくうちに便利さが実感できると思います。
まとめ
最近はCSSの機能がどんどん充実してきて、「もうSassは必要ない」と言われることも増えてきている印象です。でも、実際にはSassがまだまだ活躍する場面は多いと思います。特に、コードを整理したり、効率的にスタイリングを行ったりする場面では、やっぱりSassが頼りになります。
もちろん、CSSだけでできることも増えているので、「どんな場面でも絶対にSassを使うべき！」という時代ではなくなってきています。それでも、これからコーディングを本格的に学ぶ人にとって、Sassを習得するのは大きなプラスになると思います。使いこなせると、作業がスムーズになることも多いです。
この記事が、Sassに興味を持った人の手助けになれば嬉しいです。ぜひ、Sassを試して、自分なりの使い方を見つけてみてください！
ABOUT ME
東京のWeb制作会社で15年以上働いているフロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。
