「SASSとSCSS」や違いについて
フロントエンド周りをやっていると、SCSS(SASS)と言う言葉を目にしますよね！
人によってちゃんと理解していなかったり、呼び方がごちゃごちゃしているため、SASSとSCSSって結構混同します。
今回は、このよく混同しがちなSCSS(SASS)について、「SCSS(SASS)とは？」や違いについても解説していきます！
SCSS(SASS)とは？
それでは、SASSとSCSSについてそれぞれ意味を確認していきたいと思います！
- ・Sass
- CSSを拡張した物で、Sass(インデント構文)とSCSSの2種類の記述方法があります。
- ・SASS(Sassインデント構文)
- Sassは、Sassの記述方法のうちの一つです。
- ・SCSS
- SCSSは、Sassの記述方法のうちの一つです。
言葉だけで厳格に説明を見てもすごくわかりにくいですよね・・！
事項から実際の記述例を見て、SASSとSCSSの違いについて比較しつつ確認してみてください！
SASSとSCSSの違いについて
それでは、SASSとSCSSの違いについて比較しつつ確認していきます！
名前は似ているし、混同しがちなSASSとSCSSですが、実際に記述を見ていただければ明らかに違うので、すぐに区別できるようになるかと思います！
使用するソースコードは、公式サイトのLearn Sassのコードを使用して解説していきます！
またHTMLは共通で確認用にこちらで用意した以下のサンプルを使用していきます！
<nav>
<ul>
<li><a href="#">Sass</a></li>
<li><a href="#">SASS</a></li>
<li><a href="#">SCSS</a></li>
</ul>
</nav>SASSの記述例
まずは、SASSの記述例から確認していきます！
実際にSASSソースコードを確認するとわかると思いますが、セレクタやクラスの後に{ }を使わずに、インデントを使用した記法となっています。
ソースコード
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none表示結果
See the Pen SASS_Sample by Kou (@awesome-linus) on CodePen.
SCSSの記述例
次に、SCSSの記述例を確認していきます！
こちらは、以下のソースコードを確認して貰えるとわかると思いますが、ネストを主とした記法となっていて、なんか普通のCSSと似ていますよね！
SCSSは、CSSと互換性があるのでCSSの記法で書いても問題なく動作します。
ソースコード
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}表示結果
See the Pen SCSS_Sample by Kou (@awesome-linus) on CodePen.
SASSとSCSSはどちらを使うのが良いのか？
結論、SCSSを使用するのがオススメです！
SCSSはCSS記述が似ていて、学習コストがとても低く、実際にSCSSを書きながら使っていけば、特別学習なしでも簡単にSCSSを扱うことができるようになります。
また先程も解説した通り、CSSとの互換性があるため、SCSSがわからないメンバーがいても、CSSの記述で動作するため問題ありません。
上記の理由などから実際の現場でもSCSSが多く使用されていて、主流であるためオススメなのです！
SASSやSCSSを使いたい時
それでは、
- SASSやSCSSを使いたい時はどうすれば良いのか？
これに関してここでは解説していきます。
SASSやSCSSの仕組み
そもそもSASSやSCSSは、そのままHTMLに当てても動作せず、装飾されません。
SASSやSCSSの仕組みとして、以下のようになっています。
- SASSやSCSSをトランスパイル(コンパイル)する
- SASSやSCSSがCSSへ変換される
- このCSSがHTMLへ当てられる
こんな感じで、SASSやSCSSから一旦CSSに変換して、HTMLへ当てると言う流れになるので、そのままSCSSをHTMLに当ててもダメなわけです。
SASSやSCSSを書きたい
先程も説明した通り、SASSやSCSSを使うには、一旦CSSへ変換する作業(トランスパイル)が必要になります。
VueやReactなどを使用している場合は、コマンドでパッケージをインストールすれば簡単に使えます。
それ以外の環境だと自分でGulpやWebpackなどで環境を整えたり、IDEの拡張機能やネット上のツールで変換を掛けたりする方法があるかと思います。
ただ上記どれでもちょっと面倒なので、とりあえず書いてみたい！と言う方は、環境構築なしで使えて、無料でも使えるCodePenがオススメです！
CodePenでSASSやSCSSを書く方法
まずCodePenで会員登録が完了したら、右上のメニューから「New Pen」で開始してください！
こんな感じの画面が開くので・・
上部にある「Settings」ボタンをクリックして開きましょう！
「CSS」の欄から「SCSSやSass」などを選択すれば、OKです！
記述したHTMLやCSSが即座に反映されて、画面下へ結果が表示されるので便利です！
まとめ
今回は、「SCSS(SASS)とは？」や違いについて学習しました！
新しいことを学び始めると混同したり、理解できないこともありますが、実際の例を見たり、比較したりすると理解できましたよね！
普段CSSを書いている方は、是非便利なSCSSの記法で書いてみてください！
コメント