LoginSignup
0
0

More than 1 year has passed since last update.

CSSの拡張言語『SCSS』について

Posted at

『SCSS』とは?

CSSを見やすく、書きやすくする拡張言語の『SASS』の1つ。
直訳すると『文法的に素晴らしいスタイルシート』。
実際にCSSとして使用するためにはSCSSファイルをCSSファイルにコンパイル(変換)する必要がある。

『SASS』と『SCSS』の違い

SASS・・・インデントを使う記法でCSSとはかなり相違がある。通常のCSSルールで記述するとエラーがでる
SCSS・・・CSSと互換性があるので通常のCSSルールで書いてもエラーがでない。記述方法がCSSとほぼ同じでとっつきやすい

『SCSS』を使うメリット

①変数が使える
 →phpやjavascriptのように変数によく使う値を格納しておけるので、変更する際に1箇所の変更ですむ
 →自分で分かりやすい変数名をつけれるのでコードが解析しやすくなる
②階層構造を使える
 →htmlのように階層構造でコードを記述できるので、記述量を減らせたりメンテナンスしやすいコードにすることが出来る
③ミックスインという機能が使える
 →『@mixin』というコードを使うことでコードの塊(関数に似ている)を作成し、複数の場所で呼び出して使用することが出来る
④継承という機能が使える
 →親要素で指定したスタイルを別の子要素でそのまま使用したり、追加でスタイルを当てて使用したりすることが出来る

『SCSS』のコンパイル手順

①エディタのダウンロード

代表的なコードエディタ
・Brackets
・Sublime Text
・Visual Studio Code
・Atom

②コンパイラの準備

GUIコンパイラ

・koala
・prepros
→アプリを立ち上げてファイルかフォルダを選択すると、アプリを立ち上げている間は自動でコンパイルしてくれる。
コンパイル後のスタイルも選択できる。

プラグイン『Live Sass Compiler』を使用する(VSCodeのみ)

①『Live Sass Compiler』をインストール
②コンパイルの監視を開始
③SCSSのコーディングを行う

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0