Sass/Scssについて簡単にまとめてみた。
こんにちは管理人（@vip___p）です。
最近HPを制作するにあたりsass/scssを使用するようになりました。
実際に使用しみるとて非常に便利でもっと早く知りたかった！と思うことが多々ありました。
だってメンテナンスも楽だしコードがすっきりする。
今回はsass/scssについてまとめます。
下記のような方は是非参考にしてください。
- 記述方法がわからない
- 使用するメリットは？
- cssは大体わかったから便利な記述方法を知りたい
今回の記事はudemyで学習した内容を発信しています。
職業訓練校での内容を知りたい方は下記を参考にしてください。
sass/scssとは？
sass/scssとは何でしょうか。
順に確認していきましょう。
sassとはcssのメタ言語です。
要は便利で使用しやすいcssだと思ってもらえれば大丈夫です。
※このページではscssの記述方法が一般的なのでscssで記述していきます。
sass/scssを使用するメリットは？
sass/scssを使用するメリットをご紹介します。
sass/scssを使用するか悩んでいる方やメリットを知りたい方は是非参考にしてください。
便利な機能が多いです。
ネスト(入れ子)してコードがすっきりします。
HPなど作成するとコードの記述量が当然増え、どこに何がどのような作用をするのが探しにくくなります。
ですがscssを使用することで簡単にコードを見ることができます。
@mixinの便利さ
@mixinの中身を定義し、@includeで中身を呼び出すことができます。
これを使用することでコードがわかりやすくなります。
@mixinでは何度も使用するスタイルを定義することができます。
例を見てみましょう。
scss
@mixin sam($color:#333){
color: $color;
}
.text {
@include sam(white);
}
.text2{
@include sam();
}
css
.text{
color: white;
}
.text2{
color: #333;
}
変数を定義できる
変数を定義することができます。
変数の定義としてよく使用する物は下記のとおりです。
- 色
- 数字
- 数値
変数？と疑問となる方も多いと思うので簡単に説明します。
ページに統一性を持たせたい場合など非常に便利です。
- 画像の下の文字色
- sectionごとの間隔を統一したい
- pxセルの統一
変数の定義ページトップに置くことで簡単に変更をすることが可能なので非常に便利です。
下記のように書くことで変数を変更するだけで簡単に[background-color]をまとめて変更することが出来ます。
scss
$cwhite: white;
h1{
background-color: $cwhite;
}
h2 {
background-color: $cwhite;
}
アニメーションの記述が簡単
scssを使用することでアニメーションの記述が簡単にできるようになりました。
下記の記述は0％の時と100％の時の記述方法です。
下記のように記述するとわかりやすくすっきりコードを書くことが出来ます。
@keyframes kf-animate-chars {
0% {
opacity: 0;
transform: translateY(-50%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
for文を使用することができます。
for文を使用することができます。
scss
@for $i from 1 through 2 {
&:nth-child(#{$i}) {
animation-delay: 0.32s / $i;
}
}
sass/scssの使用方法
vscodeを使用します。
vscodeを使用していない場合は下記からダウンロードしてください。
mac.windowどちらも利用可能です。
https://code.visualstudio.com/まずはLive Sass Compilerを使用します。
詳細は別記事を追加します。
使用方法としてはインストール後画面下にあるWatch Sassをクリック。
これでSassの監視をオンにすることができました。
次にLive Serverという拡張子を追加してください。
ファイルを保存すると自動的に最新のコードを反映してくれます。
使用方法はGo Liveをクリック。
まとめ
今回のまとめです。
sass/scssを使用することで非常に簡単に便利にコードを記述することができました。
便利な機能が多くあります。
今回の記事は下記を参考にしています。
より詳しく学習したい方は是非ご覧ください。
この記事が参考になれば幸いです。