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

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

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

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプの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のインストールは成功です。

 

 

それでは実際に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の書き方を身につけたい方は、合わせてご覧ください。

 

 

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