コーディングの勉強

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

こんにちは。mito(@mito_works)です。

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

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

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

mito
mito
30DAYSトライアルの2ndステージ。より実践レベルのトライアルです!
momo
momo
2ndのDAY5,6はprogateを使ってSassを学んでいくよ!

Sass(サス)とは

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

mito
mito
SASS記法とSCSS記法の2種類の書き方があります。私はSCSS記法を学びました。
momo
momo
ファイルの拡張子もcssではなく、scssになるよ!
メリット
  1. CSSより記述量を減らせること
  2. コードを再利用できること

入れ子構造の使い方

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
momo
同じセレクタをなんども書かなくてすむね!

&記号の使い方

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

momo
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
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
momo
右の値を左の変数に入れる(代入)という意味だよ。
$hover-color:#d5d5d5;

.fa-facebook{
  color: #3d5998;

 &:hover{
  color: $hover-color;
  }
}
mito
mito
他でも使い回しができるので便利ですね。
  1. 入れ子構造
  2. 変数代入
  3. &記号

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

mixinについて

mixinとは

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

mixinの定義

@mixin mixin名 { コード }

momo
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%);
  }
}

 

結果

まとめ

これまで取り上げてきた書き方を実践することで効率的にコードが書けます。
環境設定については、VS codeの拡張機能「Easy Sass」で作りました。

VS codeについての記事はこちらです。

Visual Studio Codeの便利なショートカットキーこんにちは、mito(@mito_works)です! 今回は、ソースコードエディタのVSCode(Visual Studio Co...

 

 

 

ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。