【Sass】Sassの書き方・基本のキ

なにこれ？

「Syntactically Awesome Stylesheets」
構造的にとてもいけてるスタイルシートことSass様について簡単にメモ。
自分で自分のことをかっこいいと言ってしまうの、ええやん？

コード

ネスト、アンパサンド（＆）

/*ネスト（入れ子）での記述*/
.container{
 padding: 10px;
 .text01{
 font-size: 16px;
 }
}

/*アンパサンド（＆）で親セレクタの参照ができる。その１*/
.container{
 .txt01{
  &:after{
   content:"●";
  }
 }
}

/*アンパサンド（＆）で親セレクタの参照ができる。その２*/
.main{
 padding-top: 50px;
 body.top &{
  padding-top: 100px;
 }
}

/*BEMの書き方と相性がいい*/
.main{
 &__container{
  padding: 10px;
 }
 &__txt{
  font-size: 16px;
 }
}

入れ子にして記述することによって記述量が減り、メンテナンス性が向上する。
とにかく楽。

プロパティも、ハイフンがあるものは全てネストできる

.txt{
 01{
  text:{
   aline: center;
   decoration: none;
  }
 }
 02{
  padding: 0 {
   top: 100px;
  }
 }
}

特に可読性が上がるわけでもないので、使っても使わなくてもご自由にって感じの機能っぽい。
多分弊社は使わないであろう。

ちなみに

//こちらのタイプのコメント

は、cssにコンパイルされるときに消えてしまうが

/*こちらのタイプのコメント*/

は残るので使い分けると良さげ。