LIGデザイナー採用
LIGデザイナー採用
2015.11.12

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

はやち
編集部追記(2015年11月12日)記事中に誤字がありましたので、修正いたしました。ご指摘いただきましたrinxmoonさん、ありがとうございました。

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

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

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

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

もくじ

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

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


同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ )

使用方法

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; }
  • 1
  • 2