プログラミング

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

【初心者向け】Sass(Scss)の基本的な書き方【分かりやすく】
おにちゃん
おにちゃん
Sass(Scss)の書き方を学びたい方『Sassとは何なのか。Sassの開発環境を準備したい。Sassの書き方を詳しく知りたい。』

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

本記事の内容

  • Sassの基礎知識
  • Sassの開発環境を整える
  • Sassの基本的な書き方
おにちゃん
おにちゃん
Sassをこれから活用したい方は必ず最後までご覧ください。

それでは、早速本文に入っていきましょう。 

Sassとは?基礎知識

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の環境を整えよう(現在準備中)

現在、Visual Studio Codeでの開発環境を整える方法を準備しています。

Sassの基本的な書き方5選

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

Sassの基本的な書き方

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

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

書き方①入れ子(ネスト)

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の書き方は下記の通りです。 

$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の基本的な書き方③は擬似要素です。

/*CSSの書き方*/

a{
background: red;
}
a:hover{
background: blue;
opacity:0.8;
}
/*Sassの書き方*/

a{
background: red;
 &:hover{
 background: blue;
 opacity: 0.8;
 }
}

書き方④メディアクエリの指定

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の基本的な書き方⑤はファイル部分分けです。 

分けたファイル名をパーシャル(部品)と呼びます。

ファイル部分分けのメリット

どのコードが書かれているのかが明確化される

実際の書き方は下記の通りです。

/*主な例)_reset.scss*/
 
html, 
body, 
ul, 
ol {  
margin: 0; 
padding: 0; 
} 
/*Scssファイルにimportする*/ 
@import ‘reset’; 

body { 
Background: black; 
} 

パーシャルを読み込むには@importを活用します。 

まとめ:Sassの書き方

ここまでが初心者向け】Sass(Scss)の基本的な書き方【分かりやすく】になりました。

本記事で紹介した内容を使いこなせれば、普段のCSSコーディングの1.5倍程度はコーディングが早くなるはずです。

おにちゃん
おにちゃん
本記事は以上です。

最後までご覧いただきありがとうございました!

ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事