ホーム>技術

Sass(SCSS)の基本構文5選

目次

おすすめ

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか?
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく!

CodeCamp

実行環境

OSmacOS Catalina 10.15.7
Sass1.34.0

開発および実行環境がない方は、以下の記事を参考に構築してください。

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法

Sass(SCSS)の基本構文5選

今回は、Sass(SCSS)の基本構文を5つご紹介します。

  • コメント
  • 変数
  • インターポレーション
  • ネスティング
  • 親セレクタ

コメント

コメントを使用するには、”/* 〜 */” でコメントを囲むか “//” でコメントアウトします。
/* 〜 */ で囲ったコメントはCSSファイルに出力されます。
// の後ろに記述したコメントはCSSファイルに出力されません。

/* CSSに出力されるコメント */
// CSSに出力されないコメント
/* CSSに出力されるコメント */

変数

変数を使用するには、変数名の頭に “$” をつけます。
スコープ外の変数を指定した場合、コンパイルエラーとなります。

ヒント

変数にはスコープ(範囲)という概念があります。
スタイルシートで宣言された変数は「グローバル変数」として扱われ、どこからでもアクセスできます。
ブロックで宣言されたものは「ローカル変数」であり、宣言されたブロック内でのみアクセスできます。

$color-red: red; // グローバル変数

.error {
  color: $color-red;
}

.info {
  $color-blue: blue; // ローカル変数
  color: $color-blue;
}

// コンパイルエラー
// .info_border {
//   border: solid 1px $color-blue;
// }
.error {
  color: red;
}

.info {
  color: blue;
}

インターポレーション

インターポレーションを使用するには、変数名を “#{ 〜 }” で囲みます。
インターポレーションを用いることで、セレクタやプロパティ名にも変数を使用することができます。
セレクタやプロパティ名にインターポレーションを使用しなかった場合、コンパイルエラーとなります。

$name: twitter;

.icon-#{$name} {
  color: deepskyblue;
}

// コンパイルエラー
// .icon-$name {
//   color: black;
// }
.icon-twitter {
  color: deepskyblue;
}

ネスティング

セレクタをネストして記述することができます。

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}

親セレクタ

セレクタの頭に “&” をつけることで、親セレクタを指定することができます。

a {
  text-decoration: none;

  &:hover {
    opacity: 0.8; 
  }
}
a {
  text-decoration: none;
}
a:hover {
  opacity: 0.8;
}

お疲れさまでした

Sass(SCSS)の基本構文5選をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか?

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!