皆さん、こんにちは。制作部の関です。
最近面接官として初めて面接を経験して少し興奮している関です。
面接官として応募者の方とお話しをしてみて、
Sassを学んでいない方も多かったので、
そういう方が入社された時に教えれるようにと思い、
備忘録も兼ねて改めてsassの基本を調べてまとめました。
=================================
Sassの基礎その1
「@mixin（ミックスイン）」の使い方
@mixinで定義
＠includeで呼び出す
@mixin mixinの名前 {
//スタイルを定義
}
セレクタ {
＠include mixinの名前;
}
=================================
Sassの基礎その２
「ネスト」
SCSSではセレクタをネストして（入れ子にして）記述できます。ネストすることで親子関係が分かりやすくなります。
//SCSSでの記述
div {
background-color: #fff;
p {
font-size: 12px;
span {
color: white;
}
}
}
=================================
Sassの基礎その３
「アンパサンド（＆）」
ネストした時の親要素を参照できます。
//SCSSでの記述
.block {
background-color: #ccc;
&__element {
font-size: 16px;
}
}
/* CSS（コンパイル結果） */
.block {
background-color: #ccc;
}
.block__element {
font-size: 16px;
}
=================================
Sassの基礎その4
「@import」
CSSファイルだけではなく Sassファイルもインポートできます。@importの記述方法はCSSとほぼ同じです。
@import “test”;
// こういう書き方もできます
@import url(“test.scss”);
@import url(test.scss);
@import “test.scss”;
@import ‘test.scss’;
=================================
Sassの基礎その5
「パーシャル（ _ : アンダースコア）」
SCSSのファイル名の頭に “_” をつけると、CSSにコンパイルされなくなります。その機能を使って、一つのSCSSに各SCSSファイル（ファイル名の頭に “_” をつけたファイル）をインポートし、CSSを1ファイルにすることができます。”_” はインポートする際に省略して記述することができます。
// _test.scss のインポート
@import “test”;
}
=================================
Sassの基礎その６
「変数」
変数は値や文字列を入れておける箱みたいなものです。よく使う値を変数に入れておけば、必要な箇所で呼び出すことができます。
とても便利な機能です。
変数化することで、後からの変更時に宣言した変数に代入している値を変えるだけで一括変換することができます。
※注意点として、変数は参照する前に宣言しておく必要があります。
//変数の使い方
$title-color: #a2d29e;
$main-font: helvetica, arial, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic
ProN”, “メイリオ”, Meiryo, sans-serif;
.text1 {
color: $title-color;
font-family: $main-font;
}
.text2 {
color: $title-color;
font-family: $main-font;
}
以上6つがsassの基本的な機能になります。
実務上ほぼ必須ですし、どの機能も毎日のように使っていますので、
もう忘れることはないでしょう、、、笑
以上制作部の関でした。