CSSをより便利に扱うことができるSass(サス)についてまとめました

CSSをより便利に扱うことができるSass(サス)についてまとめました。
Sassには、「SASS記法」「SCSS記法」の二種類がありますが、今回は「SCSS記法」についてまとめました。

Sassを使用するメリット

・CSSより記述量を減らせる
・コードを再利用できる

目次

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

以下のコードは拡張子「.scss」のスタイルシートに記述する内容です。

1.入れ子構造

CSSにおいて、1つにセレクタの中に別のセレクタを入れ子にして指定することができる。これにおり、同じセレクタを何度も書かずに同じCSSを設定することができる。

.header {
        width: 100px;

       ul {     //「.header.ul」と同じ扱いになる
                padding: 10px;
        }
}

2.&記号

コントロールの上にカーソルがある状態であることを表す「:hover」、クリックされたことを表す「:active」を入れ子にする際、「&」を付与する必要がある。

li {
        font-size: 15px;
        &:hover {   //「li.hover」と同じ扱いになる
                background-color: red;
        }
}

3.変数

変数を使用することで、プログラムの質を高めることができる。

3-1.変数の定義

$bg-color: #FFFFFF;

3-2.変数の使用

h1 {
        background-color: $bg-color;
}

4.mixin

いくつかのコードを1つにまとめて、簡単に呼び出すことができる関数のような機能。

4-1.mixinの定義(引数なし)

@mixin subject-aaa {
        width: 300px;
        padding: 20px;
}

4-2.mixinの使用(引数なし)

h1 {
        @include subject-aaa;
}

4-3.mixinの定義(引数あり)

@mixin subject-aaa($bbb) {
        width: $bbb;
        padding: 20px;
}

4-4.mixinの使用(引数あり)

h1 {
        @include subject-aaa(500px);
}

5.関数

Sassでは様々な関数が用意されている。

color: darken(色, 30%);   //色を暗くする関数
color: lighten(色, 30%);   //色を明るくする関数
color: rgba(色, 0.5);   //色を不透明度を指定する関数

6.import

外部のファイルを読み込む場合、「import」でファイル名を指定する必要がある。

//ファイル"_colors.scss"を読み込む場合
@import "_colors.scss"
@import "colors"

誰かの役に立てれば幸いです。

1 Comment »

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中