大阪のホームページ制作会社

変数、配列が使える

# 変数
$x: 640px;
$red: #c00;

# 配列
$baseColor: #c00, #933, #666, #fff;

変数を使う場合は「$」を頭につけると使える。
その後に「=」ではなく「:」を接続詞として使い、代入する値が一つの場合は変数として、カンマ(,)で区切ると配列として扱える。
これで、あの色の数値は〜と探す手間が減り作業効率があがる。

@eachで繰り返し処理が簡単にかける

変数を使っての繰り返し処理を行う場合、@eachを使うと簡単に処理が行える。

Sass

//カテゴリの指定
$category:home, about, strength, company, contact;
//カラーの指定
$colors: #fff, #369, #3c3, #c00, #F1C40F;

//ナビの処理
nav li{
  @each $cat in $category{
    $key: index($category, $cat);
    
    &#nav_#{$cat}{
      background: nth($colors,$key) url(./nav_#{$cat}.png) left center no-repeat;
    }
  }
}

css

nav li#nav_home {
  background: #fff url(./nav_home.png) left center no-repeat;
}
nav li#nav_about {
  background: #369 url(./nav_about.png) left center no-repeat;
}
nav li#nav_strength {
  background: #3c3 url(./nav_strength.png) left center no-repeat;
}
nav li#nav_company {
  background: #c00 url(./nav_company.png) left center no-repeat;
}
nav li#nav_contact {
  background: #F1C40F url(./nav_contact.png) left center no-repeat;
}

上記のように、同じような記述の処理を変数で定義しておくことで、今後の修正が楽になります。
JSとかと同じですね。

@for でも繰り返し処理が使える。

回数指定での繰り返し処理を行う場合はこちらを使用するほうが楽です。

Sass

//3回繰り返す
$length:3;
@for $i from 1 through $length {
  .title#{$i} {
    left: 10 * #{$i} px;
  }
}

css

.title1{
  left: 10px;
}
.title2{
  left: 20px;
}
.title3{
  left: 30px;
}

繰り返されて数が増えていくことによりポジションを変えるような処理にも使える。

@if で分岐を使えるので同じような処理がまとめてかける

Sass

@mixin linkstyle($style){
    //テキストリンクの時
    @if $style == textlink{
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
    //画像リンクの時
    @else if $style == imglink{
      &:hover{
        img{
          opacity: 0.7;
        }
      }
    }
}

a.text{
  @include linkstyle(textlink);
}
a.img{
  @include linkstyle(imglink);
}

css

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

a.img:hover img{
  opacity: 0.7;
}

ミックスインと併用し同じような処理を渡す引数によって分岐を行い、書き出すCSSを変えることができる。

@mixinを@each、@for、@ifと併用することで更に便利に使える

１例を紹介：@mixin + @if

@mixin

//ブレイクポイントを設定
$tablet: 1024;
$sp: 640;
 
@mixin media($size){
 
  //タブレット用
  @if $size == tablet{
    @media all and (max-width: $tablet + px) {
      @content
    }
  }
 
  //スマホ用
  @else if $size == sp{
    @media all and (max-width: $sp + px) {
      @content
    }
  } 
}

Sass

.content{
  width: 500px;
  float: left;
 
  //タブレットの場合
  @include media(tablet){
    margin: 0px;
  }
 
  //スマホの場合
  @include media(sp){
    width: 50%;
  }
}

css

.content{
  width: 500px;
  float: left;
}
//タブレットの場合
@media all and (max-width: 1024px){
  .content{
    margin: 0px;
  }
}
 
//スマホの場合
@media all and (max-width: 640px) {
  .content{
    width: 50%;
  }
}

よく使う処理は別ファイルとして貯めておけば、毎度毎度書くことを減らせますね。
@mixin + 繰り返しはナビゲーションなどのヘッダー・フッターで同じような処理をする場合に便利そうですね。
@contentは「;」がいらないんですね

まとめ

sassもJavaScriptと同じように、簡略することでのちの処理をしやすくしたり、別ファイルで予めまとめておくことで毎回書くということの処理を省くことができます。
新しい技術によりたくさんのことができるようになったことで、記述する手数が増える一方です。
その処理を少しでも減らす技術はどんどん取り入れていくべきなんでしょうね。
JSやCSSの自動化が最近、流行ってきてますね。
そちらもどんどん勉強して覚えていこう。
そして、残業なんでバイバイです！