もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選

どうもですよ、はやちですよ٩( ᐛ )و

ここ最近、お昼休みに社内のキッチンでお昼ごはんを作るのに目覚めてしまいました。会社にある食材で、いかに0円で過ごせるかを日々考えるのが楽しくなってきたしだいです( ˇωˇ )

そんなことはどうでもいいですね٩( ᐛ )و

今回は、Sassのコーディングに少し慣れてきた人のために「ワンランク上なSassコーディング方法」をまとめましたので、ご紹介します( ˇωˇ )

もくじ

• @each でカテゴリーごとにスタイルを管理
• @if テキストリンクのスタイルの管理
• @content でメディアクエリーを管理
• @if+@content でブレイクポイントをより効率よく管理

@each でカテゴリーごとにスタイルを管理

以前に書いた記事「Sassの@eachで同じスタイルをラクチンに管理をする方法」でもご紹介させていただきました( ˇωˇ )

Sassの@eachで同じスタイルをラクチンに管理をする方法

はやち

2014.04.24

使用方法

html

<section id="nav">
 <ul>
   <li class="nav_home"><a href="#">HOME</a></li>
   <li class="nav_about"><a href="#">ABOUT</a></li>
   <li class="nav_company"><a href="#">COMPANY</a></li>
   <li class="nav_contact"><a href="#">CONTACT</a></li>
 </ul>
</section>
<!-- / #nav -->

Sass

以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります( ˇωˇ )

/* ===================================================================

@each style

=================================================================== */

//色の変数
$green:#1ABC9C;
$blue:#3498DB;
$orange:#E67E22;
$yellow:#F1C40F;

//色の配列
$colors: $green, $blue, $orange, $yellow;

//カテゴリーの配列
$nameList:home, about, company, contact;

#nav li{
  //$navNameが$nameList分処理が行う
  @each $navName in $nameList{
    
    //クラス用のインデックスの設定
    $indexKey: index($nameList,$navName);
    
    //$colorsが$indexKey分回る数を設定
    $colorLists: nth($colors,$indexKey);

    &.nav_#{$navName}{
      a{
        background:$colorLists url("../images/icon_#{$navName}.png") no-repeat 12px 15px;
      }
    }

  }
}

生成されたCSS

/* ===================================================================

@each style

=================================================================== */
#nav li.nav_home a {
  background: #1ABC9C url("../images/icon_home.png") no-repeat 12px 15px; }

#nav li.nav_about a {
  background: #3498DB url("../images/icon_about.png") no-repeat 12px 15px; }

#nav li.nav_company a {
  background: #E67E22 url("../images/icon_company.png") no-repeat 12px 15px; }

#nav li.nav_contact a {
  background: #F1C40F url("../images/icon_contact.png") no-repeat 12px 15px; }

@if でテキストリンクのスタイル管理

@ifは@mixinを設計するときに使いやすいです。
参考までに、テキストリンクスタイルを管理する方法をご紹介します。

例文

JavaScriptのif文のように条件をつけることができます。

@mixin textLink(設定する文言){
    @if 設定する文言 == ○○だったとき{
       実行されるスタイル
    }
}

Sass mixin

@else if で連続で設定することができます( ˇωˇ )

/* ===================================================================

@if style

=================================================================== */

/*
mixinを設定
*/

@mixin textLink($style){

  //$styleがlinkLineだった時　常に下線が出る
  @if $style == linkLine{
    text-decoration: underline;
    &:hover{
      text-decoration: underline;
    }
  }

  //$styleがhoverLineだった時　hover時に下線が消える
  @else if $style == hoverLine{
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }

  //$styleがhoverOpacityだった時　hover時に薄くなる
  @else if $style == hoverOpacity{
    text-decoration: none;
    &:hover{
      opacity: 0.7;
    }
  }

  //$styleがnoLinkだった時　常に下線が消えている
  @else if $style == noLine{
    text-decoration: none;
    &:hover{
      text-decoration: none;
    }
  }

}

mixin 呼び出し方

使用するときは呼び出したいclassやセレクタに対して@include textLink();で呼び出します( ˇωˇ )

/*
呼び出し方法
*/

//常に下線が出ている
.linkLine a {
  @include textLink(linkLine);
}

//hover時に下線が消える
.hoverLine a {
  @include textLink(hoverLine);
}

//hover時に薄くなる
.hoverOpacity a {
  @include textLink(hoverOpacity);
}

//常に下線が消えている
.noLine a {
  @include textLink(noLink);
}

生成されるCSS

mixinを一つ設定するためにリンクの使い分けができるのでおすすめです( ˇωˇ )

/* ===================================================================

@if style

=================================================================== */

.linkLine a {
  text-decoration: underline; }
  .linkLine a:hover {
    text-decoration: underline; }

.hoverLine a {
  text-decoration: none; }
  .hoverLine a:hover {
    text-decoration: underline; }

.hoverOpacity a {
  text-decoration: none; }
  .hoverOpacity a:hover {
    opacity: 0.7; }

.noLink a {
    text-decoration: none; }
    .noLink a:hover {
     opacity: 0.7; }

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。