読者です 読者をやめる 読者になる 読者になる

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

Sass,SCSS,Compassって何?って人向けの日本一わかりやすい解説

プログラミング プログラミング-講座

sponsor

3つの関係性は

Sass、SCSSはcssを別の文法で短く書いて、後で整形することで使えるようにするソフトウェアです。SassとSCSSは書き方が違うだけです。もともとSass記法だったものがバージョンが進んでSCSS記法で書くようになりました。

f:id:hiroyoshi-deki:20151216200023j:plain

細かい解説!はじめにCSSから!

cssっていうのはこんなやつ

HTMLに装飾を加えるために使う言語です。いろいろ装飾しようとすると同じようなことを重複して書かないといけなくなります。

div#container{
    margin: 0;
    padding: 0;
}

div#container div{
    float:left;
}

div#container div p{
    font-size:15px;
}

こんな感じで、同じdiv#containerをたくさん書く必要に迫られます。それに、別々なので行数もかかっちゃう。これはHTMLが入れ子になっているからです。

Sassはこんなの

じゃあ、cssも入れ子にしようよ、ついでにかっこも取り払っちゃえ!というのがSassです。できるだけ、文字数を減らすことで、コーディングの時間を減らすためです。

div#container
    margin: 0
    padding: 0
    
    div
        float:left
            
        p
            fontsize: 15px

こんな感じ。

段をずらして、入れ子を表現しています。

最終的にSCSSになりました

で、理由は知りませんが入れ子などの機能を残したままcssっぽくしたのがSCSSです。

div#container{
    margin: 0;
    padding: 0;
    
    div{
    float: left;
        
        p{
            font-size: 15px;
        }
    }
}

こうです。ちょっと長いけど見やすいと思います。

SassとSCSSは記法の名前なので、書き方は違うけど、どちらも同じものだと思ってください。拡張子は別なので気をつけてください。

これがcssとSass、SCSSの関係です。

大元がSassということでSassと呼んでいきます。 

CompassはSassをもっと便利にするためフレームワーク

フレームワークというのは、あるツールの機能のうちよくつかうものをまとめて使いやすくしたり、よく使われる流れを自動化してくれるソフトのことです。

rubyにたいしてruby on railsとかphpに対してcake phpだったりです。1から言語で書いてもいいけど、時間ばかりかかってしょうがないので、偉い人がまとめてくれたものです。

compassでできるようになったこと

f:id:hiroyoshi-deki:20151216160752p:plain

こちらがcompass --helpとterminalで打ち込んだ結果です。

sassは変換や文法チェックしかできませんでしたが、

プロジェクトに合わせたconfigやプラグインのinstall、spriteの生成などめんどくさいWeb周りの技術を自動で行ってくれそうな名前があります。

compassのプラグイン

Plugins and frameworks | Compass Documentation

このページにいくつかあります。

ここでいうプラグインはデザインする上でのお決まりパターンが入った拡張パッケージのような感じですね。

Sublime textのsnippet集のような感じ!

どれをつかうのがベストなの?

今、普及しているのがSCSS記法のSassをCompassでつかう開発環境のようです。

が、例えば、評判いいしRuby on railsから勉強し始めよう!と思った人。CompassとかSCSSとか気にしなくてもrailsが勝手にSCSS記法のファイルをcssにしてくれます。

Java系だと自動でsass -> cssとはいかないのでcompass使おうとした方がいいかも。でも

 

www.dekihiroyoshi.com

のCompassのところで説明しているように、開発環境で自動化して使って行った方がいいです。

Python系、例えばdjangoあたりもフレームワークにcompassを組み込んでくれていたはず。

時代はcompassのようだ!

sassの真の実力

sassはfor文とかも使えます。グループでルールを決めてあらかじめcssセットを作る時とか便利です。

 
@import "compass";
@for $i from 1 through 10 {
    .mb#{$i * 10}{
        margin-top:#{$i*10}px;
    }
}

このコードで

.mb10 {
  margin-top: 10px; }
.mb20 {
  margin-top: 20px; }
.mb30 {
  margin-top: 30px; }
.mb40 {
  margin-top: 40px; }
.mb50 {
  margin-top: 50px; }
.mb60 {
  margin-top: 60px; }
.mb70 {
  margin-top: 70px; }
.mb80 {
  margin-top: 80px; }
.mb90 {
  margin-top: 90px; }
.mb100 {
  margin-top: 100px; }

こうなります。

if文もページごとの違いとか定義するのに使えます。いろいろ試してみてください。

© 2015 かんがえちゅう!