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

Sassとは

cssを効率的にかける言語、「Sass」について説明します!

Sassとは

CSSを拡張した言語です。より効率的に書けます!
記述を簡略化できる他にも、プログラムのような処理ができたり、同じ値を使い回すことができます。
※今回は.scss記法で説明していきます。

ネスト化

cssはセレクタを何回も書く必要がありましたが、Sassはネストさせることで、
同じ親のセレクタでまとめられちゃいます。

プログラム処理

変数や条件分岐も使えます!

$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

複数のファイルをまとめられます

バーシャルを使うと、複数のcssファイルを一つにまとめることができます。

バーシャルとは、分割したSassファイルのことです。
バーシャルを作成するときは、ファイル名の最初に”アンダーバー_”をつけます。

例:_item.scssと_reset.scssファイルを読み込みます。

application.scss
@import "item";  /* _item.scssを読み込む */
@import "reset"; /* _reset.scssを読み込む */

同じ値を使いまわすこともできます

変数を使用して同じ値を使いまわすことができます。
以下のように定義します!
$変数名: 値;

_common.scss
$mainBlackColor: #000000; 

と定義したとします。
_common.scssファイルを読み込むことで、
他のscssファイルでも
「$mainBlackColor」と指定して使うことができます。

mixin

mixinとは、まとまったスタイルを定義することができます。
これを使うと、何度も同じスタイルを定義しなくて良くなります!

mixinを定義するには、
@mixin mixin名() {}
と記述します。

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

以上です。

katomegu
未経験からエンジニアを目指して、 Ruby / Ruby on Rails を勉強中です! アウトプット用に更新していきます。 ご指摘バシバシいただけますと嬉しいです^^
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
ユーザーは見つかりませんでした