コーディングのスピードが上がるSassの特徴

2020/8/9

どうも松井です。

webサイトやwebサービスなどのフロント部分の実装において、Sassを導入したり、自分なりのアセットを持っているとスピードが格段に上がります。

実際自分自身も、もう通常のCSSで書かなくなってから、コーディングがだいぶと楽になりました。Sassの特徴を「Sassの教科書改正2版」を元に、全てとは言えないですが、よく使う事を中心に書き出してみました。

ちなみにgulpでのコンパイル記事はこちらから確認できます。

Sassの導入とgulp4でコンパイルして自動監視する方法

-(ハイフン)のあるプロパティはすべてネストできる

Sassはネスト構造で書ける事が特徴ですが、-(ハイフン)のあるプロパティもネスト構造でかけます。

.sample{
  text:{
     shadow: 1px 1px 0 #fff;
     align: center;
  }
  z:{
    index: 5;
  }
}

.sample{
   text-shadow:  1px 1px 0 #fff;
   text-align: center;
}

変数定義ができる

Sassは変数定義ができるようです。変数を定義しておけば、プライマリー、セカンダリーなどの指定したカラーを何度も使うのも非常に便利です。

$primaryColor : #cf2d3a;

.notes{
 color: $primaryColor;
}
.notesBox{
 border: 1px solid $primaryColor;
}

.notes{
 color: #cf2d3a;
}
.notesBox{
 border: 1px solid #cf2d3a;
}

@import

通常のCSSと同様に分割した外部のCSSファイルを読み込める。@Importを使えば、複数のスタイルシートを読み込む事ができます。読み込み方は、下記の4種類です。

@import url("main.scss");
@import url(main.scss);
@import "main.scss";
@import 'main.scss';

@extend

セレクタのスタイル継承ができる。セレクタってちょっとわかりづらいですが、あるクラスのスタイルを@extendを用いる事で、クラス内のスタイルをまとめて継承ができるという事です。

.box{
  text-align:center;
  margin: 0 auto;
  padding: 20px;
}
.item{
  @extend .box;
}

.box, .item{
  text-align:center;
  margin: 0 auto;
  padding: 20px;
}

@mixin

スタイルの集まりを定義して呼び出せる。@extendの実行内容とほぼ同じように見えますが、@extendは一度使ったスタイルを継承するもので、@mixinは、定義した物を@includeで呼び出します。そのため、一度定義しておけば、いつでも呼び出して使う事ができます。

@mixin box{
  text-align:center;
  margin: 0 auto;
  padding: 20px;
}
.item{
 @lnclude box;
}

.item{
  text-align:center;
  margin: 0 auto;
  padding: 20px;
}

さらに、引数を使う事もできます。

@mixin kadomaru($value){
 -moz-border-radius: $value;
 -webkit-border-radius: $value;
 border-radius: $value;
}
.box{
  @include kadomaru(3px);
  bakground: #eee;
}

.box{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  bakground: #eee;
}

@at-root

親のセレクタから除外できる。つまり、@at-rootを記述したクラスは、親のネスト構造から外れる事ができます。この部分だけは、親のネストから外して書きたいということは結構あります。覚えておくと便利です。

.block{
   .element-A{
   width: 80%;
   }
   @at-root .element-B{
   width: 100%;
   }
}

.block .element-A{
   width: 80%;
}
.element-B{
   width: 100%;
}

@if

条件分岐ができる。Sassを使えば、条件分岐(@if, @else, @else if)などの条件分岐を書く事ができます。

$generalStyle: 0;

@minxin style{
  @if $generalStyle == 1{
     margin: 0 0 30px;
     padding: 15px;
     background: #eee;
  }
  @else if $generalStyle == 2{
    margin: 0 10px 15px;
    padding: 20px 15px;
    border: 2px solid #333;
  }
  @else{
    margin: 0 0 10px;
  }
}
.box{
 @include style;
}

.box{
  margin: 0 0 10px;
}

@for

繰り返しの処理ができる。if文同様にSassでは、for文も利用化可能です。

@for $value from 1 through 3{
  .throughSample_#{$value}{
    margin-bottom: 1px * $value;
  }
}

@for $value from 1 to 3{
  .toSample_#{$value}{
    margin-bottom: 1px * $value;
  }
}

.throughSample_1{
  margin-bottom: 1px;
}
.throughSample_2{
  margin-bottom: 2px;
}
.throughSample_3{
  margin-bottom: 3px;
}
.toSample_1{
  margin-bottom: 1px;
}
.toSample_2{
  margin-bottom: 2px;
}

@while

条件が満たす間繰り返し処理が行える。if/for/while文などの説明は、Sassの特徴ではないですが、Sassでは@while文も使えます。

$value: 300;
@while $value > 200{
   .box_#{$value}{
      width: 2px * $value;
   }
   $value: $value - 32;
}

 .box_300{
   width: 600px;
 }
 .box_268{
   width: 536px;
 }
 .box_236{
   width: 472px;
 }
 .box_204{
   width: 408px;
 }

@each

リストの要素それぞれに対して記述した処理を行える。コンテンツの背景画像など、ある一定のルールを持って表示させるときには使えます。

$nameList: top, about, company, contact;

@each $name in $nameList{
  .body-#{$name}{
     background-image: url(../img/bg_#{$name}.png);
  }
}

.body-top{
  background-image: url(../img/bg_top.png);
}
.body-about{
  background-image: url(../img/bg_about.png);
} 
.body-company{
  background-image: url(../img/bg_company.png);
} 
.body-contact{
  background-image: url(../img/bg_contact.png);
}

@function

自作関数を定義できる。Sassでは、引数を設定して@returnで戻り値を書く事で、関数を作る事ができます。また、ネイティブ関数を使う事もできます。mixinでも似たような事ができるので、そこまで活躍の場がないとは思いますが、関数を作れるのもSassの特徴だと思います。

@function harfSize($value){
  @return round($value / 2 );
}
.boxArea{
  width: harfSize(105px);
}

.boxArea{
  width: 53px;
}

lighten()

lighten()を使えば、簡単にトーンを調節できます。設定をするだけで、色を変換できます。

body{
 background: lighten(#000, 30%);
}

body{
 background: #4d4d4d;
}

darken()

lighten()とは反対に、darken()を設定すれば、暗い色を簡単に設定できます。

body{
 background: lighten(#fff, 20%);
}

body{
 background: #cccccc;
}

selector-replace()

セレクタを置き換えたり、別のセレクタを割り込ませる事ができる関数です。使う形は、selector-replace($selector, $orignal, $replacement)となります。$selectorは、参照したいセレクタを指定。$orignalは、置き換える対象を指定、$replacementで、置き換え後のセレクタを指定します。

#{selector-replace(".item .text",".text",".image")}{
   float:left;
}

.item .image{
  float: left;
}

#{}

インターポレーションは、変数が参照できない場合でも使えるようにする機能です。

$imagePath: '../common/image/' ;

#mainVisual{
  background: url(#{imagePath}mainVisual.jpg);
}

#mainVisual{
  background: url(../common/image/mainVisual.jpg);
}

管理/運用を楽にしておく

Sassは、定義したり関数を使う事、より少ないコードで実装ができるのも特徴なので、予め設定ファイルを作成しておき、現場ではそれを雛形としてやっていくとコーディングも楽になります。

今回は「Sassの教科書改正2版」の中からよく使うものを纏めましたが、さらに深く知りたい方は是非読んでみてください。

gulp側での設定でさらに、実装を楽にできるようなので、また別の機会に紹介したいと思います。ではでは。

Sass WEB制作技術

松井貴史

顧問・パートナー型の受託専門WEBデザイナー兼ディベロッパー。UXUI改善運用からWEBシステム開発までワンストップで提供しています。自身でもデザイナー発！個人開発者として日々の気づき、アクション、考え、ノウハウをTwitterで発信中。オンラインゲームSAKETUMA開発

Follow @matui_takafumi

類似記事

ユーザーの課題を解決できる記事を書こう！「10年つかえるSEOの基本」

2020/5/9

WEB関係者はダークパターンには手を染めるな！「ザ・ダークパターンユーザーの心や行動をあざむくデザイン」

2022/8/16

短時間でも仕事力も収入も上げる、勝間式スローライフのススメ

2020/10/29

仕事が早い人は、何が違うのか。仕事ができる人が行っている実戦テクニック

2020/8/28