デイトラweb制作中級編 DAY7

Sassとは

SassとはCSSをより楽に書くための言語であり上位互換

・「SCSS」スタイル → CSSと同じようにカッコでくくる(主流)

・「SASS」スタイル → Rubyみたいなインデント形式

Sassの要点

①入れ子

②疑似要素とクラス

③変数

mixinを使ったブレイクポイントの記述

Sassの書き方

①入れ子

入れ子のメリット

→ 書くコードの量が圧倒的に少なくなる

→ 構造が把握しやすい


例:親要素「.lists」class、子要素「li」タグ、孫要素「a」タグ

.lists {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;

   li {
       width: 25%;
       text-align: center;
   
       a {
           color: #333;
       }
   }
}

疑似要素とクラス

&を使うことで前の要素(親要素、子要素...)を引き継げる


例:親要素「.lists」、子要素「li」、孫要素「a」 、hover」要素 active」class

.lists {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;

   li {
       width: 25%;
       text-align: center;

       a {
           color: #333;

           &:hover {
               color: #da1e32;
           }

           &.active {
               color: #da1e32;
           }
       }
   }
}

③変数

変数を定義することで、値を変更したいときに一括でできる


例:「a」タグの色を「#333」にしたいとき

$link-color-base: #333;

a {
   color: $link-color-base;
}

変数を使うことで四則演算もできる


例:「a」タグの「font-size」を2px大きくしたいとき

$link-font-size: 16px;

a {
   font-size: $link-font-size + 2px;
}

定義したスタイルの使い回し

@extend → 一度定義したクラスを、他のクラスに継承する

@mixin → @extend + 「引数」でカスタマイズ性が大幅にアップ(こっちをよく使う


@extendの例:「a」タグと「p」タグに「button」classの機能をつけたいとき

.button {
  color: #333;
  font-size: 16px;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid #333;
  text-decoration: none;
}

a {
   color: red;
   @extend .button;
}

p {
   color: blue;
   @extend .button;
}

@mixinの例:「a」タグは12px、「p」タグは14pxのfont-sizeで「button」の機能をつけたいとき

@mixin button($font-size) {
  color: #333;
  font-size: $font-size;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid #333;
  text-decoration: none;
}

a {
   color: red;
   @include button( 12px );
}

p {
   color: bule;
   @include button( 14px );
}

mixinを使ったブレイクポイントの記述

1. ブレイクポイントを指定する

$pc: 1080px;
$tab: 768px;
$sp: 480px;

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

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

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

2. 「@include」で呼び出す

.block {
  width: 30%;

  @include pc {
    width: 50%;
  }

  @include tab {
    width: 80%;
  }

  @include sp {
    width: 100%;
  }
}

コンパイル(CSSに変換)した結果

.block {
  width: 30%;
}

@media screen and (max-width: 1080px) {
  .block {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .block {
    width: 80%;
  }
}

@media screen and (max-width: 480px) {
  .block {
    width: 100%;
  }
}

標準設定 → 「block」classの「width」が30%表示

1080px以下(pc) → 「block」classの「width」が50%表示

768px以下(タブレット) → 「block」classの「width」が80%表示

480px以下(スマホ) → 「block」classの「width」が100%表示

⑥関数(function

独自の関数をつくる


例:

・変数「$link-font-size」を16px

・functionを「activeFontSize()」、引数を「$base-size」

・「$base-size」の定義 → 「$base-size」 + 2pxを返り値にする

・「a」タグに適用

$link-font-size: 16px;

@function activeFontSize($base-size){
    @return $base-size + 2px;
}

a {
   font-size: activeFontSize($link-font-size);
}

関数と「return」による返り値の取得 → デイトラweb制作中級編 DAY1

まとめ

今回はSassについて学習しました!

Day7の中で一番大変だと思ったのは、mixinを使ったメディアクエリの設定です。

いろんな変数を定義して、頭が混乱したので今日はしっかり休みたいと思います。。。

コメントを残す

メールアドレスが公開されることはありません。