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; }

引用・参考リンク

【公式】Sass

Related Cheatsheets

Related Goods

最新のコーディング環境にあわせて2024年に大幅刷新！プロの現場で使っている実践的なテクニックまで網羅しています。
詳細をみる
保守性の高いCSS設計を学べる一冊！ BEMと対比したPRECSSの手法について解説しています。
詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)

すべてのチートシートを見る

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

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

ネスト

class名のネスト

変数

Sassの変数

インポート

インポート

ミックスイン

ミックスイン

継承

継承

演算子

四則演算

@for

@each

@while

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