Sassの使い方をまとめました。【CSSを効率的にコーディング】

メモを取っている男性 雑記
スポンサーリンク

Sassの使い方

Sassを勉強したので、備忘録を兼ねてまとめてみました。

Sassとは

Sassとは「Syntactically Awesome StyleSheet」の略で、直訳すれば「構文的に優れたスタイルシート」という意味になります。
CSSを扱う上位言語として「メタ言語」と呼ばれ、CSSを効率的に書くために機能を拡張した言語になります。
これまで、CSSはstyle.cssのようなファイルに直接スタイルを書く方法が主流でした。
しかし、表示速度の遅さやメンテナンス時の運用コストがかかるなど問題を抱えていました。
最近の現場では、このScssを使ってWebページをデザインすることが多くなっているそうです。

Sass

SassをCloud9上にインストール

本記事では、awsのCloud9にインストールして使っていきます。

SassをMacにインストールする場合は、こちらを参考にしてください。

Sassをインストールするために、Cloud9のワークスペースを開きターミナルで下記コマンドを入力します。

$ gem install sass

「gem install」というのはRuby(Cloud9にデフォルトでインストールされている)で作られたツールをインストールするためのコマンドで、SassもRubyで作られているため、このコマンドだけでインストールができます。インストールが完了すると、sassコマンドが使えるようになります。

Sassの書き方

書き方は2種類あり、インデントのみで書いていく「Sass記法」と、カッコでくくる「SCSS記法」です。
開発現場ではSCSS記法が多く使われているようなので、ここでもSCSS記法だけを扱います。
ファイルの拡張子は「.scss」となります。

ブラウザは、Sassファイルを直接読み込むことができません。そこで、Sassファイルを一度CSSファイルに変換(コンパイル)する必要があります。そのためのWebサービスもあります。
Sass meister
左側にSassを記述すると、自動的に右側でCSSに変換してくれるものです。

また、このコンパイル作業を簡単にしてくれるアプリがあります。
よく使用されるソフトに以下のものがあげられます。
koala:無料。日本語対応あり。
prepros:購入を促すポップアップが表示されますが、無料で使い続けることは可能。

後述しますが、今回はターミナル上でコンパイル作業を行っていきます。
それでは、次からSassの基本的な書き方を書いていきます。

Sassの基本的な書き方

ここでは、Sassの基本的な使い方や便利な機能をまとめています。

コメント

Sassでは一行コメントが使用できます。なお、コンパイル時にコメントは消えてしまいます。
コメントを残したい場合は、通常の複数行コメント(/* */)を使用します。

.menu {
  background-color: #fff;// ベースカラー
}

ネスト(入れ子)

HTMLの構造と同じようにセレクタを書くことができます。

セレクタのネスト

HTMLの書き方に似ていて書きやすく、記述量を減らし、メンテナンスもしやすくなります。
・Sass

div {
    background: #fff;
    p{
        color: black;
        span{
            color: red;
        }
    }
}

・コンパイル後のCSS

div {background: #fff;}
div p {color: black;}
div p span {color: red;}

プロパティのネスト

ショートハンドで記述できるプロパティ(ハイフン)も「: {}」としてネストすることができます。
・Sass

.menu {
  font: {
    size: 1rem;
    weight: bold;
  border: {
    color: red;
    style: solid;
    width: 4px;
  }
  }
}

・コンパイル後のCSS

.menu {
  font-size: 1rem;
  font-weight: bold;
  border-color: red;
  border-style: solid;
  border-width: 4px;
}

&セレクタ

「&」で親セレクタを指定することができます。
・Sass

a {
  &:hover {
    color: red;
  }
}

・コンパイル後のCSS

a:hover {color: red;}

変数

変数とは、Sassの中で決まった値を管理するために使用します。
「$変数名:値;」で宣言して、「$変数名」で設定値を取り出します。
具体例をみるとわかりやすいですので、よく使われる変数例を上げていきます。

カラーコード

頻出度の高い背景色やフォントなどのカラーコードの指定を変数にすると、メンテナンスの上で大きいメリットがあります。
・Sass

$baseColor: #f5f5f5;
$keyColor: #29d96f;

body {
  background-color: $baseColor;
}
.title {
  color: $keyColor;
}

・コンパイル後のCSS

body {background-color: #f5f5f5;}
.title {color: #29d96f;}

ブレイクポイント

レスポンシブレイアウトのデザインの際のブレイクポイントで使えます。変数にしておけば、指定されていたブレイクポイントが変更になっても容易にできます。
文字列の場合は、「$変数名:”文字列”;」で宣言し、「#{$変数名}」で値を取り出します。
・Sass

$large: "(min-width:1025px)";
$middle: "(min-width:769px) and (max-width:1024px)";
$small: "(min-width:768px)";

@media screen and #{$large}{
    .title{
        font-size: 1.5em;
    }
}

・コンパイル後のCSS

@media screen and (min-width: 1025px) {
  p {font-size: 1.5rem;}
}

ブレークポイントは以下のようにも表現できます。

$media-pc:769px;
$media-sp:768px;

@media screen and (min-width:$media-pc){
    .title{
        font-size: 1.5em;
    }
}

カラムの幅

カラムの幅もレイアウト上でよく使うので変数にしておくと便利です。
・Sass

$col2: 50%;
$col3: 33.333%;
$col4: 25%;
$col5: 20;
$col6: 16.666%;

.box{
  width: $col4;
}

フォントファミリー

引用文や、目立たせたいところなどフォントに変化をつける際に、変数にしておくと便利です。
・Sass

$title-Font: 'Abel', sans-serif;

h2{
  font: {
    weight: bold;
    family: $title-Font;
  }
}

Mixin

ある程度決まった形のものを雛形として、色だけ変えるといったことができます。
雛形を決めて何度も使うことができるようになり、変更時に変更箇所が少なくなり、統一感を保ったままメンテナンスしやすくなります。
「@mixin」でスタイルを定義して、「@include」で呼び出します。
・Sass

@mixin box($color: red) {
  width: 100px;
  height: 50px;
  background-color: $color;
}

.item1 {
  @include box;
}
.item2 {
  @include box(black);
}

・コンパイル後のCSS

.item1 {
  width: 100px;
  height: 50px;
  background-color: red;
}
.item2 {
  width: 100px;
  height: 50px;
  background-color: black;
}

ここでは「$color: red」となっているのでデフォルトcolorはredに設定されています。
よって、「@include box;」としている「.item1」は「color: blue;」となり、一方の「.item2」では「@include box(black)」としているので、この場合は「color: black;」となります。

Extend

ExtendはMixinと似ていますが、雛形ではなくセレクタのスタイルを継承することができます。
また、継承したうえでスタイルの追加や上書きを行うことができます。
・Sass

.button1 {
  padding: 10px;
  border: 1px solid red;
  border-radius: 5px;
}

.button2 {
  @extend .button1;
  border-radius: 50px;
  font-size: 0.8rem;
}

・コンパイル後のCSS

.button1, .button2 {
  padding: 10px;
  border: 1px solid red;
  border-radius: 5px;
}
.button2 {
  border-radius: 50px;
  font-size: 0.8rem;
}

関数

予め用意されている関数がいくつかあります。
よく使うものだと、色の明るさを調整できる関数があります。
「darken」は対象色を暗く、「lighten」は対象色を明るくします。
例えば、ボタンをマウスオーバーしたときの変化を設定することができます。
・Sass

$keyColor: #ebc51e;

.button {
  background-color: $keyColor;
  &:hover {
    background-color: lighten($keyColor, 30%);
  }
}

・コンパイル後のCSS

.button {
  background-color: #ebc51e;
}
.button:hover {
  background-color: #f7e9ab;
}

関数は数多くあります。以下サイト様が詳しく書かれていましたので参考にさせていただきます。
https://www.webdesignleaves.com/pr/css/css_basic_08.html#h4_index_37

パーシャル

SassもCSSと同様に外部のSassファイルをインポートすることができます。
違いは、Webページの表示の速さです。CSSの場合は、ファイルの数だけダウンロードの通信が必要となり時間がかかります。Sassの場合は、1つのCSSファイルへと変換されており、ダウンロードのための通信が一度で済みます。
分割したSassファイルのことをパーシャルと呼びます。
パーシャルのファイル名は「_ファイル名.scss」となり、「@import ‘ファイル名’;」で呼び出すことができます。
例えば、使用する変数を一つに集めたファイルを作っておくことができます。
_variable.scss

$baseColor: #f5f5f5;
$keyColor: #29d96f;
$fontColor: #000000;

style.scss

@import 'variable';

div {
    background-color: $keyColor;
}

・コンパイル後のCSS

div {
    background-color: #29d96f;
}

演算

演算をプロパティの値に使うことができます。
・Sass

$length: 500px;

div{
  width: 100px + 100;
  height: $length * 2;
}

・コンパイル後のCSS

div {
  width: 200px;
  height: 1000px;
}

ターミナルでCSSにコンパイル

ここからターミナルを使用して効率的にSassからCSSへ変換する方法を書いていきます。

その前に、Cloud9では自動的にSassのファイルをCSSにする機能がデフォルトで動作しているため、その機能を停止させます。
上部メニューのRunから、「 Automatically Build Supported Files」のチェックを外します。
この設定をしないと、後述するwatch機能で複数回の変換が行われ、動作がうまくいかなくなる場合があります。

Sassコマンド

ワークスペースの配下にフォルダ(lesson)を作成し、その中にHTMLファイルとSassファイルを作ります。
style.scss

$keyColor: #29d96f;

h1 {
    color: $keyColor;
}

次に、ターミナルでlessonフォルダへ移動します。

style.scssをstyle.cssへ変換します。コマンドは、「sass 【Sassファイル】:【CSSファイル名】」となります。

$ sass style.scss:style.css

これでstyle.cssが生成され、の中身は下記のようになっています。

h1 {
  color: red; }

/*# sourceMappingURL=style.css.map */

これで、h1要素の文字色が変更されます。

この「/*# sourceMappingURL=style.css.map */」や、同時に生成された「style.css.map」について解説します。
これらは、style.scssとtyle.cssとのマッピング情報を記載しています。マッピング情報とは、SassとCSSでの記述箇所を関連付けるものです。
変換される際に行数などがずれますが、このファイルがあるために、そのズレを修正してスタイルを関連受けてくれます。

出力形式のオプション

SassからCSSへ変換後の記述方法を「–style」オプションで選択することができます。
style.scss

$keyColor: #29d96f;

h1 {
    color: $keyColor;
}
ul {
  list-style: none;
    li {
    padding-left: 0;
        span {
        color: red;
        }
    }
}

nested

Sassのネストをそのまま活かしたスタイルになります。

$ sass --style nested style.scss:style.css
h1 {
  color: #29d96f; }

ul {
  list-style: none; }
  ul li {
    padding-left: 0; }
    ul li span {
      color: red; }

compact

セレクタとプロパティを1行にします。

$ sass --style compact style.scss:style.css
h1 { color: #29d96f; }

ul { list-style: none; }
ul li { padding-left: 0; }
ul li span { color: red; }

compressed

空白や改行などを削除して圧縮したCSSが生成されます。改行などがなくなるので読みにくくなりますが、ファイルサイズは小さくなります。

$ sass --style compressed style.scss:style.css
h1{color:#29d96f}ul{list-style:none}ul li{padding-left:0}ul li span{color:red}

expanded

今まで書いてきた記述方法と同じCSSが生成されるため、読みやすいです。

$ sass --style expanded style.scss:style.css
h1 {
  color: #29d96f;
}

ul {
  list-style: none;
}
ul li {
  padding-left: 0;
}
ul li span {
  color: red;
}

watchオプション

「–watchオプション」を使用すると、変更の度にSassコマンドで変換する必要がなくなります。
Sassファイルの変更があればすぐにCSSにも変更が反映されるようになるためです。

$ sass --watch style.scss:style.css

コマンドを実行すると、ターミナルにかきが表示されます。

>>> Sass is watching for changes. Press Ctrl-C to stop.

このまま、Sassファイルを変更してみます。
「color: red;」を「color: blue;」に変更して保存すると、即座にCSSにも変更が反映されて、blueとなります。

h1 {
  color: #29d96f; }

ul {
  list-style: none; }
  ul li {
    padding-left: 0; }
    ul li span {
      color: blue; }

ターミナルには、Sassの変更が検出されCSSとMapファイルが書き直されたというログが追加されます。

>>> Change detected to: style.scss
      write style.css
      write style.css.map

このように「–watch」オプションをつけて監視モードにしておくと、自動で変換されて便利です。
監視モードをやめたい場合は、「Ctrl + c」を入力します。

出力ファイルを別のフォルダに出力したい場合は、下記のようにします。
例えば、sassファイルが「lesson/input/style.scss」で、出力ファイルを「lesson/output/style.css」に出力したい場合は、下記コマンドになります。

$ sass --watch input/style.scss:output/style.css

まとめ

今回はSassの使い方についてまとめました。
まだものにできていませんので、積極的に使っていき、コーディングの効率化を図っていきたいと思います。

コメント

タイトルとURLをコピーしました