最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 【超効率的】Sassを使って生産性をアップしよう

Web制作

【超効率的】Sassを使って生産性をアップしよう

　Sassの使い方をお調べですね。

最近では、大手企業もSassを採用するほど、普及しています。

最大の魅力は、CSSを効率的に記述できることです。

今回は、Sassの導入方法から使い方までを紹介します。

ぜひ、参考にしてください。

Sassとは

「Sass」の正式名称は、「Syntactically Awesome Style Sheets」です。

日本語に訳すと「構文的にスマートなスタイルシート」という意味になります。

簡単に説明すると、CSSを拡張したメタ言語です。

メタ言語と聞いてもあまりなじみがないと思います。

メタ言語を簡単に説明すると、「特定の言語について記述するための言語」です。

つまり、SassはCSSをより便利に効率的に記述できるようにした言語です。

これからSassを使いたいという人は、ぜひ公式サイトも確認してください。

Sass公式サイトURL:https://sass-lang.com/

Sassのメリット

Sassは、CSSを便利に効率的に記述できる言語ということはわかっていただけたと思います。

ここでは、具体的なSassのメリットを紹介します。

記述を簡略化できる

Sassの1番のメリットは、CSSの記述を簡略化できるところです。

例えば、Sassで記述する場合、親子関係にあるセレクタを入れ子にして記述できます。

CSSで記述する場合は、子要素記述するときに親要素も記述しなければなりません。

このように、Sassを使うことで記述量を少なくすることが可能です。

コメントの記述方法が増える

CSSでコメントを記述する場合、「/*~*/」このような記述をします。

このような記述以外にも、javascriptで使用する「//〜」も使用できます。

同じ値を何度も使用できる

Sassの場合は、同じスタイルを複数の要素に適用するときに変数などを使用することで同じスタイルを何度も使い回すことが可能です。

CSSの場合は、同じスタイルを複数の要素に適用するためには、同じコードを何度も記述する必要があります。

このように、同じ値を何度も使いまわせるSassの方が効率的です。

ファイルを分割して管理できる

Sassは「パーシャル」という機能を使用することができます。

これにより、部分ごとにスタイルシートを分割することが可能です。

例えば、ヘッダー部分のスタイルシート、メイン部分のスタイルシート、フッター部分のスタイルシートなどに分割できます。

ファイルを複数に分割した場合でも、CSSにコンパイル(変換)するときは1つのファイルにまとめることが可能です。

条件分岐・繰り返しなどが使用できる

CSSでは、条件分岐・繰り返しなどの処理をおこなうことはできません。

しかし、Sassを使用する場合、このような処理をおこなうことが可能です。

このような機能を使用することで、よりスピーディーにコードを記述できます。

関数を使用できる

Sassには豊富な関数が用意されています。

関数を使用することで、コーディング時間を短縮することが可能です。

CSSファイルを圧縮できる

Sassは、Cssファイルにコンパイルする際に圧縮できます。

CSSファイルを圧縮することで、軽量化することができ、WEBサイトの表示速度を向上することが可能です。

Sassを使用する環境を整えよう

Sassは大きく分けて、Ruby SassとLibSassの2種類です。

今回は、Ruby Sassの環境構築について説明します。

Ruby Sassのインストール

今回は、Macを使用した場合のRuby Sassの導入方法を説明します。

手順1.Rubyのバージョン確認

MacにはデフォルトでRubyがインストールされています。

なので、新たにRbuyをインストールする必要はありません。

まずは、Rubyのバージョンを確認するためにターミナルを開きましょう。

ターミナルを開くには、デスクトップの画面の右上に表示されている「虫眼鏡」のアイコンをクリックします。

Sass

「虫眼鏡」のアイコンをクリックすると、検索ウィンドウが表示されるので、そこに「ターミナル」と入力してエンターキーを押します。

Sass

ターミナルが開かれたら、以下のコマンドを入力してください。

ruby -v

上記のコマンドを入力することで、Rubyのバージョンを確認できます。

Rubyのバージョンは、それぞれ違いますが下記のようにバージョンが表示されれば問題ありません。

ruby 2.2.2p95 (2015-04-13 revision 50295) [x86_64-darwin14]

手順2.Sassをインストールする

Rubyのバージョンが確認できた次は、Sassをインストールしましょう。

ターミナルに、下記のコマンドを入力してインストールしてください。

sudo gem install sass

すると、Sassのインストールが始まります。

以下のようなメッセージが表示されれば、インストールは完了です。

Successfully installed sass-3.5.7
Parsing documentation for sass-3.5.7

本当にSassがインストールできたことを確認するために、下記のコマンドを入力してください。

sass -v

このように入力すると、Sassのバージョンが確認できます。

Ruby Sass 3.5.7

Sassのバージョンが確認できれば、Sassのインストールは完了です。

Sassの基本的な使い方

Sass

Sassの基本的な使い方を説明します。

ここで紹介する使い方を覚えることで、作業効率がアップします。

ネスト構造

Sassの代表的な使い方として、有名なのがネスト構造(入れ子)です。

まずは、ネスト構造の使い方を紹介します。

サンプルとして以下のようなネスト構造のコード記述します。

SCSS


#main{
    width: 100%;
    p{
        font-size: 1.4rem;
        a{
            text-decoration: none;
            &:hover{
                color: green;
            }
        }
    }
}

#section{
    width: 96rem;
    p{
        font-size: 1.6rem;
        ul{
            margin-bottom: 1.5rem;
            li{
                margin-right: 1rem;
                p{
                    color: #222;
                }
            }
        }
    }
}

このコードをCSSに変換すると、下記のコードになります。

CSS

#main {
  width: 100%;
}
#main p {
  font-size: 1.4rem;
}
#main p a {
  text-decoration: none;
}
#main p a:hover {
  color: green;
}

#section {
  width: 96rem;
}
#section p {
  font-size: 1.6rem;
}
#section p ul {
  margin-bottom: 1.5rem;
}
#section p ul li {
  margin-right: 1rem;
}
#section p ul li p {
  color: #222;
}

コンパイルする方法

ScssをCSSにコンパイル(変換)する方法はいくつかあります。

今回は、Ruby SassをCSSにコンパイル(変換)する方法を紹介します。

まずは、CSSフォルダとSassフォルダを作成しましょう。

CSSフォルダの中には、main.cssファイルを作成します。

次に、Sassフォルダの中には、main.scssファイルを作成します。

SCSSファイルにコードを記述してください。

コードを記述したら、ターミナル(Windowsを使用している方はコマンドプロンプト)を開いてください。

下記のコマンドを入力するとコンパイルすることができます。

sass scss/main.scss:css/main.css

上記のコマンドは手動でSCSSをCSSに変換する方法です。

なので、SCSSをCSSに変換する度に上記のコマンドを入力することが必要になります。

自動的にコンパイルするためには、下記のコマンドを入力してください。

sass --style expanded --watch scss:css

上記のコマンドを入力することで、自動的にコンパイルすることが可能です。

SCSSファイルにコードを編集・追記してファイルを保存すると自動的にCSSファイルにコンパイルされます。

また、「–style expanded」を入力することで、CSSファイルに変換するときに字下げして表示されます。

自動的にコンパイルするのを中止するには、「Ctrl」+「c」と入力してください。

隣接セレクタ・間接セレクタ・直下セレクタの使い方

隣接セレクタ・間接セレクタ・直下セレクタの使い方を順番に説明します。

隣接セレクタ

隣接セレクタを使用する場合は、以下のように記述します。

SCSS

#main{
    #section{
        + .box1{
            margin-bottom: 5rem;
        }
        + .box2{
            font-size: 1.6rem;
        }
        + .box3{
            background: #222;
        }
    }
}

要素セレクタの前に「+」を記述することで、隣接セレクタを使用できます。

CSSにコンパイルすると、以下のようなコードになります。

CSS

#main #section + .box1 {
  margin-bottom: 5rem;
}
#main #section + .box2 {
  font-size: 1.6rem;
}
#main #section + .box3 {
  background: #222;
}

間接セレクタ

間接セレクタを使用する場合は、以下のように記述します。

SCSS

#main{
    #section{
        ~ .box1{
            margin-bottom: 5rem;
        }
        ~ .box2{
            font-size: 1.6rem;
        }
        ~ .box3{
            background: #222;
        }
    }
}

要素セレクタの前に「~」を記述することで、間接セレクタを使用できます。

CSSにコンパイルすると、以下のようなコードになります。

CSS

#main #section ~ .box1 {
  margin-bottom: 5rem;
}
#main #section ~ .box2 {
  font-size: 1.6rem;
}
#main #section ~ .box3 {
  background: #222;
}

直下セレクタ

直下セレクタを使用する場合は、以下のように記述します。

#main{
    #section{
        > .news{
            margin-bottom: 5rem;
        }
        > p{
            font-size: 1.6rem;
        }
        > a{
            color: #222;
        }
    }
}

要素セレクタの前に「>」を記述することで、直下セレクタを使用できます。

CSSにコンパイルすると、以下のようなコードになります。

#main #section > .news {
  margin-bottom: 5rem;
}
#main #section > p {
  font-size: 1.6rem;
}
#main #section > a {
  color: #222;
}

親セレクタの参照

親セレクタを参照するコードを紹介します。

親セレクタを参照するためには、&(アンバサンド)を使用します。

具体的な記述方法は、以下のコードを参考にしてください。

SCSS

a{
    text-decoration: none
        &:hover{
            text-decoration: underline;
            }
}

.pagenation{
    li{
        width: 50%;
    }
    &.prev{
        float: left;
        color: #222;
    }
    &.next{
        float: right;
        color: #222;
    }
}

CSSにコンパイルすると、以下のようなコードになります。

CSS

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.pagenation li {
  width: 50%;
}
.pagenation.prev {
  float: left;
  color: #222;
}
.pagenation.next {
  float: right;
  color: #222;
}

プロパティのネスト

ネストは要素セレクタだけでなく、プロパティで使用することも可能です。

具体的な記述は、以下のようになります。

SCSS

#sample{
    border: {
        top: 3px solid #222;
        bottom: 5px dotted #222;
    }
}

上記のように記述することで、プロパティをネスとすることができます。

CSSにコンパイルすると、以下のようなコードになります。

#sample {
  border-top: 3px solid #222;
  border-bottom: 5px dotted #222;
}

コメント

コメントは、2種類の記述方法があります。

「/**/」と「//」の記述です。

「/**/」で記述した場合は、CSSファイルにコンパイルしてもコメントが残ります。

「//」で記述した場合は、CSSファイルにコンパイルするとコメントは残りません。

コメントをCSSファイルに残したい場合は、「/**/」で記述しましょう。

SCSS

#comment{
    /* こちらのコメントは、CSSファイルに残ります */
    //こちらのコメントは、CSSファイルに残りません
}

CSSにコンパイルすると、以下のようなコメントになります。

CSS

#comment{
    /* こちらのコメントは、CSSファイルに残ります */
}

変数

Sassでは、変数を使用することも可能です。

変数は以下のように記述することで使用できます。

SCSS

/* 変数を指定 */
$red: #FF0000;

#alert_area{
    background: $red;
}

#main{
    p{
        color: $red;
        font-size: 1.6rem;
    }
}

CSSにコンパイルすると、以下のようなコードになります。

CSS

#alert_area {
  background: #FF0000;
}

#main p {
  color: #FF0000;
  font-size: 1.6rem;
}

「$変数名」で変数を設定することで、変数が使用可能です。

上記のコードでは、「$red」を変数として設定しています。

なので、プロパティの値で「$red」を指定すると、変数の値で設定した「#FF0000」が記述されます。

スタイルの継承

Sassでは、スタイルを継承することも可能です。

スタイルを継承するためには、「@extend」を使用します。

「@extend」は、以下のように記述することで使用できます。

SCSS

.sample{
    margin: 10rem 20rem 30rem 40rem;
    color: #FF0000;
    border: 1px solid #222;
}

.box{
    @extend .sample;
}

CSSにコンパイルすると、以下のようなコードになります。

CSS

.sample, .box {
  margin: 10rem 20rem 30rem 40rem;
  color: #FF0000;
  border: 1px solid #222;
}

また、「@extend」を同時に複数使用することも可能です。

SCSS

.sample{
    margin: 10rem 20rem 30rem 40rem;
    color: #FF0000;
    border: 1px solid #222;
}

.test{
    font-size: 1.6rem;
    text-align: center;
    padding-bottom: 10rem;
}

.box{
    @extend .sample;
    @extend .test;
}

CSSにコンパイルすると、以下のようなコードになります。

.sample, .box {
  margin: 10rem 20rem 30rem 40rem;
  color: #FF0000;
  border: 1px solid #222;
}

.test, .box {
  font-size: 1.6rem;
  text-align: center;
  padding-bottom: 10rem;
}

ミックスインを使用してスタイルを呼び出す

先ほどは、エクステンドを使用したスタイルの継承を紹介しました。

それと似た機能で、ミックスインを使用してスタイルを呼び出すことが可能です。

SCSS

@mixin sample{
    padding: 10rem;
    margin: 10rem;
    color: #FF0000;
    border-bottom: 1px solid #222;
}

.test{
    @include sample;
}

.box{
    @include sample;
}

CSSにコンパイルすると、以下のようなコードになります。

.test {
  padding: 10rem;
  margin: 10rem;
  color: #FF0000;
  border-bottom: 1px solid #222;
}

.box {
  padding: 10rem;
  margin: 10rem;
  color: #FF0000;
  border-bottom: 1px solid #222;
}

引数を指定することで、このようにコードを記述することも可能です。

SCSS

@mixin font-size($text){
    font-size: $text;
}

.sample{
    @include font-size(1.6rem);
}

CSSにコンパイルすると、以下のようなコードになります。

.sample {
  font-size: 1.6rem;
}

他にも、このような使い方もあります。

SCSS

@mixin circle($sample){
    border-radius: $sample;
    webkit-border-radius: $sample;
    moz-border-radius: $sample;
}

.sample{
    @include circle(50px);
}

CSSにコンパイルすると、以下のようなコードになります。

.sample {
  border-radius: 50px;
  webkit-border-radius: 50px;
  moz-border-radius: 50px;
}

引数を設定することで、値を自由に指定することができます。

CSSの設計に合わせて、変数・エクステンド・ミックスインを使い分けてください。

まとめ

いかがでしたか？

Sassを使用することでコードの記述量を減らすことができ、作業時間を短縮することが可能です。

学習コストがデメリットになりますが、1度習得すると永続的に使用することができ、作業時間を大幅に削減できます。

これから、本格的にWEBサイト制作に携わる方は、覚えておいて損することはありません。

この記事を参考にして、Sassを習得してください。