Zenn
🐶

【Sass(Scss)】使うメリットと書き方

2023/05/22に公開
Scss
frontend
学習
tech

最近はscssを使うことが多いとのことで、私もさっそく勉強してみたのですが
とっても使いやすいのでまとめたいと思います✨

メリット

  • cssに比べてコードの記述量が圧倒的に少なくなるのでコーディングが楽になる
  • 複雑なコードも変数にできるので、再利用と修正の際に便利

記述方法

・ネスト（入れ子構造）での記述簡略化

親要素のセレクタを何度も書く必要がなくなる

#test {
    width: 1200px;
    margin: 0 auto;
    .title {
        margin-bottom: 20px;
        font-size: 20px;
    }
    .container .test002 {
        color: #e5004f;
    }
}


・変数が利用できる

変数設定ができて呼び出すことができる

$main-color: blue;

section{ 
    background-color:$main-color; /*blueが反映されます*/
}


・ミックスインが使用できる

@mixinでスタイルを指定しておけば、@includeで呼び出せる

@mixin button {
  display: inline-block;
  width: 300px;
}

.test{
  @include button  /*上の内容が反映される*/
}

と、こんな感じですが

これがとにかくメディアクエリに便利！！
$pc: 1024px; /*PC*/
$tab: 680px; /*タブレット*/
$sp: 480px;  /*スマホ*/

@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin tab {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

1～3行目：width（横幅）を変数を用意しています。
5行目：「pc」の部分は使用する時に呼び出す名前で、デバイスで統一するとわかりやすいです。
6行目：メディアクエリの横幅に１～３行目で指定した変数を使用しています。

.test {
  @include pc {
    background-color: red;
  };
  @include tab {
    background-color: blue;
  };
  @include sp {
    background-color: yellow;
  };
}

こんなにすっきり💛

・ifが使える

$red: 0;
$blue: 1;

.test1 {
  @if $red == 1 {  /*条件があっていないので反映されない*/
    color: white;
    background-color: blue;
  }
}

.test2 {
  @if $blue == 1 {  /*条件があっているので反映される*/
    color: white;
    background-color: blue;
  }
}



あとは、ファイルを分割し管理がしやすい等があります。

_header.scss
_main.scss

のようにファイルを分割することで修正するファイルがわかりやすいので
管理がしやすくなります。


あとがき

以上、scssについてまとめてみました！
一度前に勉強していたのですが、ネストくらいしか使っていなかったので…
やはりちゃんとまとめるとしっかり身に付きそうです🙌

Discussion