• LIGの広告成功事例
WEB

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

@content でMedia Queriesを管理

@contentはMedia Queriesを設定するのに最適です( ˇωˇ )
例としてMedia Queriesのmixinを作りました。

mixin

@contentで任意のスタイルが記述できるように設定ができます( ˇωˇ )

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

@content style

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

@mixin query($size){
  
  //メディアqueryの設定
  @media all and (max-width: $size + px) {
    //styleを記述できるように設定
    @content;
  }
  
}

mixin 呼び出し方

@include query(指定したいサイズ);で呼び出せば、簡単にMedia Queriesを設定することができます( ˇωˇ )

.content{
  display: none;
  @include query(320) {
    display: block;
  }
}

生成されるCSS

CSSはこのように生成されます( ˇωˇ )

.content {
  display: none; }
  @media all and (max-width: 320px) {
    .content {
      display: block; } 
}

@if+@content でブレイクポイントをブラウザごとに設計する

ブラウザごとのサイズを@ifを使って設計することができます( ˇωˇ )

Sass mixin

はじめにデバイスサイズごとにあらかじめ変数で定義をします( ˇωˇ )

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

@if+@content style

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

//ブレイクポイントを設定
$tablet: 1024px;
$sp: 640px;
$iphone: 320px;

@mixin media($mediaSize){

  //もしタブレットだったら
  @if $mediaSize == tablet{
    @media all and (max-width: $tablet + px) {
      @content
    }
  }

  //もしスマホだったら
  @else if $mediaSize == sp{
    @media all and (max-width: $sp + px) {
      @content
    }
  }

  //もしiphoneだったら
  @else if $mediaSize == iPhone{
    @media all and (max-width: $iphone + px){
      @content
    }
  }

}

mixin 呼び出し方

ifで区切っているので、指定したいデバイスを呼び出せば簡単に設定できます( ˇωˇ )

.content{
  width: 500px;
  float: left;

  //タブレットの場合
  @include media(tablet){
    margin: 0px;
  }

  //スマホの場合
  @include media(sp){
    width: 50%;
  }

  //iPhoneの場合
  @include media(iPhone){
    width: 100%;
    float: none;
  }
}

生成されたCSS

.content {
  width: 500px;
  float: left; }
  @media all and (max-width: 1024px) {
    .content {
      margin: 0px; }
}
  @media all and (max-width: 640px) {
    .content {
      width: 50%; } 
}
  @media all and (max-width: 320px) {
    .content {
      width: 100%;
      float: none; } 
}

まとめ

いかがでしたでしょうか。
SassもJavaScriptのように、ループで回したり条件をわけたりできるなど、なかなか奥が深いなと思いました。

これでより効率のいいコーディングができたらと思います( ˇωˇ )

この記事を書いた人

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