MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【HTML / CSS】SCSSの備忘録 / 基本・応用

【HTML / CSS】SCSSの備忘録 / 基本・応用

公開日:2019年08月14日
最終更新日:2019年09月01日
オンスタ運営
ホーム > スニペット > 【HTML / CSS】SCSSの備忘録 / 基本・応用
このエントリーをはてなブックマークに追加

こんにちわ! みなさんいかがお過ごしでしょうか?遅咲きのエンジニア、ひさしです。
今回の記事はSass(サス)です。
この会社に入って、1年ちょっとになりますが、前職(職場)と、現在の環境とは全く異なる環境でのコーディングとなり、当初ものすごく苦労したので、メモとして残しておいたものをご紹介しようと思います。今更感満載ですがお付き合いください!

Sassとは何か?

Sass(サス)と読みます。Syntactically Awesome Stylesheetsの略。
CSSを拡張したメタ言語です。 、、、要するに、CSSを効率(プログラム要素のある)よく書くことのできる便利なものです。Sassを使い出して、普通のCSSが書けなくなりました。便利すぎて。。

SassとSCSSの違いは?

Sassは拡張子が SCSS になります。
あら? sass じゃないの?って思うのですが、これには歴史があり、Sass には sass記法 SCSS記法 と2種類あり、

  • SASS記法
    • ネスト(入れ子)を {}(波括弧)で表現する
    • 値の後の ;(セミコロン)は省略できる
ul
  margin: 0 0 0
  li
    margin: 10px
  • SCSS記法
    • ネスト(入れ子)を {}(波括弧)で表現する
    • 値の後の ;(セミコロン)は省略できない
ul{
  margin: 0 0 0;
  li{
    margin: 10px;
  }
}

SASS記法は簡素化され、通常のCSSのと互換性がなく、書式が異なっていたので、普及に至らず、CSSと親和性の高い、SCSS記法が開発され、広く使われるようになりました。 本記事では SCSS記法 を使用していきます。

メリットを挙げておきます。

  • セレクタをネスト(入れ子)して書く事ができる、記述を簡素化できる
  • 変数を定義する事ができる
  • 一度使ったセレクタを使い回す事ができる
  • コードの再利用が可能
  • 条件分岐などのプログラム的な処理ができる
  • 関数で様々な処理ができる

まず触って見たいという方はこちらのサイトがおすすめです
SassMeister
前置が長くなってしまいましたが、早速基本的な記述を見て行きましょう!

SCSSの基本機能

ネスト

セレクタを入れ子にできる事で、CSS記述量が格段に減ります。ポイントは入れ子にしすぎない様にする事!

/*
通常の書き方
コンパイル前
*/
.c-main{
  h1{
    margin: 0 1em;
  }
  h2{
    margin: 0 2em;
  }
  h3{
    margin: 0 3em;
  }
}

/*
コンパイル後
*/
.c-main h1 {
  margin: 0 1em;
}
.c-main h2 {
  margin: 0 2em;
}
.c-main h3 {
  margin: 0 3em;
}

ネスト &(アンパサンド)を使用した例

&(アンパサンド)を使用する事で、BEMの記法と親和性が高くコードの見通しもよくなります。

/*
&(アンパサンド)を使用した例
コンパイル前
*/
.c-main{
   &__element{
    // &(アンパサンド)を後につけることで事で、親セレクタを参照
    body &{
      margin: 0;
    }
    // &(アンパサンド)を前につけることで事で連結
    &:hover{
      opacity: 0.7;
    }
    &-modifier{
      margin: 0 1em;
    }
  }
}

/*
コンパイル後
*/
body .c-main__element {
  margin: 0;
}
.c-main__element:hover {
  opacity: 0.7;
}
.c-main__element-modifier {
  margin: 0 1em;
}

CSSプロパティのネスト

-(ハイフン)があるCSSプロパティは全てネストできます。

/*
コンパイル前
*/
.c-main{
   &__element{
    border:{
      top: 1px solid #000;
      right: 1px solid #000;
      bottom: 1px solid #000;
      left: 1px solid #000
    };
  }
}

/*
コンパイル後
*/
.c-main__element {
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}

コメントの記述

コンパイル後に出力されない様に、コメントする事も可能です。(設定によります)

/*
コンパイル前
*/
.c-main{
  /*
    複数行コメント
    コンパイル後も出力される
  */
  //1行コメントコンパイル後は出力されない
}

/*
コンパイル後
*/
.c-main {
  /*
    複数行コメント
    コンパイル後も出力される
  */
}

変数の定義

サイトの基本となる変数を定義しておけば、値を使い回す事ができ、変更も一発で終わります。

/*
コンパイル前
*/
//変数の定義
$fontBaseColor: #000;
$fontBaseSize: 16px;

.c-main{
  color: $fontBaseColor;
  font-size: $fontBaseSize;
}

/*
コンパイル後
*/
.c-main {
  color: #000;
  font-size: 16px;
}

四則演算

BEM記法で、エレメントの状態によって値を変化させたい時など便利です。

/*
コンパイル前
*/
//変数の定義
$marginBase: 5%;
$paddingBase: 10%;
$maxWidth: 100%;
$fontBaseSize: 16px;

.c-main{
  &__element{
    &-modifier{
      &--01{
        margin: $marginBase + 5;
        padding: $paddingBase - 2;
        font-size: $fontBaseSize * 2;
        width: $maxWidth / 2;
      }
      &--02{
        margin: $marginBase + 10;
        padding: $paddingBase - 4;
        font-size: $fontBaseSize * 3;
        width: $maxWidth / 4;
      }
      &--03{
        margin: $marginBase + 15;
        padding: $paddingBase - 6;
        font-size: $fontBaseSize * 4;
        //数字を直接、割り算する時は()カッコで括る
        width: (100% / 2);
      }
    }
  }
}

/*
コンパイル後
*/
.c-main__element-modifier--01 {
  margin: 10%;
  padding: 8%;
  font-size: 32px;
  width: 50%;
}
.c-main__element-modifier--02 {
  margin: 15%;
  padding: 6%;
  font-size: 48px;
  width: 25%;
}
.c-main__element-modifier--03 {
  margin: 20%;
  padding: 4%;
  font-size: 64px;
  width: 50%;
}

Sassの高度な機能 / 便利機能

エクステンド(継承)

/*
コンパイル前
*/
//継承元のclass
.extendParent{
  font-size: 1em;
  text-align: center;
  padding: 1em;
}
//継承
.extend_01{
  @extend .extendParent;
}
//継承の連鎖
.extend_02{
  @extend .extend_01;
}

/*
コンパイル後
*/
.extendParent, .extend_01, .extend_02 {
  font-size: 1em;
  text-align: center;
  padding: 1em;
}

コンパイル後は、グループセレクタとして出力されます。
このままでも、コードの記述量は格段に減りますが、継承元のclassも同時に出力されてしまい、コンパイル後に余計なcss出力が記述されてしまいます。
そこで、継承元のclassのセレクタを ”%” にする事で、出力をしないようにできます。
これをプレースホルダーと言います。

(%)プレースホルダー 指定でのエクステド(継承)

/*
コンパイル前
*/
//継承元のclass
%extendParent{
  font-size: 1em;
  text-align: center;
  padding: 1em;
}
//継承
.extend_01{
  @extend %extendParent;
}

/*
コンパイル後
*/
.extend_01 {
  font-size: 1em;
  text-align: center;
  padding: 1em;
}

ミックスイン

ミックスインとは、スタイルの集まりを定義して、他の場所で呼び出す事の出来る機能です。
また、引数を指定することで、定義したミックスインの値を一部変更して使う事ができます。

/*
コンパイル前
*/

//ミックスインの定義
@mixin box-sm{
  width: 30%;
  padding: 2%;
}

//ミックスインの指定
.boxA{
  @include box-sm;
}
.boxB{
  @include box-sm;
}

/*
コンパイル後
*/
.boxA {
  width: 30%;
  padding: 2%;
}

.boxB {
  width: 30%;
  padding: 2%;
}

エクステンドと機能として似ている様に感じ、最初は使い分けが難しいかも知れませんが、

  • エクステンド
    • 一度、他のエレメントど使用した、スタイルを使い回す。
    • グーループセレクタとして出力される
  • ミックスイン
    • 呼び出す事で、使用可能になるので、ミックスインを定義しただけでは使用できない。
    • 引数を使用する事で、値の一部を変更出来る

上記の様な違いがあります。では、引数をとったミックスインの使用例も見ていきましょう

/*
コンパイル前
*/
//ミックスインの定義
@mixin box-size($width,$padding,$unit){
  //引数は数字のみ
  //単位をif分でさらに分岐
  @if $unit == "%"{
    width: #{$width} + "%";
    padding: #{$padding} + "%";
  }
  @else if $unit == "px"{
    width: #{$width} + "px";
    padding: #{$padding} + "px";
  }
  @else if $unit == "em"{
    width: #{$width} + "px";
    padding: #{$padding} + "px";
  }
}

//スタイルの指定
.boxA{
  @include box-size(10,10,"%");
}
.boxB{
  @include box-size(20,20,"px");
}
.boxC{
  @include box-size(20,20,"em");
}

/*
コンパイル後
*/
.boxA {
  width: 10%;
  padding: 10%;
}

.boxB {
  width: 20px;
  padding: 20px;
}

.boxC {
  width: 20px;
  padding: 20px;
}

以下の内容を少しずつ足して行こうかと思います。また読みやすくしていきますんで、今後ともどうぞよろしくです

  • 便利機能
  • 条件分岐
    • if文
    • for文
    • while文
    • each文
    • map文
  • 関数
    • 組み込み関数
    • 自作関数

上記の様な内容を書き足して行こうと思ってますので、よろしければ、また覗いて見てください。 では、みなさん、コーディングを楽しんで、仕事は早く終わらせ、飲みに出かけましょう。 ひさしでした。

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。