Sassを使って、CSSをもっと簡単にわかりやすく書く！
サイト構築の際、ページ数が増えれば増えるほど、指定しなければいけないCSSが増えて、
いつのまにか数1,000行にわたるスタイルシートが出来上がっていることがありますよね。
ものによっては一括で指定できれば良いものの、
指定しようがないので、その時々で何度も同じ指定を書かなければいけないので、
結構手間になりますし、その分ムダに時間がかかってしまいます。
そんなCSSの悩みは、Sassを使用することで解決することが可能です！
今回は、とても便利なSassについて、基本的な部分をお伝えします。
Sassとは？
Sassとは、Syntactically Awesome Stylesheetsの略です。
日本語にすると、素晴らしい構造のスタイルシート…。
”CSSと比べた場合に、Sassのほうが優れている”くらいの意味合いで捉えておきましょう。
Sassでは、よく使う色を変数に格納することができたり、
よく使う指定をまとめておくことができます。
変数に格納した色を、％指定で暗くしたり明るくしたり、
明度を変更したりなんてこともできてしまうのです。
すごく便利ですよね。
２、Sassの書き方は２種類
Sassには書き方がふた通りあります。
通常のCSSと比べて説明します。
【CSS】
|
1 2 3 4 5 6 7 8 9 |
div{ color: red; } div p{ color: blue; } div p a{ text-decoration: none; } |
通常のCSSは上記の通りです。
divのなかの要素に対して指定したいときは、
毎回親要素の名前を記述する必要があります。
それではSassでこのCSSを再現していきましょう。
まずは一つ目のsass記法。
【sass記法】
|
1 2 3 4 5 6 |
div color: red; p color: blue; a text-decoration: none; |
sass記法では、CSSで必要とされていた{}をつける必要がなく、
子要素に指定をするときは、親要素に対してネスト構造にすることで指定が可能となります。
すごく簡単に記述することが可能になりましたが、
CSSに慣れ親しんだ身としては逆に簡素すぎてわかりにくいかも…。
そんな意見が多数あり、sass記法をもっとわかりやすくしたscss記法が誕生しました。
【scss記法】
|
1 2 3 4 5 6 7 8 9 |
div{ color: red; p{ color: blue; a{ text-decoration: none; } } } |
scss記法はsass記法と変わらず子要素をネスト構造で記述していきますが、
CSSと同じく{}を用いることで、より視覚的にわかりやすく記述することが可能となりました。
現在ではこのscss記法が主流となっていますので、
こちらの記事でもscss記法を例として紹介していきます。
３、Sassを使ってみよう！
sass記法だと少し難しそうだけど、scss記法ならできそう！と感じた方は、
ぜひここからSassを使うための準備を一緒に行なっていきましょう。
Sassを使用するには、動作環境を整えなければいけません。
3-1、Rubyをインストールする
Macをお使いのかたは、通常Rubyがインストール済みとなります。
windowsの方は、こちらからダウンロードを行なってください。
3-2、Sassをダウンロードする
Rubyがダウンロードできたら、次はSassをダウンロードします。
Macの場合
Finder→アプリケーション→ユーティリティからターミナルを起動します。
ターミナルに$ sudo gem install sassと入力してreturnを押します。
Mac OSのユーザーパスワードを入力してreturnを押すとインストールがスタートします。
Windowsの場合
スタートボタンからcmdと入力してコマンドプロントを起動します。
コマンドプロントに$ gem install sassと入力してEnterキーを押すとインストールがスタートします。
これでSassのダウンロードが完了しました。
４、SassはCSSに変換しないといけない
とても便利なSassですが、スタイルシートとして使用する場合は、
CSSファイルにコンパイルをしなければいけません。
ターミナルを使用してのコンパイルも可能ですが、
今回はPreprosというアプリケーション使用したいと思います。
５、SassファイルをCSSファイルに自動コンパイル！Prepros
まずはPreprosをダウンロードしましょう。
ダウンロードは以下のリンクから可能です。
６、プロジェクトファイルを作る
Sassを使用する場合は、以下のような構造のファイルを作成する必要があります。
sassフォルダのなかには、中身は何も書かなくても大丈夫なので、style.scssを用意します。
ファイルを作成したら、
Preprosへ登録をしましょう。
先ほど作成したファイルを丸ごとPreprosの画面にドラッグ&ドロップします。
ファイルが読み込まれると、以下のような画面になりますので、
sassのフォルダを開いて、scssのデータを選択します。
右に出てきたメニューの一番下、Procss fileをクリックすると、ファイルの登録が完了します。
あとは、scssに記述をしていけば、Preprosが随時CSSファイルに変換してくれるので、
変換後のCSSファイルをHTMLに反映すればOKです！
それでは次から、Sassの便利な機能を紹介していきます。
7-1、変数を使う
Sassでは変数を使用することができます。
便利な使い方としては、よく使う色や幅の指定を任意の変数に格納しておくことでしょう。
CSSで、毎回同じ指定を繰り返し記述していた部分が簡単に指定できるようになります。
変数の記述と適用は以下の通りです。
【scss】
|
1 2 3 4 5 |
$main-color : #E89B37; //変数 section{ background-color: $main-color; //作った変数を適用 } |
これをCSSファイルにコンパイルすると、
【CSS】
|
1 2 3 |
section{ background-color: #E89B37; } |
となります。
この変数はどこにでも、何度でも使用することができるので、
サイトのメインカラーやメインの幅などを変数に入れておくと便利ですね！
7-2 mxinを使う
mixinというのは、変数と違って、複数のスタイルを定義することができます。
まずは簡単に、値が変わらない場合のmixinを作ってみましょう。
【scss】
|
1 2 3 4 5 6 7 8 |
@mixin mainwidth { width: 900px; margin: 0 auto; } .section { @include mainwidth; //@includeをつけて記述 } |
【CSS】
|
1 2 3 4 |
.section{ width: 900px; margin: 0 auto; } |
7-2 引数名を指定してmxinを使う
mixinでは、引数名を指定して、値を自由に変更することもできます。
【scss】
|
1 2 3 4 5 6 7 8 |
@mixin t-style($color: #000, $size: 1.2em) { color: $color; font-size: $size; } .text-box { @include t-style(); //（）内に何も記述しない場合は初期値が適用される } |
【CSS】
|
1 2 3 4 |
.text-box { color: #000; font-size: 1.2em; } |
上記で指定した引数は、値を変更して使用することもできます。
【scss】
|
1 2 3 4 5 6 7 8 9 10 |
@mixin t-style($color: #000, $size: 1.2em) { color: $color; font-size: $size; } .text-box { @include t-style(); //通常の値 } .text-box2 { @include t-style(#333, 1.3em); //値を変更 } |
【CSS】
|
1 2 3 4 5 6 7 8 |
.text-box { color: #000; font-size: 1.2em; } .text-box2 { color: #333; font-size: 1.3em; } |
まとめ
今回は、Sassの基本と、簡単に使える便利な機能について紹介しました。
この他にもSassには便利な使い方があります！
この記事でSassが便利だと感じた方は、ぜひ他の使い方も調べてみてくださいね！
執筆者
DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。
うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。
この記事を読んだ人はこんな記事も読んでいます
CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。
将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。
サービス紹介
よくある質問
