Sassでよく使う機能を5つ厳選して徹底解説！

<header class="header">
  <nav>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
    </ul>
  </nav>
</header>

 

.header {
  position: fixed;
  width: 100%;
}
.header ul {
  display: flex;
  justify-content: center;
}
.header li {
  font-size: 20px;
}
.header a {
  color: #ccc;
  text-decoration: none;
}

<header class="header">
  <nav>
    <ul class="header__inner">
      <li class="header__item">
        <a href="#" class="header__link">menu1</a>
      </li>
      <li class="header__item">
        <a href="#" class="header__link">menu2</a>
      </li>
      <li class="header__item">
        <a href="#" class="header__link">menu3</a>
      </li>
    </ul>
  </nav>
</header>

.header {
  position: fixed;
  width: 100%;
}
.header__inner {
  display: flex;
  justify-content: center;
}
.header__item {
  font-size: 20px;
}
.header__link {
  color: #ccc;
  text-decoration: none;
}
.header__link:after {
  content: ">";
  height: 50px;
  position: absolute;
  width: 50px;
}
.header__link:hover {
  color: #2ecc71;
}
.header__link:not(:first-of-type) {
  margin-left: 20px;
}

 

.header {
  position: fixed;
  width: 100%;
  &__inner {
    display: flex;
    justify-content: center;
  }
  &__item {
    font-size: 20px;
  }
  &__link {
    color: #ccc;
    text-decoration: none;
    &:after {
      content: ">";
      height: 50px;
      position: absolute;
      width: 50px;
    }
    &:hover {
      color: #2ecc71;
    }
    &:not(:first-of-type) {
      margin-left: 20px;
    }
  }
}

.header {
  background-color: #fff;
  color: #35b0b9;
}
.top {
  background-color: #fff;
  color: #35b0b9;
}
.about {
  background-color: #fff;
  color: #35b0b9;
}
.news {
  background-color: #fff;
  color: #35b0b9;
}

.header {
  background-color: $color-main;
  color: $color-font;
}
.top {
  background-color: $color-main;
  color: $color-font;
}
.about {
  background-color: $color-main;
  color: $color-font;
}
.news {
  background-color: $color-main;
  color: $color-font;
}

@import "section/header";

といった感じで書きます。

@import ” フォルダー名 / ファイル名“; ですね。

ファイル名に関してはアンダースコアと拡張子は省略できるので、_header.scss ではなく header でOKです。

※ここで注意点が1つ

変数をまとめたファイルは一番上に書かないとダメってことです。

ファイルは上から順番に読み込んでいくので、変数を使ったファイルが変数を設定したファイルより前にあると変数として認識してくれません

 

mixin

@mixin btn {
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.moreBtn {
  @include btn;
}

 

.moreBtn {
  display: inline-block;
  margin: 0;
  padding: 10px;
}

@mixin ミックスイン名 {
  定義したいCSSのプロパティ
}
セレクタ {
  @include ミックスイン名;
}

 

となります。

変数の場合は1つのプロパティしか設定できませんが、mixinの場合はスタイルの集まりでまとめる事が出来るので、全てのページのボタンが共通のデザインだった場合などに活躍します。

これもメリットは変数と同じで、もしサイトに同じデザインのボタンが20個あった場合でも、mixinを使っていれば修正するときはmixinの中を変えればいいだけになります。

ただ全部同じclass名にすればいいんじゃないかと思うかも知れませんが、次に解説する引数が使える点や、@includeが使われていれば共通のパーツなんだなとすぐ分かります。

 

mixinで引数を使う

 

またmixinでは引数(変数)を使う事が出来ます。

引数の説明より例を見た方が早いと思います。まずはscssを見てみます。

@mixin btn($color) {
  color: $color;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.moreBtn {
  @include btn(#fff);
}
.nextBtn {
  @include btn(#333);
}

.moreBtn {
  color: #fff;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.nextBtn {
  color: #333;
  display: inline-block;
  margin: 0;
  padding: 10px;
}

@mixin btn($color: #333) {
  color: $color;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.moreBtn {
  @include btn();
}
.nextBtn {
  @include btn(#fff);
}

.moreBtn {
  color: #333;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.nextBtn {
  color: #fff;
  display: inline-block;
  margin: 0;
  padding: 10px;
}

@mixin btn($color, $margin) {
  color: $color;
  display: inline-block;
  margin: $margin;
  padding: 10px;
}
.moreBtn {
  @include moreBtn(#333, 10px);
}

.moreBtn {
  color: #333;
  display: inline-block;
  margin: 10px;
  padding: 10px;
}

.btn {
  line-height: ( 24 / 16 );
  width: 100px + 20;
}

.btn {
  line-height: 1.5;
  width: 120px;
}

リンク