Help us understand the problem. What is going on with this article?

Sass(Scss)でCSSを書いてみよう

More than 3 years have passed since last update.

1.Sass(Scss)とは?

サイト制作する際に、HTMLが複雑になってきてcssのコードがちらばったり
同じスタイルコードを使いまわすのに別のコードをコピペするなどあるとおもいます。

このようなCSSを使う上で面倒になりがちな部分を、プログラム的に置き換えて無駄を排除しようと考えられたのがSassです。

今回はこのSassについて紹介したいと思います。

2.環境構築

Sassを使えるようにするために、まずRubyをインストールします。

ダウンロード先:RubyInstaller

↑のページからインストーラをダウンロードして、
「Rubyの実行ファイルへ環境PATHを設定する」にチェックをしてインストールを行います。

Rubyのインストールが完了したら、次にSassをインストールします。
↓ Sassのインストール手順は以下になります。

Sassインストール手順
1.コマンドプロンプトを起動
2.gem install sassと入力する
3.しばらく待機するとインストール完了

1.Sass_Install.png

続いて
ダウンロード先:Koala
↑のページからSassで書いたファイルをCSSにコンパイルするソフトをダウンロードし
インストールを行います。以上で環境構築は終了なので次は実際にソフトをつかって

3.Sass(Scss)を書いてみる

KoalaでSass(Scss)を書く手順を説明します。

1.テキストエディタで、任意のフォルダに.scssファイルを作成します。
2. 作成した.scssファイルにScss形式でcssを記述します。
3. .scssファイルを含んだフォルダをKoalaにドラッグ&ドロップすると.cssファイルにコンパイルされます。

2.Koala_Drag&Drop.png

.scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れ
書き出し方法を指定することも可能です。

各オプションの説明
・dynamic compilation:動的コンパイルを行う
・compass ・・・ フレームワークcompassを使用するか
・line comments ・・・書き出す際にSassの行数コメントをいれるか
・debug info ・・・ デバッグ用タグ@media -sass-debug-infoをいれる
・unix newlines ・・・unixの改行コードにするか
・output style ・・・書き出しスタイルが指定

各書き出しスタイルの表示サンプル

① nestedを使った場合
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
.content{
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }
② expandedを使った場合
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
.content{
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}
③ compactを使った場合
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
④ compressedを使った場合
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

環境が整ったので.Sassの構文を少し紹介

①Sassでは変数が利用可能

Sassでは変数を利用できる。よく利用する値をあらかじめ変数化しておき、それを自由に呼び出して利用できる。
変数は、「$」の後に定義できます

変数の例
$width:500px;
$color:#aa443f;
#maincontainer{
    width:$width;
    color:$color;
}

②SassではCSSの継承はネストを用いて簡潔に記述できる。

ネストの例
#main{
    background-color:#000;
    .content{
        background-color:#aaa;
        color:#000;
        .sidebar{
            padding:10px;
        }
    }
}

↓(コンパイル結果)

#main {
  background-color: black;
}
#main .content {
  background-color: #aaaaaa;
  color: black;
}
#main .content .sidebar {
  padding: 10px;
}

その他のSassの書き方は色々なサイトに載っているのでぜひ使ってみてはどうでしょう!
だいぶcssがすっきりして見やすくなりますしおすすめです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした