公開日

2015/08/07

最終更新

2021/10/07

記事区分

一般公開

継承 (extend)

基本

.class1 {
    background-color: #f00;
}
.class2 {
    @extend .class1;
    color: #fff;
}

継承元を使用しない場合

パーセント記号を用いることで、抽象クラスのような実体のないクラス class1 を定義できます。CSS にコンパイルすると class1 は消失します。

%class1 {
    background-color: #f00;
}
.class2 {
    @extend %class1;
    color: #fff;
}

ファイル分割 (import)

基本

main.scss

@import "sub"; // 拡張子省略が可能
// @import "sub.scss";
// @import url("sub.scss");
// @import url(sub.scss);

sub.scss

.myclass {
    $val: #f00;
    background-color: $val;
}

複数読み込み

@import "sub1.scss", "sub2.scss";

パーシャルファイルの読み込み

アンダースコアから開始されるファイル名の SCSS ファイルを import する際には、アンダースコアを省略できます。

main.scss

@import "sub";

_sub.scss

.myclass {
    $val: #f00;
    background-color: $val;
}

名前空間をもたせて import

他のプロジェクトから CSS を流用してきて import する際に、名前空間用のクラスを用意すると本プロジェクトのスタイル汚染を回避できます。SCSS は CSS との互換性があるため、CSS ファイルのファイル名を SCSS にして import するだけで実現できます。

main.scss

.mynamespace1 {
    @import "project1";
}
.mynamespace2 {
    @import "project2";
}

_project1.scss

プロジェクト 1 での CSS (または SCSS)

_project2.scss

プロジェクト 2 での CSS (または SCSS)

ネスト

基本

#myid {
    background-color: #00f;
    h1 {
        background-color: #f00;
    }
    p, ul {
        background-color: #0f0;
    }
}

隣接セレクタと子セレクタ

#myid {
    background-color: #0f0;
    h1 {
        + p { // 隣接セレクタ (h1 の同階層直後の p 要素にのみ適用)
            background-color: #f00;
        }
    }
    ul {
        > li { // 子セレクタ (ul 直下の li 要素にのみ適用)
           background-color: #f00;
        }
    }
}

ネストしない書き方も可能

#myid {
    background-color: #0f0;
    h1 + p { // 隣接セレクタ (h1 の同階層直後の p 要素にのみ適用)
        background-color: #f00;
    }
    ul > li { // 子セレクタ (ul 直下の li 要素にのみ適用)
        background-color: #f00;
    }
}

ハイフン区切りの CSS スタイル属性をネスト

.myclass {
    border: 2px dotted #f00 {
        top: {
            color: #0f0;
        }
        bottom: {
            color: #00f;
        }
    }
}

条件に合致した場合にのみスタイルを適用

後述の @if を使用せずに条件分岐が記述できます。

親要素をスタイル判定条件に利用

body タグに somepage クラスが付与されているページでのみ有効化

.html

<body>
  <div id="myid">
  ...
  </div>
</body>

.scss

#myid {
    background-color: #f00;
    body.somepage & {
        color: #fff;
    }
}

自分に付与されているクラスやマウスオーバーを判定条件に利用

myclass が付与された div でのみ有効になるスタイルを記述

div {
    background-color: #f00;
    &.myclass {
        color: #fff;
    }
}

hover 中の div でのみ有効になるスタイルを記述

div {
    background-color: #f00;
    &:hover {
        color: #fff;
    }
}

@media クエリをスタイル判定条件に利用

#myid {
    background-color: #f00;
    @media print {
        color: #fff;
    }
}

変数

基本

$myvar: #f00;

.myclass {
    background-color: $myvar;
}

ローカルな変数

.myclass {
    $myvar: #f00;
    background-color: $myvar;
}

シャープで変数を参照

文法上のあいまいさが発生する箇所で変数を参照するためにはシャープを利用します。以下の例ではシングルクォーテーションで変数の値を囲んでいることもポイントです。

$myvar: '.myclass';

#{$myvar} {
    background-color: #f00;
}

パス情報を変数に格納

$MY_PATH: '../img';

.myclass {
    background: url(#{$MY_PATH}/icn.png);
}

四則演算

幅や高さ

$myvar: 20px;

.myclass {
    width: ($myvar * 5) + 100;
    background-color: #f00;
}

RGB

.myclass {
    background-color: #000 + #000000 + red + rgb(0, 255, 0); // 黄色
    color: #000 + 255; // RGB すべてに 255 加算 → 白色
}

Mixin

複数引数かつ初期値のあるミックスイン

@mixin myMixin($arg1: 10px 10px, $arg2: #f00) {
    margin: $arg1;
    background-color: $arg2;
}

.myclass1 {
    @include myMixin;
}

.myclass2 {
    @include myMixin(20px 20px, #0f0);
}

$args: 20px 20px, #0f0;
.myclass3 { // カンマ区切り変数を利用する場合は '...' が必要
    @include myMixin($args...);
}

グローバルではないミックスイン

.mynamespace {
    @mixin myMixin {
        background-color: #f00;
    }
    .myclass1 {
        @include myMixin;
    }
}

ブロックで動的に内容が変化するミックスイン

@mixin myMixin {
    background-color: #f00;
    @content;
}

.myclass1 {
    @include myMixin {
        color: #fff;
    }
}

条件分岐 (if-else)

true/false

$myvar: true;

@if $myvar and true {
    .myclass1 {
        background-color: #f00;
    }
}

ミックスインとの併用

@mixin myMixin($arg) {
    @if $arg == 0 {
        background-color: #f00;
    }
    @else if $arg == 1 {
        background-color: #0f0;
    }
    @else {
        background-color: #00f;
    }
}

.myclass1 {
    @include myMixin(0);
}
.myclass2 {
    @include myMixin(1);
}
.myclass3 {
    @include myMixin(2);
}

繰り返し処理

for

@for $i from 0 to 10 { // 0..9
    .myclass#{$i} {
        $c: $i * 25;
        background-color: rgb($c, $c, $c);
    }
}

while

$i: 0;
@while $i < 10 { // 0..9
    .myclass#{$i} {
        $c: $i * 25;
        background-color: rgb($c, $c, $c);
    }
    $i: $i + 1;
}

each (リスト処理)

$mylist: red, green, blue;

@each $item in $mylist {
    .myclass-#{$item} {
        background-color: $item;
    }
}

リストから要素を取得するには以下のようにします。

$mylist: red, green, blue;

.myclass1 {
    background-color: nth($mylist, 1); //1,2,3
}

その他のテクニック

変数の既定値

$myvar: #0f0; // これが優先される

%myclass {
    $myvar: #f00 !default; // 既定値
    background-color: $myvar;
}

.myclass1 {
    @extend %myclass;
}

関数の定義

$globalarg: #0f0;

@function myfunc($arg) {
    @return $arg + $globalarg;
}

.myclass1 {
    background-color: myfunc(#f00);
}

組み込み関数

数値演算

abs → 絶対値
ceil / floor → 切り上げ / 切り下げ
round → 四捨五入

RGB 演算

rgba(yellow, 0.3) → アルファ (透明度) 0.3 の黄色 (1.0 で不透明)
lighten(red, 20%) → 2割明るい赤色
darken(red, 20%) → 2割暗い赤色
mix(white, black, 80%) → 白8割、黒2割

コマンドライン関連

コンパイル形式

以下、上から順にファイルサイズは小さくなりますが人間にとっての可読性は悪くなります。

$ sass sample.scss:sample.css --style expanded
$ sass sample.scss:sample.css --style nested  ←既定値。省略時はこれ。
$ sass sample.scss:sample.css --style compact
$ sass sample.scss:sample.css --style compressed

ファイル監視

監視下のファイル編集を検知すると自動コンパイルします。

ファイル単位

$ sass sample.scss:sample.css --watch

ディレクトリ単位 (.scss → .css)

$ sass --watch .

ピカピカ

ぴかぴかぴ

記事の執筆者にステッカーを贈る

有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、記事の読者は、執筆者に有料のステッカーを贈ることができます。

さらに詳しく →

Feedbacks

ログインするとコメントを投稿できます。

CSS 設計に関するヒント
CSS は構造化が難しくスタイルを宣言していくだけで目的が達成できてしまいます。上書きの繰り返しによって肥大化しないための設計ヒントをまとめます。詳細度の高騰が発生した CSS は破綻しやすい CSS の詳細度はルーティングテーブルのロンゲストマッチのようなものです。一致度の高いとされるセレクタで指定したスタイルが優先的に適用されます。同じ詳細度の場合は後から指定したスタイルで上書かれて適用され...
みみ10/7/2021に更新
0
- CSS
フォーム入力 (Bootstrap 3)
フォーム関連の Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS/Forms です。JavaScript には依存せずに動作します。標準的なレイアウト <div class="container"></div> に含めて使用します。まとまりごとに form-group で囲います。 <form> <!-- 一行入力 -...
からふるねこ11/24/2017に更新
0
- CSS
グリッドレイアウトでレスポンシブ Web デザイン (Bootstrap 3)
グリッドレイアウトによるレスポンシブ Web デザインを Bootstrap 3 で行う方法を記載します。すべての要素の入れ物であるコンテナ要素公式ドキュメントの一番最初に記載されている container はすべての要素の入れ物です。コンテンツ全体を container で囲みます。container には四種類の幅があります。container の左右にはマージンが作られます。入れ子にする...
jun11/18/2017に更新
0
- CSS
CSS で部品を装飾 (Bootstrap 3)
公式ドキュメントのうち JavaScript に依存せず CSS だけで部品を装飾する Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS Components および CSS です。グリフアイコン [使用できるアイコン一覧](http://getbootstrap.com/components/#glyphicon
からふるねこ10/7/2021に更新
0
- CSS
Bootstrap 3 公式ドキュメントの利用例
Bootstrap のメジャーバージョンは 2015-2-01(Sun) 現在 3 であり、最も人気のある HTML, CSS, JS のフレームワークです。Grid system という、いわゆるレスポンシブデザインを行うために便利な機能も利用できます。デザインの独自性にこだわらない業務アプリケーションなどを短期間で作る場合にも便利ですし、インターネットに公開する独自性が求められるアプリケーショ...
HARUTO11/17/2017に更新
0
- CSS

Sass チートシート

目次

継承 (extend)

基本

継承元を使用しない場合

ファイル分割 (import)

基本

複数読み込み

パーシャルファイルの読み込み

名前空間をもたせて import

ネスト

基本

隣接セレクタと子セレクタ

ハイフン区切りの CSS スタイル属性をネスト

条件に合致した場合にのみスタイルを適用

親要素をスタイル判定条件に利用

自分に付与されているクラスやマウスオーバーを判定条件に利用

@media クエリをスタイル判定条件に利用

変数

基本

ローカルな変数

シャープで変数を参照

四則演算

Mixin

複数引数かつ初期値のあるミックスイン

グローバルではないミックスイン

ブロックで動的に内容が変化するミックスイン

条件分岐 (if-else)

true/false

ミックスインとの併用

繰り返し処理

for

while

each (リスト処理)

その他のテクニック

変数の既定値

関数の定義

組み込み関数

コマンドライン関連

コンパイル形式

ファイル監視

記事の執筆者にステッカーを贈る

Feedbacks

関連記事