はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。
・ Sassの概要や特徴、メリットについて
・ SassからCSSに変換する方法
概要
・ Sass
CSSの拡張言語で、CSSをより効率的に書くことができ、変数を扱ったり計算を行うことができます。
Sassのロゴを書いてみました。分かる方にはとても馴染み深いと思います(?)
Sassファイルの特徴
・ Sassは通常のCSSファイルに記述することはできず、反対にSassファイルにCSSを記述することができます。
・ Sassファイルを扱う拡張子は.sass
と.scss
の2つがあり、記法がそれぞれ異なります。
・ Sass記法
Sassファイルでは最初に作られた記法で、波括弧やセミコロンが不要という特徴がありますが、CSSとの書き方に差があり、あまり普及されなかったそうです。
.containerpcolor:#333font-size:2rempadding:3remsmallcolor:#000font-size:.875rem
・ Scss記法
.sass
の後に作られたのが.scss
です。こちらはCSSに良く似た記法でSassの機能が使うことができ、今ではこちらの書き方が主流のようです。
.containerp{color:#333;font-size:2rem;padding:3rem;small{color:#000;font-size:.875rem;}}
Sassファイルを使うメリット
Sassを使うメリットとして、次の3点が挙げられます。
・ 記述の簡略化ができる
・ プログラムのような処理ができる
・ 同じ値を使い回すことができる
・ 記述の簡略化
CSSでは親の要素から対象要素までのセレクタを何度も記述する必要がありますが、Sassではネスト(入れ子構造)することで、同じ親のセレクタをまとめることができ、親子関係が分かりやすくなり、親要素を複数回記述しなくてもよくなります。
<divclass="block"><h1class="title">Hello world!!</h1><pclass="text">Sass is <span>Smokin' Sexy Style!!</span></p></div>
■ CSSの例
.block{background-color:#000;}.block.title{color:#FFF;font-size:70px;text-align:center;}.block.text{font-size:15px;color:#FFF;}.block.textspan{color:red;font-size:20px;}
■ Sassの例
.block{background-color:#000;.title{color:#FFF;font-size:70px;text-align:center;}.text{font-size:15px;color:#FFF;span{color:red;font-size:20px;}}}
・ プログラムのような処理ができる & 同じ値を使い回すことができる
変数
Sassでは変数や条件分岐などのプログラムの処理を記述することができます。
例えば、よく使うピクセル数やカラーコードなどを変数として定義しておくことで、変数名で何度も使うことができ、記述量が減ってコードが見やすくなります。変数を定義するには、$変数名: 値;
のように記述します。
$h2:25px;block{font-size:$h2;}
mixin
まとまったスタイルを定義する機能です。変数は値を定義しますが、mixinはスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
mixinを定義するには、@mixin mixin名 (){}
、呼び出す時は、@include
と記述します。
@mixintemplate(){content:'';display:block;clear:both;}.menu{@includetemplate();...
SassからCSSに変換する方法
方法は2つありまして、プラグインを使うか、Webサービスを使う方法です。
・ 方法① Visual Studio Codeのプラグイン『easy sass』を使う
.Sass
ファイルを作成して、ファイルに記述します。
.test{padding:1rem0;background:#eee;a{color:#aaa;}}
Visual Studio Codeの左ツールバーの一番下の四角いマークをクリックし、検索欄にeasy sassと入力します。
インストールをクリックします。
※ Sassがインストールされていないと、.sass
ファイルで記述しても文字の色が変わりませんので、その場合は検索窓でSassと入力し、Sassをインストールして下さい。Sassのロゴはs79ns画伯が書いたものが上にあるので、参考にして下さい。
easy sassがインストールされている状態で、先程記述したstyle.scssを保存すると、style.scssの内容がそのままcssファイルとして自動作成されます。
style.min.cssは、style.scssの内容が1行になっており、改行やスペースを省くことで、ファイルサイズが圧縮されています。こちらのファイルを使うことで、Webサイトの読み込みの高速化を図ることができます。
従って、どの様にコンパイルされているかの検証用としてはstyle.cssを、本番環境用のファイルはstyle.scssを使い、ファイルの使い分けをするのが望ましいと思います。
・ 方法 ② Webサービス『SassMeister』を利用する
少しだけSassの機能を確認したい時に便利で、SassMeisterはWebでSassファイルをコンパイルしてくれます。
また、上のメニューバーの『Sass』→『Sass』をクリックすると、.scss
から.sass
の記述に変換も行ってくれます。
左側が.sass
の記述に変換されました。