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

Sass

背景

仕事でデザイナーと協力してCSS設計を行うことになった。

目的

CSS設計の勉強と合わせてSassも使えるようになりたい。

前提

HTML&CSSを並行して勉強中。

Sassの記法

SASS記法とSCSS記法がある。この記事ではSCSS記法で行こうと思う。
理由は特にないが、強いて言えば読んだ書籍とかサイトがこっちだったから。
SCSS記法の時は、ファイルの拡張子は.scssになる。

Sassの特徴

Sassのメリット

  • コード量の現象
  • コードの再利用

Sassの特徴

  1. 入れ子構造
  2. 変数
  3. mixin
  4. 関数
  5. import

入れ子構造

同じクラス名を何度も書かなくて良い。

.main-class {
    ...;

    .sub-class {
      ...;
    }
}

さらに、擬似要素や擬似クラス等を指定する際には&:を使って以下のようにも書ける。

span {
    ...;

    &:hover {
        ...;
    }
}

変数

$変数名:値;の形式で定義できる。
ただし、CSS系ファイルは読み込んだ順に処理されるので変数宣言は事前に実施すること。
さらに、スコープも効いているので注意。

$main-color: #ffffff;

span {
    color: $main-color;
}

mixin

いくつかのコードをひとつにまとめて、複数箇所で簡単に呼び出す(差し込む)ことができる。
@mixin mixin名 { }で定義し、@include mixin名で差し込む。
変数を引数として渡すこともできる。

@mixin box-size {
    width: 200px;
    height: 150px;
}

@mixin font-data($color) {
    color: $color;
    font-size: 20px;
}

.box1 {
    @include box-size;
    @include font-data(#ffffff);
    ...;
}

.box2 {
    @include box-size;
    @include font-data(#000000);
    ...;
}

関数

事前に用意されている、「指定した色を指定した分薄く・濃く」などの処理を行う関数を利用できる。

import

外部のscssファイルを読み込むことができる。
ただし、読み込まれる側のファイル名は_filename.scssのように先頭にアンダーバーを付与する。
読み込む側では@import filenameのように、アンダーバーと拡張子なしで読み込める。

代表的な使い方としては、変数を_variables.scssのようなファイルにまとめて宣言しておくなどがある。

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
ユーザーは見つかりませんでした