30DAYSトライアル〜Sassの基礎を学ぶDAY7,8〜

こんにちは。mito（@mito_works）です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

30DAYSトライアルの始め方

mito

30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

4. 30DAYSトライアル【コーダーとして企業と仕事ができる実力をつけよう】

momo

2ndのDAY5,6はprogateを使ってSassを学んでいくよ！

Contents

Sass(サス)とは
入れ子構造の使い方
&記号の使い方
変数の定義
mixinについて
関数の使い方
まとめ

Sass(サス)とは

Sass(Syntactically Awesome StyleSheet)は、CSSをより便利に効率的に書くことができる言語です。

mito

SASS記法とSCSS記法の2種類の書き方があります。私はSCSS記法を学びました。

momo

ファイルの拡張子もcssではなく、scssになるよ！

メリット

CSSより記述量を減らせること
コードを再利用できること

入れ子構造の使い方

1つのセレクタのなかに別のセレクタを入れ子にして指定できます。

<div class="message">
  <h1>About us</h1>
  <p>私たちは・・・・</p>
</div>

CSSで記載する場合

.message{
 width:100%
}
.massage h1{
 font-size:50px;
}
.massage p{
 font-saize:20px;
}

Scssで書く場合

.message{
 width:100%
　h1{
   font-size:50px;
  }
  p{
  font-saize:20px;
  }
}

momo

同じセレクタをなんども書かなくてすむね！

&記号の使い方

入れ子構造を使うことによって、「セレクタ:hover」を「&:hover」というように書き換えることができます。

momo

「&」はhoverだけでなく、activeなどにも使うことができるよ！

HTMLの記載↓

<div class="col-12 social">
   <a href="#" class="socoalIcon"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: #d5d5d5;
  }
}

momo

liなどの中の特定の要素の指定にも使えるよ！

HTMLの記載↓

<ul>
    <li>planA</li>
    <li class="color-change">PlanB</li>
    <li>PlanC</li>
</ul>

Scssの記載↓

li{
  padding-left: 10px;
  &.color-change{
    color:red;
  }
}

変数の定義

$変数名: 値;

momo

右の値を左の変数に入れる(代入)という意味だよ。

$hover-color:#d5d5d5;

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: $hover-color;
  }
}

mito

他でも使い回しができるので便利ですね。

入れ子構造
変数代入
&記号

まずはこの3つを使えるようになるだけでもかなり便利です。
以下はさらに効率的にコーディングするための書き方です。

mixinについて

mixinとは

mixinは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能です。

mixinの定義

@mixin mixin名 { コード }

momo

呼び出すときは@include mixin名;で呼び出すよ！

@mixin circle{
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  text-align: center;
  background-color: black;
}

.main {
  margin: 20px 10px;
  
  .small {
    @include circle;
    
    width: 10px;
    height: 10px;
  }
  
  .large {
     @include circle;
    
    width: 50px;
    height: 50px;
  }
}

引数を使ったmixinの定義

mixinの引数を指定しておくことで、includeから値を渡すことができます。

HTMLの記載↓

<div class="social">
  <a href="#"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

@mixin social($color){
  color:$color;
  padding: 3rem;
}
@mixin hoverColor{
  color:#d5d5d5;
}

.social{
  .fa-facebook{
    @include social(#3d5998);
      &:hover{
        @include hoverColor;
      } 
  }
}

関数の使い方

色を操作する関数はよく使われます。
HTMLの記載↓

    <div class="colorChange">
        <ul>
          <li class="orange1"></li>
          <li class="orange2"></li>
          <li class="black1"></li>
          <li class="black2"></li>
        </ul>
    </div>

Scssの記載↓

$orange:#fd7e00;
$black:#000;

.colorChange{
  margin-top: 10px;

  li{
    list-style: none;
    float: left;
    height: 50px;
    width:20%;
    margin-bottom: 10px;
  }
  .orange1{
    background-color:$orange;
  }
  .orange2{
    background-color:darken($orange,20%);
  }
  .black1{
    background-color:lighten($black,20%);
  }
  .black2{
    background-color:lighten($black,50%);
  }
}

結果