ご依頼を検討されている方

【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】

URLをコピーする
URLをコピーしました!
おにちゃん

Sass(Scss)の書き方を学びたい方『Sassとは何なのか。Sassの開発環境を準備したい。Sassの書き方を詳しく知りたい。』

本記事ではSassの基本的な書き方について詳しく解説しています。

本記事の内容
  • Sassの基礎知識
  • Sassの開発環境を整える
  • Sassの基本的な書き方
おにちゃん

Sassをこれから活用したい方は必ず最後までご覧ください。


本記事執筆日:2021年2月24日

おにちゃん

2021年5月25日にリライトしました。

そもそもSass(Scss)の書き方の前に、Sass(Scss)が全く分からない方は下記の記事を最初に読んでください。

上記の記事を読んでからの方が、本記事の理解率が格段に上がります。

おにちゃん塾で人気の記事

目次

書き方の前に:Sass(Scss)とは?

書き方の前に:Sass(Scss)とは?

Sassを簡単に言うと、CSSを効率的に書くことができる言語です。 

Sass(サス)の略称

→Syntactically Awesome StyleSheet 

  1. Syntactically:構文的に
  2. Awesome:驚くべき
  3. StyleSheet:スタイルシート 

Sassを活用することで、CSSでは実現できなかった速さ×修正力を実現させることができるます。

Sassのメリット

  • 作業効率が格段に上がる
  • コード量が減る
  • メンテナンス性が高まる

イメージ的には、CSSでは5分かかるコードがSassだと3分程度でスタイリングができる様になる感じです。

おにちゃん

Web制作初心者の私でもSassを活用し始めたら、CSSでコードを書きたいとは思いません。

それほど魅力的なSassを活用するには、Sassの開発環境を整える必要があります。 


 

Sassの書き方の前に:環境を整えよう

2021年5月25日:開発環境についての説明を追記しました。

  1. VScodeをインストール
  2. Live Sass Compilerをインストール

newフォルダ

  • index.html
  • css
    --index.scss

 

Sass(Scss)の基本的な書き方5選

Sass(Scss)の基本的な書き方5選

Sassの基本的な書き方は5つあります。

Sassの基本的な書き方
  1. 入れ子(ネスト)
  2. 変数を活用
  3. 擬似要素
  4. メディアクエリの指定
  5. Sassのファイル分け

1つずつ詳しく解説していきます。

 

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をを活用してメディアクエリを使用していますが、ここでは変数の1つの例として活用させていただきます。

 

色の定義の書き方 

$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(Scss)の書き方を本格的に学びたい方は動画教材がおすすめ
Sass(Scss)の書き方を本格的に学ぶ

Sassを本格的に学びたい方はUdemyを活用してみてください。


Sassの書き方だけでなく制作スキルはスクールでも学べます。

無料体験できるプログラミングスクール
  1. TechAcademy 無料体験
    →色々なコースが充実しているので、迷っている方はこのスクールをおすすめします
  2. 侍エンジニア塾 無料体験
    →オンラインコミュニティがあるので、費用がない方におすすめ
  3. chot.design
    →月額1100円でWebデザイン系の基礎を学ぶことができる


まとめ:Sass(Scss)の書き方

まとめ:Sass(Scss)の書き方

ここまでで「【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】」の解説は以上です。

本記事のまとめ
  • Sass(Scss)の書き方の前にVScodeで開発環境を整えよう
  • Sass(Scss)の書き方が気になる方はおにちゃん塾を活用しよう
  • Sassの書き方を学ぶと普段のCSSコーディングよりも1.5倍程度は効率が良くなるはずです。
おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。


読者におすすめの記事


SASSの書き方は実践で学ぼう

SASSの基本的な書き方を学んだ方は、実践で使えるようにしていきましょう。

おにちゃん

僕はSASSの書き方を学んだ後に、模写コーディングに力を入れて、SASSのスキルを磨きました。

模写を上手く活用できると、スキルアップが早くなるので、ぜひ活用してみてください。

やり方が分からない方は下記の記事を参考にしてみてください。


SASSの書き方と同時にスキルアップしよう

SASSの書き方が理解できた方は、そのままの流れでBootstrapとWordPressの知識理解を進めましょう。

Bootstrap:イケてるデザインを簡単に導入できる
WordPress:案件が多数あり、稼ぎやすい

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる