今回は、SCSSの書き方について前編後編に分けて初心者にも分かりやすく詳しく説明していきます。
今回の記事を一通り理解出来れば以下のようなコードを書けるようになります。学習時間は約3時間程度で済むレベルです。その割にかなり重宝される技術なので必ずマスターしましょう。
Scssサンプル
// 変数
$Red:red;
$Blue: blue;
$Black: #333;
$Gray: #ddd;
$White: #fff;
$Margin: 10px;
$Padding: 10px;
// mixin
@mixin btnstyle($color:$Red) {
cursor: pointer;
color: $White;
background-color: $color;
border-radius: 100vh;
border: none;
padding: 5px;
margin: 0 auto;
&:hover {
color: $White;
opacity: .5;
}
}
@mixin flexcenter {
display: flex;
justify-content: center;
align-content: center;
}
// ここからスタイル
.inner {
@include flexcenter;
}
div {
background: $Gray;
padding: $Padding;
p {
color: $Black;
font-size: 20px;
span {
color: $Blue;
font-weight: bold;
}
}
}
.btn1 {
@include btnstyle;
margin: $Margin;
}
.btn2 {
@include btnstyle($Blue);
margin: $Margin;
}コンパイル後
.inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
div {
background: #ddd;
padding: 10px;
}
div p {
color: #333;
font-size: 20px;
}
div p span {
color: blue;
font-weight: bold;
}
.btn1 {
cursor: pointer;
color: #fff;
background-color: red;
border-radius: 100vh;
border: none;
padding: 5px;
margin: 0 auto;
margin: 10px;
}
.btn1:hover {
color: #fff;
opacity: .5;
}
.btn2 {
cursor: pointer;
color: #fff;
background-color: blue;
border-radius: 100vh;
border: none;
padding: 5px;
margin: 0 auto;
margin: 10px;
}
.btn2:hover {
color: #fff;
opacity: .5;
}Scssの考え方
SCSSとは、Sassの構文の一つであり、CSSをより効率よく記述ために開発されたRubyで作られたメタ言語です。
CSSと同じように「{…}」でブロックを作り、文末に「;」を使って書いてく基本ルールがあります。それに加えてプログラミングでよく使用される変数や引数などを使ってオブジェクトの出し入れが可能なルールがあります。そのためCSSで起こりがちなコードの肥大化を抑えることができ、効率的でメンテナンス性の良い開発が可能な言語となっています。
Scssを扱うのに必ず覚えなくてはいけないのは、以下の2点です。
- コンパイル
- 入れ子構造
コンパイルについて
コンパイルとは、Scssをcssに変換することを言います。
Scssは、htmlで読み込んでも何も起きません。そのためWEB上で表示されるものにするには、Scssで書いたstyleをcssに変換して、そのcssをhtmlで読み込む必要があります。このための変換作業をコンパイルと言います。
コンパイルのやり方は、今の時代は何かしらのツールを使えば自動で出来るので覚える必要はありません。もしPC上にインストールしているテキストエディタがVisual Studio Codeなら以下の記事を参照下さい。
入れ子構造について
Scss/Sassを勉強するにあたって必ず理解しないといけない事です。
Scssは、まるでHTMLのように親要素の中に子要素を入れ子状態にしてstyleを記述します。
div {
background: gray;
padding: 20px;
p {
color: black;
font-size: 20px;
span {
color: blue;
font-weight: bold;
}
}
}上記の例だと、divタグに対してbackground: grayとpadding: 20px;を指定しています。その中のpタグに、すなわちdiv pに対してcolor: black;とfont-size: 20px;を指定。更にその中のspan、すなわちdiv p spanにcolor: blue;とfont-weight: bold;を指定していることになります。
またScssはCSS同様に{}や;は必要です。それ以外の絶対ルールはありません。
CSSへとコンパイル（変換）すると以下のようになります。
//css
div {
background: gray;
padding: 20px;
}
div p {
color: black;
font-size: 20px;
}
div p span {
color: blue;
font-weight: bold;
}また、:hoverなどの疑似クラスを使用したいは、「&」を入れる事によって現在位置のセレクタ（クラス）に対して付与されます。
div {
//省略
p {
color: black;
&:hover {
color: blue;
}
}
}以下はSassの記述です。考え方はScssと全く同じです。しかし書き方が少し変わります。
Sassは、インデント（字下げ）で親子関係を表現します。なのでスペース数やインデントの列が必ず統一していないといけません。他にもルールはありますがここでは触れません。
一先ずScssとSassがあり、書き方が微妙に違うものだという認識を持って下さい。
//Sass
ul
background: #000
li
margin-bottom: 2rem
img
display: block前編ではここまでの解説にしておきます。次回後編ではScssの超便利機能である@mixinと変数の入れ方を解説していきます。
以上が「【Scssの書き方:前編】入れ子構造など基本的な扱い方と考え方」
