プログラミング

Sass(Scss記法)でよく使う7つの記述方法をまとめてみた

投稿日:

CSSをより効率的にコーディングできる言語として知られているSassという言語。フロントエンドエンジニアに限らずエンジニアなら理解しておきたい言語ですね。

そのSassには、Sass記法とScss記法の2通りがありますが、今回は一般的なScss記法でよく使われる記述方法をまとめました。1時間もあればマスターできてしまうくらい簡単です。

スポンサーリンク

Scss記法とは

SassにはSass記法とScss記法の2通りがあり、Sass記法の後にScss記法が生まれました。Sass3.0から、よりCSSのようにコーディングができるScssが生まれたのです。

ちなみにRuby on Railsは標準でScssファイルなので、RailsエンジニアならSass記法ではなくScss記法を学んでおいた方がいいですね。

Sassの導入手順については以下の記事を参照してください。

 

Sass(Scss記法)でよく使う7つの記述方法

それでは、Scss記法でよく使う記述方法を通常のCSSと比較しながら説明していきます。

ネスト

この「ネスト」はSassの中で最も使います。CSSでは、例えばexampleというセレクタに a img それぞれにスタイルを与えたい場合にはその都度セレクタexampleを書かなければいけませんでした。
しかし、Sassではその必要がありません。

▼ CSS

▼ Sass

 

親参照セレクタ

:hover:active::beforeのような擬似クラスを使う場合にもネストで書けます。この場合には&:hoverのように&の後に擬似クラスを書きます。
▼CSS

▼Sass

 

変数

Sassでは、変数が使えます。何度も使う値は変数にしておくと便利ですね。変数の定義の仕方は、$変数名:値;

▼CSS

▼Sass

 

mixin

mixinとは、名前をつけていくつものコードを管理し、再利用できる機能です。これによって同じコードを何度も書く手間が省けます。
@mixin mixin名 {コード}で定義することができます。呼び出すときは、@include mixin名

▼CSS

▼Sass

mixinでは引数を使うこともできます。引数を使うことで色やフォントサイズなどをその都度指定することができるようになります。

▼Sass(引数を使わない場合)

▼Sass(引数を使う場合)

 

関数

Sassでは色を指定するような関数がよく使われるので覚えておくと便利です。関数を使えば、@mixinなどは必要なく、「あるプロパティで指定した色から40%明るくする」といったようなことができます。

▼よく使う色に関する関数

よく使うのは上の3つなので、他は覚えなくても大丈夫です。

四則演算

Sassでは、足し算、引き算、割り算、掛け算ができます。主に使うのは割り算ですね。

例えば、widthを100%の7分の1に指定したいとき。CSSでは電卓等で100÷7=14.285…とわざわざ計算して書かなければいけませんでしたが、Sassではその必要がありません。

▼Sass

 

import

CSSでもimportは使えましたが、example-1.css、example-2.cssのように2つのファイルを作る必要がありました。しかし、Sassでは複数のSassファイルに分けたとしても最終的には一つのCSSファイルとして出力されるため、負荷がかからないというメリットがあります。

Sassでimportをよく使うシーンとしては、変数のみをまとめたファイルと読み込みたいファイルを分ける場合が多いです。

読み込み先のファイル名の先頭には_(アンダーバー)をつける必要があります。@importで読みこむ際にはアンダーバーは必要ありません。
▼Sass

 

Sassでコーディングを楽にしよう

Sassの記述方法は覚える量も少ないため、1時間もあればマスターできてしまうので是非参考にしてみてください。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

-プログラミング

スポンサーリンク

プロフィール

オカ ヒロト / Hiroto OKA

新卒でフリーランスエンジニアになりました。Web制作、アプリケーション開発を中心にSEO対策やWebマーケなどの仕事をしています。趣味はサッカーと旅行です。1995年生まれ山口県出身。

>>詳しいプロフィール
>>Webサイトの制作・運用の依頼
>>お問い合わせ

freelance-ajent-image