CSSの記述を効率化し、メンテナンス性も向上するScssの
導入から基本的な使い方までまとめました。
コンパイルはいくつかやり方があるので、
下記に記載します。
Scssの基本的な使い方
では、CSSではなくてScssでスタイルを定義することによって使うこと
のできる作業効率も測れますので、ご紹介していきたいと思います。
ネスト（入れ子）
Scssを使うと、スタイル定義をネストして記述することができるので、
コードの管理がしやすいのと、記述量がへらせます。
セレクタのネスト
セレクタのネストというのは、.pc-menu .nav_up imgのように
入れ子になっているセレクタにスタイルを当てる場合に使用します。
SCSSでは、下記のようにセレクタをネストさせて記述することができます。
.pc-menu {
display:block;
.nav_up {
padding: 0px 30px;
img {
height: 28px;
width: auto;
}
}
}
上記をコンパイルすると下記のようなコードになります。
|
|
.pc-menu { .pc-menu .nav_up { .pc-menu .nav_up img { |
プロパティのネスト
例えば、下記のようなコードがあるとします。
|
|
.text {
font-size: 12px;
font-weight: 500;
font-family: “Noto Sans JP”, sans-serif;
}
|
Scssの場合は、下記のように記述することができます。
|
.text {
font: {
size: 12px;
weight: 500;
family: “Noto Sans JP”, sans-serif;
}
}
|
親セレクタの参照
例えば、.container.itemのように複数クラスを指定してスタイルを記述する場合があると思います。
そのような場合は、下記のように記述します。
|
.container {
&.item {
color: red;
}
}
|
単純にセレクタをネストする場合は「&」無しで記述していましたが、
親セレクタを参照する場合は「&」を先頭につけて記述します。
- &マークなし
- 親セレクタと子セレクタの間に半角スペースが1つ作られる
- &マークあり
- 親セレクタと子セレクタの間にスペースが作られない
ちなみにhoverの場合
-
a {color: #fff;&:hover { opacity: 0.7; }}
ネストの注意点
ネストは何重にも作ることができます。
しかしあまりネストが深くなってしまうと生成される
CSSのコードが複雑になってしまうため、
あまり深く作らない方がいいです。
例：ネストが深い例
-
.works_relative_wrapper {height: 100%;padding: 100px 0 0;.works_wrapper {top: 65px;right: 0;bottom: 0;left: 0;width: 100%;margin: 0 auto;ul {display: flex;flex-wrap: wrap;margin: 36px 0 0;li {flex: 100% / $split-3grid;position: relative;margin: 0;&:hover { background-color: rgba(0, 0, 0, 1); }&:nth-child(3),&:nth-child(6) { margin-right: 0; }a {.ul_works_img_wrap{overflow: hidden;width: 100%;height: 100%;}.in_works_div {@include zoomtext;h3 {@include in_works_cat;@include max-screen($breakpoint-pc) {top: 35%;}}}img {@include zoompoint;}&:hover {img {@include zoomin;}.in_works_div {@include zoomtext_hover;}}}&:nth-child(even) {h3 {background-color: $pjcolor-50blue;}}&:nth-child(odd) {h3 {background-color: $pjcolor-50pink;}}}}
変数が使える！
Scssを使えば様々な変数を使ってスタイル定義
を行うことができます。
変数を使うメリット
変更に強いコードが書ける
変数を使用することによって、変更に強いコードを記述することができます。
例えば、メインカラーを$main-colorのような変数に指定しておけば、
後で色の変更が入った場合でも変数の値を書き換えるだけで済むため、
時間をかけずに修正ができます。
変数の使い方
変数を使えるようにするために、まずは変数の定義を行います。
「$」を頭に付けることで、変数を宣言できます。
|
|
$main-color: #000;
.box {
background: $main-color;
}
|
上記のコードをコンパイルすると、下記のようなCSSが出力されます。
|
|
.box {
background: #000;
}
|
カラーコードやフォントファミリー、ブレークポイントなど、
何度も使用するような値は変数として宣言しておくと、
作業効率とメンテナンス性が向上します。
|
|
$breakpoint-pc: 1200px;
$pjcolor-pink: #e4007f;
$small-font-size: 14px;
|
また@mixin（ミックスイン）という機能も使いやすいので、
ご紹介します。
例えばページ内に共通するボタンなどがある場合、
まとめてcssを定義できるので、便利です。
|
|
@mixin button {
display: inline-block;
padding: 15px 30px 15px;
border: 2px solid #000;
border-radius: 60px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-weight: bold;
background-color: #000;
}
|
こちらを変数として、
呼び出します。呼び出しは@includeを使い、
hover用のcssも@mixinで用意しておけば、
下記の様にを使って呼び出します。
先ほど紹介した＆を使ってhoverも変数で表示できます。
|
|
.btn {
@include button;
&:hover { @include button_hover; }
}
|
まだまだ色々変数の使い方はあるので、
ぜひ参考にしてみてください。
参考
