SCSSとは?CSSとの違いや基本的な書き方までわかりやすく解説

 

Webサイトのレイアウトを設定する際に使用されるスタイルシート

長年スタイルシートはCSSが使用されていましたが、昨今ではCSSをさらに拡張したSCSSが注目されています。

本記事では、SCSSの概要およびCSSの違い、SCSSの簡単な書き方について詳しく解説します。

VPSならミライサーバー
\2週間無料・全プランSSD搭載/
ミライサーバーを無料で試す

SCSSとは

SCSSの概要

SCSSSassy CSSは、スタイルシート(Webサイトや文書などの見た目の表示形式を定義する)の拡張構文を提供するプリプロセッサであり、CSSCascading Style Sheets)の機能を強化します。

SCSSはCSSと完全に互換性があり、従来のCSSファイルをそのまま使用できます

またSCSSの追加機能を活用することで、より効率的で洗練されたスタイルシートを作成できます。

SCSSの主な特徴はCSSからさらに機能が追加され、開発効率が向上しているだけでなく保守のしやすさという点も優れています。

そのため、SCSSは大規模なプロジェクトや複雑なデザイン要件を持つWebサイトの開発に非常に便利です。

さらに、SCSSはNode.jsやGulpなどのビルドツールと連携し、スタイルシートのコンパイルを自動化できます。

これにより、開発者はスタイルシートの作成と管理に集中でき、生産性を大幅に向上させることができます。

SCSSのメリット、デメリット

SCSSはCSSから機能が拡張されており、開発効率やスタイルシートの保守性に優れていますが、それぞれメリット・デメリットがあります。

〈メリット〉

    • 変数を使うことで、スタイルを一元管理でき、デザインの一貫性を保ちやすい
    • ネスト機能により、CSSセレクタを階層的に書けるため、コードの可読性が向上する
    • ミックスインを使えば、繰り返し使用するスタイルを再利用できる
    • 継承機能により既存のスタイルを拡張すし、新しいスタイルを作成することも可能

〈デメリット〉

    • 過度に使用すると、スタイルシートが複雑化し、メンテナンスが難しくなるリスクがある
    • CSSに比べて習得に時間がかかる
    • コンパイルツールが必要

SCSSは多くの機能が追加され効率よく開発ができますが、過度に使用するとスタイルシートが複雑化し、本来のメリットが得られにくくなります。

また、CSSは「学習しやすい」というメリットがありましたが、SCSSは機能が追加されている分、習得に時間がかかります。

これらの点から、小規模なWebサイトではCSS、大規模WebサイトではSCSSと、使い分けることも検討しましょう。

\ 2週間無料でお試しできます! /
VPSを使ってみる

SCSSとCSSの違い

CSS、SCSSともにスタイルシート言語であるため、Webサイトのレイアウトを定義できるという点では同じです。

違いとしては、SCSSは変数やネストといった機能が利用できるため、CSSに比べ開発効率・保守性に優れているという点があげられます。

CSSではWebサイトが大規模になると、スタイルシートが肥大化し、メンテナンスが難しくなります。

SCSSとSASSの違い

SCSSは、Sass(Syntactically Awesome StyleSheets)と呼ばれるCSSの拡張言語の構文の1つであり、同じくSassの構文の1つとして、SASSがあります。

それぞれの記述例から、2つの違いを見てみましょう。

【SCSS】

.text{
font-size: 10px;
a{
color: blue; font-color: blue;
}
}

【SASS】

.text
font-size: 10px;
a
color: blue;

SCSSでは『中括弧 { }』 と『セミコロン ; 』 を使う一方、SASSはインデントによってコードの階層を示します。

SCSSは従来のCSSの書き方に慣れている開発者にとっては、CSSと互換性があり、既存のCSSファイルをそのまま利用できるため、広く普及しています。

一方、SASSは、コードがより簡潔に書けるメリットがありますが、インデントの間違いがエラーを引き起こしやすく、注意が必要です。

どちらの構文を使用するかはプロジェクトや開発チームの好みによりますが、SCSSはCSSからの移行が容易であり、従来のCSSファイルとの互換性を保ちながら機能強化を行いたい場合に特に適しています。

SCSSの書き方

変数

ここでは、実際にSCSSの機能ごとに書き方を説明していきます。

最初に説明するのは、変数の定義です。

プログラミングにおける変数と同様、色やフォントサイズといった値を代入し、同じ値を繰り返し使用する場合に変数を設定することでコードの保守を容易にできます

$primary-color: #3498db;

$font-stack: Helvetica, ‘sans-serif’;

 

body {

color: $primary-color;

font-family: $font-stack;

}

 

入れ子

CSS内で階層構造を表現することで、親子関係を明確にし、コードが読みやすくなります

nav {

  ul {

margin: 0;

padding: 0;

list-style: none;

  }

  li {

display: inline-block;

  }

 

  a {

display: block;

padding: 6px 12px;

text-decoration: none;

  }

}

条件分岐

プログラミング言語と同様、CSS内でif文によって条件分岐を行うことができます。

これにより、条件によって処理を変えることが可能です。

$theme: light;

 

body {

  @if $theme == light {

backgr  ound: white;

color: black;

  } @else {

background: black;

color: white;

  }

}

反復

反復は、指定した処理を繰り返し実行します。

以下の例ではeachですが、forやwhileも利用できます。

$spacing-values: 5px, 10px, 15px, 20px;

@each $spacing in $spacing-values {

.margin-#{$spacing} {

margin: $spacing;

}

}

ミックスイン

ミックスインは、スタイルをまとめて定義し別の場所から呼ぶことでスタイルを再利用できる機能です。

あらかじめスタイルルールを定義しておくことで、@includeで呼び出してデザインを統一できます。

@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

          border-radius: $radius;

}

.box {

@include border-radius(10px);

}

配列

配列は、複数の変数をまとめたオブジェクトです。

(例)

$colors: (

primary: #3498db,

secondary: #2ecc71,

danger: #e74c3c

);

 

.button {

background-color: map-get($colors, primary);

color: white;

}

関数

@functionを使用すると、自分で関数を定義できます。

よく使う計算などを定義しておくと便利です。

@function calculate-rem($size, $base: 16px) {

@return $size / $base * 1rem;

}

 

body {

font-size: calculate-rem(14px);

}

継承

extendを使用して既存のスタイルを引き継ぐことができます。

%message-shared {  // 事前に定義したスタイル

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

 

.message {

@extend %message-shared; // 継承

}

 

.success {

@extend %message-shared; // 継承

border-color: green;

}

 

.error {

@extend %message-shared; // 継承

border -color: red;

}

モジュール化

複数のファイルに分けて定義したscssファイルをモジュールとしてインポートし、変数やミックスインを利用することができます。

// _variables.scss ※ファイル名

$primary-color: #3498db;

$secondary-color: #2ecc71;

 

// _mixins.scss ※ファイル名

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

border-radius: $radius;

}

 

// main.scss

@import ‘variables’;

@import ‘mixins’;

 

.box {

background-color: $primary-color;

@include border-radius(10px);

}

まとめ

本記事では、SCSSにおいての概要と基本的な書き方について解説しました。

CSSは一般的なスタイルシートですが、SCSSの機能を使用することで効率的に作成できるだけでなく保守性も向上します。

今回ご紹介した機能を参考にぜひ一度使ってみてください。

\ 2週間無料でお試しできます! /
VPSを使ってみる

LinuxのVPSならミライサーバー

ミライサーバーは、アシストアップ株式会社が提供している、Unix系サーバーに特化したホスティングサービスです。

ミライサーバーのVPSでは、高速処理が可能なSSD全プランに搭載しています。

OSは、UbuntuDebianAlmaLinuxなどの豊富なラインアップから選択することができます。

2週間無料トライアルを実施しておりますので、まずはお気軽にお試しください。

▼ミライサーバーについてはこちら▼Unix系OS専門のホスティングサービス「ミライサーバー」

プランの選択でお困りの場合は、ぜひ一度お問い合わせください。

お問い合わせはこちら

VPSなら「ミライサーバー」

・全プランSSD搭載
・2週間無料

▶ ミライサーバーを無料で試す

関連記事

特集記事

TOP