【Saas入門】Sassって何が便利?Sassでできることの紹介

CSSを勉強していると、もっと効率的にコーディングできる方法はないのかと思うことがありますよね。

そんなときに便利なのがSassです。

SassはSyntactically awesome style sheets(文法的に最高なスタイルシート)の略で、その名前のからもわかるように、CSSをさらに効率的に書けるようにするものです。

Sassを一度使ったらもうCSSでのコーディングができないと感じるほどに便利ですので、この記事を読んでぜひ取り入れてみてください。

文法もとても簡単で、CSSを理解していればSassもすぐに使いこなせるようになるでしょう。

Sassの初心者にもわかりやすいように、具体的な使い方や機能よりも、Sassを使うことで何ができるのか、何が便利なのかを理解できる記事となっていますので、まだSassを使ったことがない方はぜひご一読ください。

Sassでできること

Sassを使うと何が便利になって、なにができるのでしょうか。

Sassにはたくさんの機能があります。(僕もまだまだ使いきれていません)

今回は、

  • CSSをネスト(入れ子)で書ける
  • 変数が使える
  • @mixinを使って頻出のスタイルをまとめられる
  • 繰り返しや条件分岐が使える

といったわかりやすく便利な機能を紹介していきたいと思います。

SassとSCSS

Sassには以下の2種類の記法があります。

  • Sass:Rubyのような記法
  • SCSS:CSSに近い記法

これらの記法では拡張子もそれぞれ「.sass」、「.scss」というように異なります。

この記事ではより主流なSCSSの記法を使っていきます。

CSSをネスト(入れ子)で書ける

Sassの一番わかりやすく便利な点はこのCSSをネストで書けるところだと思います。

例えば、CSSで以下のようなコードを書いていたとします。

header {
	display: flex;
	min-height: 75px;
}

header h1 {
	margin: 0;
}

header .gnav {
	display: flex;
}

header .gnav li {
	margin-right: 30px;
}

header .gnav li:hover {
	opacity: 0.7;
}

CSSではこのように、何度も同じセレクタを書く必要があります。

これをSassで書くとどうなるか見てみましょう。

header{
    min-height: 75px;
    display: flex;

    h1{
        margin: 0;
    }

    .gnav{
        display: flex;

        li{
            margin-right: 30px;

            &:hover{
                opacity: 0.7;
            }
        }
    }
}

Sassはこのようにネストで書くことができるため、記述量を大幅に減らすことができます。

「&:hover」の箇所でも使っているように、親のセレクタを参照できるのもとても便利ですね。

変数が使える

Sassでは変数を使うことができます。

これを利用することで、例えばサイトのメインカラーを変数に設定しておくと、変更があった場合変数の値を変更するだけで修正できるなどといった使い方が可能です。

$maincolor: #1F91BE;

h1,h2{
    color: $maincolor;
}

h2{
    padding-bottom: 9px;
    border-bottom: 4px solid $maincolor;
    margin: 0;
}

 

@mixinを使って頻出のスタイルをまとめられる

Media Queryなどの何度も書くのは面倒なものなどを「@mixin」でまとめて定義することができます。

mixinで定義してものは「@include」を使って使用します。

例えば、以下のようにmixinを定義しておくことで、「@media screen and (max-width: 640px){}」といちいち書かずとも、「@include mq() {}」と書くだけでよくなります。

ネストの中にも記述できるのでレスポンシブ化がとてもはかどります。

@mixin mq() {

    @media screen and (max-width: 640px) {

        @content;
    }
}


header{
    min-height: 75px;
    display: flex;
    align-items: center;
    h1{
        margin: 0;

        @include mq() {
            margin:20px auto 10px;
        }
    }
}

Sassでこのように書くとCSSでは以下のようになります。

header {
	display: flex;
	min-height: 75px;
}

header h1 {
	margin: 0;
}

@media screen and (max-width: 640px) {
     header h1 {
        margin:20px auto 10px;
    }
}

繰り返しや条件分岐が使える

SassではFor文やEach文、if文などを使うこともできます。

例えば、以下のように同じようなプロパティをたくさん書く場合にも少ない記述量で済みとても便利です。

$size: 7vw;

@for $i from 0 through 5 {
    .row#{$i+1} {
        left:#{$i*$size};
    }
}

CSSにすると以下の通りです。

.row1 {
  left: 0vw; }

.row2 {
  left: 7vw; }

.row3 {
  left: 14vw; }

.row4 {
  left: 21vw; }

.row5 {
  left: 28vw; }

.row6 {
  left: 35vw; }

Sassの導入方法

このようにとても便利なSassですが、使用するにはRubyのインストールなど、環境構築をおこなう必要があります。

これは、SassをHTMLで読み込むためにはCSSの形式に変換する(コンパイル)必要があるからです。

そのため、コンパイルをするための環境を準備しなくてはなりません。

この環境構築がSassの1番の関門です。

Web上に情報はたくさんありますが、手順通りにやってもうまくいかないことがあります。

僕と友人はどちらもこの環境構築がうまくいかず1日ほど悩みました…。

以下にSass導入の参考にさせていただいたサイトをいくつか紹介します。

https://liginc.co.jp/web/html-css/css/56599/2

Sassの導入方法から使い方まで、初心者にも分かるように解説

 

以上、Sassの概要の解説でした。

Sassを導入して、より効率的にコーディングをおこなっていきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です