使いながら解説!効率良くコーディングできるSassとは【初心者向け】

CSSのフレームワークであるSassの使い方について解説している記事になります。初心者の方でも分かるようにSassの導入から実際に使うところまでを説明しています。Webデザイナーを目指す人は覚えておくと仕事ができる印象を与えられるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSを簡単に書くための言語Sassについて解説しています。

Sassを理解するためにはまずCSSの知識の理解が必要となりますので、CSSの理解が進んでいない人はまずそちらを勉強するようにしましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

田島悠介

今回はSassについて解説しよう。

大石ゆかり

田島メンター!!Sassというのは何でしょうか〜?

田島悠介

CSSを拡張したもので、コンパイルしてCSSを生成するんだ。変数や入れ子構造が使えるなどの特徴があるよ。

大石ゆかり

CSSをより使いやすくするためのものって感じでしょうか?よろしくお願いします!

 

Sassとは

冒頭でも説明しましたが、SassはCSSを効率的に書くためのものです。

プログラミングの概念と同様に変数などを用いることができます。実際の現場でも活用されているものなので覚えておくと良いでしょう。

 

Sassの使い方

SassにはScssとSassという二種類の記法が存在しますが、今回はより一般的なScssの記法で解説をしていきたいと思います。それではまずSassをPCにインストールしていきましょう。

$ sudo gem install sass

Successfully installed sass-3.4.22
Parsing documentation for sass-3.4.22
Installing ri documentation for sass-3.4.22
Done installing documentation for sass after 8 seconds
1 gem installed

$の後の一行をターミナルに打ち込んで以下のような表示がされればSassのインストールは成功です。

 

田島悠介

コマンドプロンプト、あるいはターミナルで上のコマンドを入力してインストールするんだ。

大石ゆかり

Macだと鍵マークが出て、何も入力できないんですが……

田島悠介

その場合はMacのユーザーのパスワードを入力しよう。画面上では何も書かれていないように見えるけど、ちゃんと入力されているからね。

 

それでは実際にSassの記法でプログラムを打ってみましょう。まず以下にようなフォルダ、ファイルを作成してください。

SassSample

|--css
    |--sample.css

|--scss
    |--sample.scss

そして、sample.scssを以下のように編集します。今回はbodyのwidthを50%に、body内のp要素のfont-sizeを20pxに指定したいと思います。

body{
  width: 50px;
    p{
      font-size: 20px;
    }
}

これでSassのプログラムは完成しました。しかしこのままのファイルだと、PCはCSSだと認識してくれずCSSにコンパイルする必要があります。以下のコマンドをターミナルで入力してください。

$sass scss/sample.scss:css/sample.css

するとsample.cssは以下のように編集されています。

body { width: 50px; }
body p { font-size: 20px; }

これでCSSとして読み込むことができます。Sassはこのように、CSSをネスト(入れ子)構造で書くことができて、プログラムが肥大化していった際より直感的に簡素に記入することが可能です。

 

今回は簡単なSassの導入をしましたがSassはこの他にも変数機能やループや条件分岐といった便利な機能を持ち合わせています。是非マスターしておくようにしましょう。

基本的なCSSの書き方を身につけたい方は、合わせてご覧ください。

 

田島悠介

Sassを使用する一連の流れになるよ。

大石ゆかり

コンパイルを行うことで、CSSが生成されたのが分かりますね。

田島悠介

スタイルの指定がたくさんあるページでも、Sassによってコードの量を減らして効率を上げることができるんだ。少しずつ慣れていってみよう。

大石ゆかり

頑張ってみます。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。