［アラフォプログラミング未経験］Sassについて学んだみた

現在進めているカリキュラムにて、「 Chat」サービスの投稿画面実装に入りました。

ここからはいきなりハードルが上がり、これまで習った「rail」に加えて、

Web画面自体を見本の指示書からコードを書いてみるということになりました。。。

・・・2日目になりますが、もうチンプンカンプンですわー！

今までほんとカリキュラム通り、、、

というかほぼ丸写しでこなしてきたようなものだったので、

カリキュラムの指示がないとほんと海図も磁石もない状態で海の真ん中に放り出されたような

絶望感！！！

まずは何やるんだろ・・・

指示書通りにレイアウトをブロックで分けて・・・

いやいや、BEMで考えるだから、BLOCKとELEMENTを分けて・・・

あれ？

実装した画面ってどうみるんだっけ？

あ、まずは「rails」でルーティングとコントローラー作らなきゃやん。。。。

という思考の蟻地獄にハマった３時間でした・・・

というわけで、一旦、 「Sass」について頭整理してみました。

目次

Sassって何？

SassとはCSSの機能を拡張した言語です。

Sassを利用することで、CSSを効率的に書けるようになります。

SassはCSSに非常に似ていますが異なる言語です。

CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。

CSSは何となくわかってきたけど、

この間まで勉強してきた「Pictweet」の中にSassのコードがありましたね。

正直全く理解せずにコピペしてましたが・・・・

ついにここで学ぶことができるのですな。

Sassファイル

Sassは通常のCSSファイルには記述することができません。

反対にSassファイルにCSSを記述することはできます。

Sassを扱うファイルの拡張子は.sassと.scssの2種類があります。

どちらもSassのファイルとなりますが記法が大きく異なります。

あ、ファイルの種類は２種類あるのか！

.sass拡張子

.sassの拡張子であるSassファイルでは最初に作られたSassの記法（SASS記法）を扱うことが出来ます。

SASS記法では波カッコの省略やセミコロンが不要などのモダンで非常にシンプルな記法という特徴があります。

しかし、その分CSSの記法との差がありすぎてあまり普及しませんでした。

.scss拡張子

.sassの後に作られたSassファイルが.scssの拡張子のファイルです。

こちらはCSSに非常に似た記法（SCSS記法）でSassの機能を使うことが出来ます。

今ではこちらの記法が主流です。

そっか、これまで見てきた拡張子は「.scss」だったわー

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

見本を書いてみたけど、これだと「CSS」との違いがさっぱりわからないっす。。。

次回は、Sassの特徴について勉強してみます。