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

これからの時代、CSSではなくSassを使おう

前書き

CSSは計二回のアップデートにより、様々な特殊かつ高度なデザインが可能になりました。しかしその反面、理想とするデザインを実現するためには面倒な微調整を何回も繰り返さなければなりません。

ところが最近、"Sass"というデザイン業界の常識を覆す(というほどでもない)新たなスタイル記法が開発されています。
Sassでは、"Mixin"をはじめ、"Each"や"While"など様々な便利な記法をサポートしており、非常にスピーディーに開発ができるでしょう。

インストール

Sassは当然、そのままでは実行できません。そこでCSSにコンパイルして利用しなければなりません。

まず、Rubyをインストールしてください。これがないとSassはコンパイルできません。
次に、コマンドプロンプトで"gem install sass"と入力してください。これで(多分)SCSSのコンパイラがインストールできます。

確認するために、コマンドプロンプトに"sass"と入力してください。
何かが表示されたらインストールは成功です。

コンパイルしてみよう

まず、すでにあるCSSファイルをSassに逆コンパイルするには、こちらのサイトがおすすめです。
CSS2Sass

それから、SassをCSSにコンパイルするには、先ほどインストールしたコンパイラを使います。

コマンドプロンプト
sass style.scss:style.css

あと、--watchプレフィックスをつけることで、自動的にコンパイルしてくれます。

コマンドプロンプト
sass --watch style.scss:style.css

「なーんだ、そんなもんか」と思っているそこのあなた!
この機能を使えば凄く面倒くさいgulpを使わずに済むのです!

Sass記法とSCSS記法

Sassには、標準的なSCSS記法(おすすめです)と、Sass記法があります。
主な違いはインデントのやり方です。

style.sass
.red
    color:#FFF
    background:#F00
style.scss
.red{
    color:#FFF
    background:#F00
}

基本的なやり方

まず、このような場合、

index.html
<div class="outline">
    <div class="inline">
    </div>
</div>

SCSSではこのように表記します。

style.scss
.outline{
    background-color:#F00;
    color:#FFF;
    padding:10px;
    .inline{
        background-color:#00F;
        color:#FFF;
        padding:10px;
    }
}

次に"Mixin"という特殊な記法があります。

style.scss
@mixin hoge{
    color:#FFF;
    padding:10px;
}
.outline{
    @include hoge;
    background-color:#F00;
    .inline{
        @include hoge;
        background-color:#00F;
    }
}

さらには、"For"という記法があり、省略するのが便利です。

style.scss
@for $var from 0 through 3 {
  .mb#{$var} {
    margin-bottom: 5px * $var;
  }
}

このコードが、コンパイル後にはこうなります。

style.css
.mb1{margin-bottom:5px;}
.mb2{margin-bottom:10px;}
.mb3{margin-bottom:15px;}

ほかにもいろいろあります(説明するの飽きた)

参考文献

この記事では書ききれなかったことがここに書いてあります(投げやりかよオイ)
Sassについて - 気まぐれ引きこもりんご80%
Sassの基本機能まとめました - Tree
Sassを使ってCSSを爆速コーディング!Sassの導入方法と使いかた。

最後に

この記事を見て、"いいね!"と思ったら、いいねボタンを押してください。
強制はしませんが、押してくれると筆者もすごく喜びます。

ではまたの機会に。次回作にもご期待ください。

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
ユーザーは見つかりませんでした