CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

Sass

エンジニアのためのWebチートシート

SassとはSyntactically Awesome Stylesheetsのことで、CSSをより構造的に記述することのできるCSSのメタ言語です。SASS記法とSCSS記法の二種類が存在します。 変数、四則演算、if文やwhile文が使えるため、リーダブルでメンテナブルに記述することができ、開発効率が向上します。 そんな便利なSass(SCSS記法)をチートシートにまとめました。

Sass(SCSS)の基本的な書き方

ネスト

Sassの最大の特徴としてネストすることができます。

Sass
ul {
  list-style: none;
  li {
    a {
      color: blue;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
CSS
ul {
  list-style: none;
}
a {
  color: blue;
}
a:hover {
  text-decoration: underline;
}

class名のネスト

class名もネストすることができます。BEMなどのCSS設計を取り入れる場合にとても相性が良いです。BEM

Sass
.post-list {
  list-style: none;
  &__item {
    /* some properties */
　}
}
CSS
.post-list {
  list-style: none;
}
.post-list__item {
  /* some properties */
}

変数

Sassの変数

Sassでは変数を定義して使用することができます。よく使用する色を定義するなど、UIの統一を図るのに便利です。

Sass
$red: #ed6b5f;

.alert {
  color: $red;
}
CSS
.alert {
  color: #ed6b5f;
}

インポート

インポート

分割されたCSSファイルをインポートすることができます。

Sass
// _reset.scss
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
// base.scss
@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
CSS
// base.css
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

ミックスイン

ミックスイン

何度も使用するプロパティーをグループ化し使い回すことができます。ベンダープレフィックスを記述する手間を省くなど使用方法は様々です。

Sass
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }
CSS
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

継承

継承

CSSのプロパティをセットにしたものを共有する仕組み（≒オブジェクト指向における継承に近い概念）です。CSSの記述をDRYに保つことができます。

Sass
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message { @extend %message-shared; }
.success { @extend %message-shared; border-color: green; }
.error   { @extend %message-shared; border-color: red; }
.warning { @extend %message-shared; border-color: yellow; }
CSS
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

演算子

四則演算

CSSの中で演算を行うことができます。

Sass
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
CSS
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

@for

Sass
@for $i from 1 through 3 {
  .list-item-#{$i} { left: 10px * $i; }
}
CSS
.list-item-1 { left: 10px; }
.list-item-2 { left: 20px; }
.list-item-3 { left: 30px; }

@each

Sass
$nav-items: home about contact;

@each $item in nav-items {
  .img-#{$item} {
    background: url('images/#{$item}.png);
  }
}
CSS
.img-home {
  background: url('images/home.png);
}
.img-about {
  background: url('images/about.png);
}
.img-contact {
  background: url('images/contact.png);
}

@while

Sass
$i: 10;
@while $i <= 18 {
  .font-size#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}
CSS
.font-size14 { font-size: 14px; }
.font-size15 { font-size: 15px; }
.font-size16 { font-size: 16px; }
.font-size17 { font-size: 17px; }
.font-size18 { font-size: 18px; }