SCSSってすごい。ついでにSCSS記述&練習に便利なサイトも紹介

自分はスマートフォンのネイティブアプリエンジニアを目指しているため、
Objective-C & Swift & android Java中心に学習を進めているのですが、
今日は会社でCSSの勉強会が開かれたので顔を出してみました。

実はCSSを書くのがめっちゃ大嫌いなんです、自分。
スコープが訳分からなくなる事多々あるし、いちいちきちんと
書かなきゃいけないのですごく面倒なんですよね。
「あー、ここ値変数にぶっこんで計算させてforループで書きてー」とか思ってもCSSだと無理。

なーんて思ってたんですができるようになってたんですねいつの間に。
ちゃんと他分野の流行も知っとくべきだなーと反省。
SASSには２種類の記法（SASS記法とSCSS記法）があるみたいなのですが、
自分はSCSSのほうがしっくりくるのでそっちで書いてみました。

SASSソース

$width: 600px;

#main{
margin:$width*0.1;
  li{
    margin:$width*0.15;
    a{
      color:#000
    }
  }
  
}

コンパイル結果

#main {
  margin: 60px;
}
#main li {
  margin: 90px;
}
#main li a {
  color: #000;
}

これは・・・すごいしっくりくる。C言語大好きな自分の場合、
本当にCSSが好きになれなかったのですが、これならやってもいいかなって思いました！

Sass学習の際にはいちいちコンパイルするのも面倒なので、
こんな便利なサイトがありました。
その名も「SassMeister」

SassMeister | The Sass Playground!

ブラウザ上でコンパイル結果を即見れるからすごく良い。
Sass勉強の時はこのサイト使いながら勉強していきます。
とはいえ自分の本分はiOS or Androidネイティブなので、
学習時間の比重はあまりかけれないですが。

それではまた。