Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 276
content=""/> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 276
content="" /> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 276
content="" />

Web制作 × AI

【CSS】Sassの備忘録

コーディングの速度を上げるためにSassを使い始めて2年が経過しました。今では新規案件のコーディングを行う際には必ずと言っていいほど使用しています。
今回はよく使う機能をメモ代わりにまとめておきたいと思いますので、何かの参考になれば幸いです。

使用している機能

ネスト

基本中の基本。まずは、ネストを使用することでSassに慣れるのが良いと思われます。

&(アンパサンド)

疑似クラスなどを記述する際に必ずといってよいほど使用するようになりました。また、BEMをベースにして設計した場合は特に役に立つのではないでしょうか?

/* -- コンパイル前(SCSS)--*/
a {
    color: red;
    &.current {
        color: blue;
    }
    &:hover {
        text-decoration: underline;
    }
}

/* -- コンパイル後(css)--*/
a {
    color: red;
}
a.current {
    color: blue;
}
a:hover {
    text-decoration: underline;
}

/* -- BEMを意識した場合の記述方法の例--*/

.sns-area {
    display: table;
    width: 100%;
    &_head {
        display: table-cell;
        vertical-align: middle;
        width: 120px;
        font-size: 14px;
    }
    &_body {
        display: table-cell;
        vertical-align: middle;
    }
}

/* -- コンパイル後(css)--*/
.sns-area {
    display: table;
    width: 100%;
}

.sns-area_head {
    display: table-cell;
    vertical-align: middle;
    width: 120px;
    font-size: 14px;
}

.sns-area_body {
    display: table-cell;
    vertical-align: middle;
}

演算

演算機能は四則演算をSassがやってくれるので、いちいいち電卓を使用する必要性がなくなります。

padding: 10px + 10px;
padding: 10px - 10px;
padding: 10px * 10;
padding: (10px / 10);

※注意点
padding: (10px * 10px);
のような単位通しの乗算はNGとなります。

変数

javascriptでおなじみの変数。Sassの場合だと変数化した箇所を一括で数値の更新がでるので便利です。

/* -- $common_widthという変数を作成する--*/
$common_width: 650px;

/* -- $common_widthは650pxなので下記のwidthは630pxとなる--*/
#contents {
   width: $common_width - 20;
}

Mixin

同じ処理をまとめて記述できます。引数を使用することで、さらに便利な使いかたができます。下記の例だとborderの色とfont-sizeの数値を引数としています。

@mixin box($color:#666,$fz:12px) {
  border-bottom: 1px solid $color;
  font-size: $fz;
}

#wrap {
  @include box(#999);

  .inner {
    overflow: hidden;
    @include box($fz:16px);
  }
}

/* -- コンパイル後(css)--*/
#wrap {
  border-bottom: 1px solid #999;
  font-size: 12px;
}

#wrap .inner {
  overflow: hidden;
  border-bottom: 1px solid #666;
  font-size: 16px;
}

for文

一定パターンの記述を行い時に便利です。下記のサンプルではmarginとpaddingが5ずつ増えていく処理が5回行われる指示を与えています。$iをクラス名にも使用することでクラス名が5ずつ増える仕組みにもなっています。


@for $i from 0 through 5 {
  .box-#{$i * 5} {
    margin:#{$i * 5}px;
  }
  .block-#{$i * 5} {
    padding:#{$i * 5}px;
  }
}
/* -- コンパイル後(css)--*/
.box-0 {
  margin: 0px;
}

.block-0 {
  padding: 0px;
}

.box-5 {
  margin: 5px;
}

.block-5 {
  padding: 5px;
}

.box-10 {
  margin: 10px;
}

.block-10 {
  padding: 10px;
}

.box-15 {
  margin: 15px;
}

.block-15 {
  padding: 15px;
}

.box-20 {
  margin: 20px;
}

.block-20 {
  padding: 20px;
}

.box-25 {
  margin: 25px;
}

.block-25 {
  padding: 25px;
}

使用しているツール

Gulp
定番。しかし、簡単な修正案件などへ導入するには腰が重くなることも。コマンドプロンプトを使用する必要があるので慣れるまで少し時間がかかる。
Sublime Text2
gulpがインストールされていればパッケージのインストールをするくだけで手軽にスタートできる。
文字コードが原因でコンパイルができなくなる時がある
Prepros
GUIのコンパイラ。非常に優秀で手っ取り早くSassを使用する際には便利。 しかし、現在は有料となっている。
Koala
GUIのコンパイラ。最近使用することが多い。標準設定でChromeのデベロッパーツールにてスタイルのデバッグ時にSassのファイルの場所を表示してくれます。他のツールだとコンパイル後のCSSファイルを表示してしまうのでKoalaは便利だと感じます。 ただ、コンパイル後の記述が汚い・・・ 文字コードにも強い印象

この記事を書いた人(著者情報)

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク