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

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

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

Sassとは？基礎知識

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

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

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

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

Sassの環境を整えよう(現在準備中)

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

Sassの基本的な書き方5選

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箇所だけの修正でコード記述が終わるのです。

書き方②変数を活用 

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) {
}

色の定義の書き方 

$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)の基本的な書き方【分かりやすく】』になりました。

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