Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
- DAY 26CSSの上位互換！Sassを学習しよう
Sassとは「Syntactically Awesome Style Sheets」（構造的にイカしたスタイルシート）の頭文字をとって名付けられた、CSSの拡張言語です。
その名の通り、CSSをより楽に書くための言語なんですが、Sassで書くとベタでCSSを書くより圧倒的に早いです。
Sassの書き方には2種類あって、Rubyのようにインデント形式で書いていく『SASS』スタイルと、CSSと同じようにカッコでくくる『SCSS』スタイルがあります。主流は『SCSS』スタイルなので、この書き方を学んでいきましょう！
Sass MeisterでSassの書き方を学ぼう
学習にはSass Meisterというブラウザ上でSassの動画確認ができるツールを使います！
リンクからSass Meisterを開き、HTMLに↓のコードを貼り付けてください。
コピー
<ul class="lists">
<li><a href="#" class="active">リンクA</a></li>
<li><a href="#">リンクB</a></li>
<li class="active"><a href="#">リンクC</a></li>
<li><a href="#">リンクD</a></li>
<li><a href="#">リンクE</a></li>
</ul>
準備ができたら順番に動画をみながら進めていきましょう！
稀にSassMeisterのサイトが落ちてしまい、繋がらないことがあります。
その際には「DAY 27 カフェLPのCSSをSassで書き直してみよう > Tips02. Sassをローカル環境で使えるようにしよう① - Live Sass Compilerの導入」にLive Sass Compilerの導入方法がありますので、こちらの拡張機能をVS Codeに導入の上、Day26のSassの学習を進めてください！
01.Sassの入れ子の書き方
Sassの入れ子の書き方
入れ子で孫要素まで書いてみる
02.疑似要素とクラスの書き方
＆でつなげる擬似要素・クラスの書き方
03.変数を使ってみよう
04.定義したスタイルを使いまわそう
①@extendの使い方
動画の30秒あたりで解説している.buttonのコードはこれです！
コピー.button{
color: #333;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
②@mixinの使い方
05.【必見！】mixinをを使ったブレイクポイントの記述
このパートだけは解説ではなく、実務でよく使うmixinを使ったメディアクエリの設定方法を紹介したいと思います。
mixinの1番の使いどころはメディアクエリなので、それだけ覚えておいてください。
動画の中で解説しているサンプルコードはこちらです！
これを設定しておけば、PC版のスタイルを書きながら、都度スマホ版のスタイルを書き足していくことができてとても便利！
ぜひ使ってみてください。
コピー//マップ型変数breakpointsを定義
$breakpoints: (
//キー 値
'sm': 'screen and (min-width: 576px)',
'md': 'screen and (min-width: 768px)',
'lg': 'screen and (min-width: 992px)',
'xl': 'screen and (min-width: 1200px)'
) !default;
//メディアクエリ用のmixinを定義。デフォ値はmd
@mixin mq($breakpoint: md) {
//map-get(マップ型変数, キー)で値を取得
@media #{map-get($breakpoints, $breakpoint)} {
//この中をカスタムできる
@content;
}
}
06.functionを使おう
07.Sassの要点まとめ
学習のときに意識するポイントとして、Sassのメリットもまとめておきます。
- 入れ子（ネスト）形式で書ける
- 変数が使える
- ”&”記号で擬似要素が書ける
- @mixinでコードの繰り返し記述を防げる
いきなりサクサクと使いこなすのは難しいので、まずは入れ子・変数・”&”記号・@mixin（メディアクエリ）の4つだけ使えればOK。
この4つだけでも、レスポンシブ表示の記述や擬似要素の指定がかなり楽になります！CSSをベタ書きしていた頃に比べると断然早くなりますよ👍
また、ここではSassの基礎を学習しましたが、もっと詳しく知りたい・使いこなしたいという方は↓の書籍もオススメです。
書籍を買う前にもう少しメリットを知りたいという方は、はにわまんさんの↓の記事がオススメです！今回の演習ではやらなかったファイル分割もSassを使う大きなメリットの一つなんですよねー！
Sassを使えるかどうかでコーディングスピードが全く変わってきますし、制作現場でも必須スキルとして求められるものなので、これからスタイルを書くときは必ずSassで書いていきましょう！！