おにちゃんSass(Scss)の書き方を学びたい方『Sassとは何なのか。Sassの開発環境を準備したい。Sassの書き方を詳しく知りたい。』
本記事では『Sassの基本的な書き方』について詳しく解説しています。
- Sassの基礎知識
- Sassの開発環境を整える
- Sassの基本的な書き方
おにちゃんSassをこれから活用したい方は必ず最後までご覧ください。
本記事執筆日：2021年2月24日
おにちゃん2021年5月25日にリライトしました。
そもそもSass(Scss)の書き方の前に、Sass(Scss)が全く分からない方は下記の記事を最初に読んでください。
上記の記事を読んでからの方が、本記事の理解率が格段に上がります。
おにちゃん塾で人気の記事
書き方の前に：Sass(Scss)とは？
Sassを簡単に言うと、『CSSを効率的に書くことができる言語』です。
Sass(サス)の略称
→Syntactically Awesome StyleSheet
- Syntactically：構文的に
- Awesome：驚くべき
- StyleSheet：スタイルシート
Sassを活用することで、CSSでは実現できなかった速さ×修正力を実現させることができるます。
Sassのメリット
- 作業効率が格段に上がる
- コード量が減る
- メンテナンス性が高まる
イメージ的には、CSSでは5分かかるコードがSassだと3分程度でスタイリングができる様になる感じです。
おにちゃんWeb制作初心者の私でもSassを活用し始めたら、CSSでコードを書きたいとは思いません。
それほど魅力的なSassを活用するには、Sassの開発環境を整える必要があります。
Sassの書き方の前に：環境を整えよう
2021年5月25日：開発環境についての説明を追記しました。
- VScodeをインストール
- Live Sass Compilerをインストール
newフォルダ
- index.html
- css
--index.scss
Sass(Scss)の基本的な書き方5選
Sassの基本的な書き方は５つあります。
- 入れ子(ネスト)
- 変数を活用
- 擬似要素
- メディアクエリの指定
- Sassのファイル分け
１つずつ詳しく解説していきます。
Sassの書き方①入れ子(ネスト)
Sassの基本的な書き方①は『入れ子(ネスト)』です。
入れ子(ネスト)のメリット
- 修正がしやすい
- コード量が減る
- ブロックを意識しながらコーディンができる
コードの書き方は下記の通りです。
/*CSSの書き方*/
header {
width: 100%;
height: 70px;
background: red;
}
header .text{
color: white;
}/*Sassの書き方*/
header {
width: 100%;
height: 70px;
background: red;
.text {
color: white;
}
}Sassを活用すると、コードの記述量が減るだけではなく、修正がしやすくなるメリットがあります。
例えば、上記のコード内のheaderをfooterに変えたい時を想像してみてください。
CSSでは2箇所の修正が必要ですが、Sassであれば1箇所だけの修正でコード記述が終わるのです。
おにちゃんWeb制作を本格的に始めるとこのメリットを実感することができます。
入れ子(ネスト)の注意点：入れ子の階層を深くしていくと、生成されるCSSコードが複雑化されてしまうので、階層の深い入れ子は作成しない様にしましょう。
Sassの書き方②変数を活用
Sassの基本的な書き方②は『変数を活用』
変数を活用するメリット
- よく使うコードを使いまわせる
- 修正が一括で行える
変数を使ったSassの書き方は下記の通りです。
$site-color: red;
.box {
Background: $site-color;
}
/*このように定義すると、簡単に複数のコードに対応することができます。*/よく使用する書き方は『メディアクエリ』『色の定義』です。
メディアクエリの書き方
$breakpoint-sp: 450px;
$breakpoint-pc: 970px;
@media screen and (max-width: $breakpoint-sp) {
}
@media screen and (max-width: $breakpoint-pc) {
}僕自身は@mixinをを活用してメディアクエリを使用していますが、ここでは変数の１つの例として活用させていただきます。
色の定義の書き方
$primary: red;
$secondary: blue;
$accent: yelloe;
.box {
background： $primary;
}Webサイトを運営している方であれば、この設定をしている人が多いです。
僕自身も活用し始めたのですが、かなり良い感じです。
Sassの書き方③擬似要素
Sassの基本的な書き方③は『擬似要素』です。
/*CSSの書き方*/
a{
background: red;
}
a:hover{
background: blue;
opacity:0.8;
}/*Sassの書き方*/
a{
background: red;
&:hover{
background: blue;
opacity: 0.8;
}
}
Sassの書き方④メディアクエリの指定
Sassの基本的な書き方④は『メディアクエリの指定』です。
メディアクエリのメリット
- 書く手間が省ける
- 塊でスタイリングが可能
- レスポンシブ化が簡単
//pcとspの幅を定義
$pc: 1140px;
$sp:740px;
//ここでmax-widthを指定
@mixin pc {
@media (max-width: ($pc)) {
@content;
}
}
@mixin sp {
@media (max-width: ($sp)) {
@content;
}
}
main {
@include pc {
width: 350px;
background: red;
height: 500px;
};
@include sp {
background: blue;
width: 100%;
};
}
footer {
@include pc {
width: 100px;
background: red;
height: 500px;
};
@include sp {
background: blue;
width: 80%;
};
}
Sassの書き方⑤Sassファイルを部品分け
Sassの基本的な書き方⑤は『ファイル部分分け』です。
分けたファイル名をパーシャル(部品)と呼びます。
ファイル分けのメリット
どのコードが書かれているのかが明確化される
実際の書き方は下記の通りです。
/*主な例)_reset.scss*/
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/*Scssファイルにimportする*/
@import ‘reset’;
body {
Background: black;
} パーシャルを読み込むには@importを活用します。
Sass(Scss)の書き方を本格的に学びたい方は動画教材がおすすめ
Sassを本格的に学びたい方はUdemyを活用してみてください。
Sassの書き方だけでなく制作スキルはスクールでも学べます。
- TechAcademy 無料体験
→色々なコースが充実しているので、迷っている方はこのスクールをおすすめします - 侍エンジニア塾 無料体験
→オンラインコミュニティがあるので、費用がない方におすすめ - chot.design
→月額1100円でWebデザイン系の基礎を学ぶことができる
まとめ：Sass(Scss)の書き方
ここまでで「【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】」の解説は以上です。
- Sass(Scss)の書き方の前にVScodeで開発環境を整えよう
- Sass(Scss)の書き方が気になる方はおにちゃん塾を活用しよう
- Sassの書き方を学ぶと普段のCSSコーディングよりも1.5倍程度は効率が良くなるはずです。
おにちゃん本記事は以上です。最後までご覧くださりありがとうございました。
読者におすすめの記事
SASSの書き方は実践で学ぼう
SASSの基本的な書き方を学んだ方は、実践で使えるようにしていきましょう。
おにちゃん僕はSASSの書き方を学んだ後に、模写コーディングに力を入れて、SASSのスキルを磨きました。
模写を上手く活用できると、スキルアップが早くなるので、ぜひ活用してみてください。
やり方が分からない方は下記の記事を参考にしてみてください。
SASSの書き方と同時にスキルアップしよう
SASSの書き方が理解できた方は、そのままの流れでBootstrapとWordPressの知識理解を進めましょう。
Bootstrap：イケてるデザインを簡単に導入できる
WordPress：案件が多数あり、稼ぎやすい
