Help us understand the problem. What is going on with this article?

備忘録_scss再入門

More than 3 years have passed since last update.

scssに関して「なんとなくの部分」を文書化して知識整理
※自分用なので@mixinとか@extendは省いています

文字コードの指定

コメントを日本語で記述する場合があるのでscssファイルを作成する際には先頭に文字コードを記述
※scssファイルに日本語を使用していない場合、文字コードが省略された形でcssファイルにビルドされる

@charset "UTF-8"

コメントアウト

scssファイル内に記述できるコメントアウトに関して下記を参照

// => 1行コメント(ビルド後に削除される)

/* ~ */ => 通常コメント(ビルド後もコメントとして残る)

/*! ~ */ => 圧縮したcssファイルにもコメントとして残したい際に使用する

親要素を参照する

scssでは「&」を使用して親要素を参照できる

//scss
.test {
    color: red;

    a & {
        color: blue;
    }
}

//css
.test {
    color: red;
}

a .test {
    color: blue;
}
//scss
button {

    &.red {
    }

    &.blue {
    }

    &.green {
    }
}

//css
button {
}

button.red {
}

button.blue {
}

button.green {
}
//scss
a {
    color: red;

    &:hover {
        color: blue;
    }
}

//css
a {
    color: red;
}

a:hover {
    color: blue;
}

変数定義に関して

変数の定義方法は下記

$変数名: 値;

リスト型の変数定義

下記のような変数定義も可能

// 複数の値を指定
$base_padding: 8px 16px 4px;

// fontの指定
$font_gothic: "Hiragino kaku Gothic ProN", Meiryo; 
$font_mincho: "Hiragino Mincho ProN", "MS PMincho";

変数定義の際の注意点

scssの変数定義に関して下記の2つは同じものとして扱われる

$font-color: red;

$font_color: red;

要するに-_が同じ文字として認識されてしまう

変数に文字列を格納する場合

変数に文字列を格納する場合

// 引用符で囲まない場合 => ビルド後は、testという文字列で出力される
$a: test;

// 引用符で囲んだ場合  => ビルド後は、"test"という文字列で出力される
$b: "test";

// 下記の場合は / などが入っているため引用符で囲まないとエラーになる
$c: "http://test.com/"

インターポレーションについて

以下の場合においてインターポレーションによる記述が必要

  • 変数の前後に続けて文字列を記述
  • 変数に定義した値の引用符を削除して出力したい場合

インターポレーションの記述は下記

#{ 変数 }

下記のサンプル用に変数を使用したい場合は引用符を削除して出力しないともろもろエラーになるのでインターポレーションを使用する

$path: "../img/icon/";

.test_1 {
    background-image: url(#{path}box.png)
}
.test_2 {
    background-image: url(#{path}book.png)
}
.test_3 {
    background-image: url(#{path}flag.png)
}

scssとメディアクエリー

メディアクエリーの記述方法

scssでも下記のように記述可能

// cssと共通
@media only screen and (min-width: 780px) {

}

メディアクエリーのネスト

scssではメディアクエリーのネストも簡単

// scss
body {
    background-color: red;

    @media only screen and (min-width: 780px) {
        background-color: blue;
    }
}

// css
body {
    background-color: red;
}

@media only screen and (min-width: 780px) {

    body {
        background-color: blue;
    }
}

変数とメディアクエリー

下記のように記述することも可能
※インターポレーションを使用することを忘れない

// 変数定義
$s: "only screen and (max-width: 400px)";
$m: "only screen and (min-width: 401px)";

@media #{$s} {

    body {
        background-color: red;
    }
}

@media #{$m} {

    body {
        background-color: blue;
    }
}

scssのインポート機能

scssは@importを使用することでscssファイルのインポートが可能になる
※scssのインポート機能を使用してインポートする場合、cssファイルは1つに結合されて出力される

// インポートの記述
@import "ファイル名"; => ファイルに関しては相対パスで記述する 

補足

scssのインポート機能を利用する場合、拡張子.scssは省略してもOK

パーシャルファイル

パーシャルファイルとは、自動的にcssに変換されないファイルのこと
※パーシャルファイルはファイル名の先頭に_を使用する

// ファイル名
_test.scss

補足

scssではパーシャルファイルを読み込む際には_をつけなくても読み込まれるが基本的には省略しないで記述するのがベター

mapの利用(Sass3.3から追加された機能)

mapとはkeyとvalueのペアを定義できる機能
呼び出しは下記のようにする

// map-get()を使用
map-get($map, $key)

下記のように記述することが可能

//scss
$map: (
    key1: 10px,
    key2: 20px,
);

.map {
    margin: map-get($map, key1);
}

//css
.map {
    margin: 10px;
}

その他の使い方に関して下記のページを参考にさせていただいた
http://qiita.com/manabuyasuda/items/ae42db5604cd723fb3cd
http://qiita.com/manabuyasuda/items/caa823d3644cf3672d05

scssでフォントを読み込む際のテクニック

下記のページを参考にさせていただたいた
http://qiita.com/Yama-to/items/324a691c7989c4185275

y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした