今まではCSSでコードを書いていましたが、
完成したコード全体を見るとを膨大な量となっていました🤔
同じレイアウトによってCSS内に重複したコードができてしまったり、
修正を行う際にCSSの内容が多く探すのに時間を要す、
非効率的な状態でした😵
そこで教えていただいたのが「sass」
sassとは
Sassは「Syntactically Awesome StyleSheet」の略
CSSを拡張してより効率的に書けるようになったスタイルシート
cssを効率的に書くための記法
sassには2つの記法がある
① sass (Ruby/haml)
② scss (css3)
しかし、
sassのコードではWebブラウザーに認識されないため、
sassをコンパイルしてCSSを書き出す必要がある
sassを使うには環境準備が必要
Sass自体を編集する「エディタ」と、
コンパイルしてCSSを吐き出すための「コンパイラ」が必要。
Macユーザーはデフォルトで「Rudy」が入っており、
エディタがあればSassを保存しただけで自動的にCSSのコンパイル可能。
Winユーザーは「Rudy」のインストールが必要。
GUIコンパイラ（koala、prepros）をインストールすれば、
「Rudy」のインストールは必要なくコンパイル可能。
sassのインストール（Mac環境）
① ターミナルを起動する
② ターミナルでRubyの確認 ruby -v
③ sassのインストール（Rubyのパッケージマネージャーのgemを使用）
⑴sassをインストール sudo gem install sass
※Macはコマンドの先頭に"sudo"を付けてパスワードを入力する必要あり
⑵gemを最新版にアップデート gem update --system
⑶sassのアップデート sudo gem update sass
※Macはコマンドの先頭に"sudo"を付けてパスワードを入力する必要あり