技術系

久々にSassを使うヨ②

技術系

こんにちは、なかにしです。

Sass、書いていきます！わくわく🐱

まずはHTMLの準備

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samples</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/sample.css" />
  </head>

  <body>
    <div class="goodmorning">おはよう。</div>
    <div class="hello">こんにちは。</div>
    <div class="googevening">こんばんは。</div>
  </body>

</html>

linkタグでコンパイルされたCSS & 事前に用意したreset.cssを読み込みます。

bodyの中は適当に挨拶を表示するdivを作成しました。
▽現在がこちら

準備完了！
やっていきます！

Sassの基礎

①変数の使い回し
SassではJSやPHPと同じように、変数に値を入れて使い回すことができます。
色を変数に入れて使い回すことが多いです。

$main_color: rgb(231, 114, 114);

.goodmorning{
  color: $main_color;
}

.hello{
  color: $main_color;
}

.googevening{
  color: $main_color;
}

$main_color に赤色を入れました。
これでいちいち指定しなくても$main_color で使い回せます。

▽バッチリ赤色ですね。

②入れ子の指定

 <body>
    <div class="goodmorning">
      <p>おはよう。</p>
    </div>

    <p>やほ～</p>
  </body>

「goodmorningクラス配下のpのみ」に色をつけたいときは入れ子にします。

$sub_color: rgb(66, 205, 240);

.goodmorning{
  p{
    color: $sub_color;
  }
}

▽結果

隣接セレクタ、直下セレクタなどもCSSと同じように書けます。
ここで問題です！！

▽現状のHTMLはこちら

  <body>
    <div class="morning">
      <p>おはよう。</p>

      <div class="morning__hello">
        <p>こんにちは。</p>
        <p>こんにちは。</p>
      </div>

      <div class="morning__evening">こんばんは。</div>
      <div class="morning__vening">こんばんは。</div>
      <div class="morning__evening">こんばんは。</div>
    </div>

    <p>やほ～</p>
  </body>

これに以下の指定をしたとき、色はどうなるでしょうか？

$main_color: rgb(231, 114, 114);
$sub_color: rgb(66, 205, 240);

.morning{
  >p{
    color: $main_color;
  }

  .morning__hello{
    +.morning__evening{
      color: $sub_color;
    }
  }
}

正解は…
▽こちらです！

③疑似要素の指定

  <body>
    <button class="btn">ボタンです。</button>
  </body>

hoverやbeforeなどの疑似要素は&で指定します。

$main_color: rgb(231, 114, 114);
$sub_color: rgb(66, 205, 240);

.btn{
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  background-color: $main_color;
  transition: .5s;
  
  &:hover{
    border: 1px solid $main_color;
    color: $main_color;
    background-color: #FFFFFF;
  }
}

④if文、for文

▽if文

  <body>
    <button class="btn">ボタンです。</button>
  </body>
$a: "aaa";

.btn{
  @if $a == "aaa"{
    background-color:$main_color;
  }
}

▽for文(ちょっと癖ある)

  <body>
    <button class="btn1">ボタンです。</button>
    <button class="btn2">ボタンです。</button>
    <button class="btn3">ボタンです。</button>
    <button class="btn4">ボタンです。</button>
  </body>
@for $i from 1 through 4{
  .btn#{$i} {
    width: 100px * $i;
  }
}

▽コンパイル後

.btn1 {
  width: 100px;
}

.btn2 {
  width: 200px;
}

.btn3 {
  width: 300px;
}

.btn4 {
  width: 400px;
}

⑤関数

▽文法

// 宣言
@mixin 関数名(引数１, 引数２, ...) {
  関数の中身
}

// 使い方
@include 関数名(引数１, 引数２, ...);

▽実践！

  <body>
    <div class="sample">サンプル</div>
  </body>
$pc_color: rgb(231, 114, 114);
$tb_color: rgb(66, 205, 240);
$sp_color: rgb(97, 243, 182);

$pc-width: 1025px;
$tb-width: 600px;

@mixin screen($width){
  @media screen and (min-width: $width) {
    @content;
  }
}

.sample{
  background-color: $sp_color;

  @include screen($tb-width){
    background-color: $tb_color;
  }

  @include screen($pc-width){
    background-color: $pc_color;
  }
}

モバイルファーストでブレイクポイントをサクッと設定しました！
まだ慣れていないですが、何かかっこいいのは伝わります。

今後のブレイクポイントの指定は絶対これ使おーっと！

@mixin screen($width) の部分は
JSで言うところの function scree(width) って感じですね！

FLOCSSとBEM

流行りの FLOCSS × BEM で適当に作ってまとめてみました！
▽ボタンを押すと図形がどんどん急いで動いていくという謎アニメーションです。

アニメーションを入れたのは jsフォルダの分け方も経験しておきたかったからです🙌

▽今回、フォルダはこんな感じで分けました

scss/
├─ foundation/
│　├─ _base.scss
│　├─ _reset.scss
│　├─ _variable.scss
│　├─ _mixin.scss
│　└─ _index.scss
├─ layout/
│　├─ _l-header.scss
│　├─ _l-main.scss
│　├─ _l-footer.scss
│　└─ _index.scss
├─ object/
│　├─ component/
│　│　├─ _c-button.scss
│　│　├─ _c-circle.scss
│　│　└─ _index.scss
│　├─ project/
│　│　├─ _p-sample.scss
│　│　└─ _index.scss
│　└─ utility/
│　　  └─ _index.scss
└─ style.scss

王道のまとめ方ですね。
各index.scssで@forwardしてstyle.scssで一括@useしてコンパイルしてます。

▽誰にも需要ないけど一応index.htmlの中身乗せときます。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samples</title>
    <link rel="stylesheet" href="./css/style.css" />

    <script src="./js/index.js"></script>
  </head>

  <body>
    <header class="l-header">
      <p>株式会社なかにし</p>
      <button class="l-header__button c-button">メニュー</button>
    </header>

    <main class="l-main">
      <div class="p-sample">
        <canvas width="500" height="300" class="c-circle js-drawCircle">canvas要素をサポートしていません。</canvas>
        <p>どんどん急ぐよ！</p>
        <button onclick="drawCircle()" class="c-button js-button">いくぜ！</button>
      </div>
    </main>
  </body>
</html>

そういえばcanvas要素のy軸って上が+かと思ってましたが、下が+なんですね…
作った図形が遙か上に飛んでいって笑いました。

おわりに

今回はSassの使い方についてまとめました！

今まではCSS × BEM ばかり使っていましたが、Sassの便利さを理解したので
今後は Sass × FLOCSS × BEM を積極的に使っていきます！！

今回はここまで！
Enjoy Hacking!!

スポンサーリンク
タイトルとURLをコピーしました