Single Post
Sass（SCSS）の超入門編
かなり遅れましたが、時間が空いたので前から学びたいと考えていたSassの勉強を遂に始めました。まだまだ始めたばかりなので知識は薄いですが、学んで分かったことやSublime Textでコンパイルする方法を備忘録ついでにまとめておきます。
そもそもSassとは?
簡単にいうとSassとは、CSSを拡張したメタ言語です。CSSに対して機能拡張した言語という事です。Sassは「Syntactically Awesome Style Sheets」の略で、日本語に訳すと「構文的にイケてるスタイルシート」となります。
CSSは広く普及させる目的もあって書体自体は非常にシンプルになっており、誰でも習得できます。それゆえ、複雑なことができないという側面もあります。その弱点を補う目的で誕生したのがSassなのです。
SCSSファイルはブラウザ認識できない
Sassには、SCSS記法とSass記法の2つの記法がありますが、CSSとは拡張子が違うため、そのままではブラウザが認識できません。その為、SassファイルをCSSにコンパイルしてディレクトリに入れる必要があります。コンパイルとは、変換のことです。
Sassでの記述
#main{
section{
margin-bottom: 100px;
h1{
font-size: 140%;
}
p, ul{
margin-bottom: 1.5em;
}
p.notes{
color: red;
}
p.noods{
color: red;
}
}
}
コンパイル後のCSS
#main section {
margin-bottom: 100px;
}
#main section h1 {
font-size: 140%;
}
#main section p, #main section ul {
margin-bottom: 1.5em;
}
#main section p.notes {
color: red;
}
#main section p.noods {
color: red;
}
上記を確認して頂けるとお分り頂けると思いますが、Sass記述ではCSSに比べ「#main section 」という記述を短縮できています。上記の短いコードでも約40文字のコード記述を減らせています。大規模サイトの構築などでは、かなりの作業量を減らせることは容易に考えられます。つまり、今までの様なコピー&ペーストの作業をカットでき効率化に大きく役立ちます。
Sublime Textでコンパイルする方法
Sassファイルは、ブラウザ上に上げることができない為、CSSにコンパイルする必要があります。コンパイルの方法は何通りかありますが、ここでは多くの人が使用しているであろうSublime Textでのコンパイルの方法を記載します。
まず、下記のパッケージをSublime Textにインストールします。
Sass
SASS Build
SCSS
SCSS Snippets
Compass
上記をインストールすればSublime Textの準備は完了です。
まず、testというディレクトリを用意します。ディレクトリ内にcssとscssというフォルダを作成してください。Sublime TextでNew Fileを作り右下の拡張子でSCSSを選択し下記をコピペして下さい。その後、saveを選択しtestディレクトリ内のscssに保存します。仮にファイル名をexampleにすると、example.scssというファイルがディレクトリ内に作られると思います。
#main{
section{
margin-bottom: 100px;
h1{
font-size: 140%;
}
p, ul{
margin-bottom: 1.5em;
}
p.notes{
color: red;
}
p.noods{
color: red;
}
}
}
Sublime TextでCompass+Sassを利用するためには、「config.rb」と言うファイルを含んだフォルダをプロジェクトに追加する必要があります。「config.rb」はtestディレクトリの直下に置きます。サンプルを用意しておきますので、コピペでご自由に使ってください。「config.rb」ファイルの詳細は、こちらを閲覧ください。
http_path = "/" css_dir = "css" sass_dir = "_scss" images_dir = "/" javascripts_dir = "js" output_style = :expanded line_comments = false
次は、Sublime Textで上メニュ「Project」→「Add Folder to Project…」を選択し、先ほどのフォルダーをプロジェクトに加えます。そして、「Project」→「Save Project As」を選択。するとexampleディレクトリ内に「test.sublime-project」「test.sublime-workspace」という2つのファイルが作られると思います。これで、準備は完了です。
example.scssを開き、コンパイルするために上メニュー「Tools」→「Build System」から「SASS」にチェックを入れます。その後、「Tools」→「Build」するとコンパイルされたCSSファイルが作られます。
まとめ
SASSを最初に見たときは、導入するメリットよりデメリットの方が先に来てしまい、なかなか導入に踏み切れませんでしたが使ってみると効率的でメリットの方が大きいことに気づきました。まだ始められてない方は、一度試してみられと良いと思います。
