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

もっと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; }

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

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む