用途
新着
履歴
言語


SCSS スタイルをまとめて一つにする

SCSS スタイルをまとめて一つにする
SCSS スタイルをまとめて一つにする
SCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。

ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。

長いこと続けていると、CSSがとても肥大化して運用しづらくなってしまいます。

そんなときそれぞれのスタイルをパーツ化、細分化して、効率的に使いたくなります。

しかしながら、現在のCSSをバラバラのファイルに分けると、それぞれブラウザに読み込ませる必要があります。

HTML内に書く事例

<link rel="stylesheet" type="text/css" href="css/example.css">

CSS内に書く事例

@import url("css/example.css");

このような記述を使うと、それぞれ通信が発生し、一瞬のことですが表示の遅延が生じます。

一瞬のデザイン崩れやSEOとしてよくない評価がされる場合があります。

なのでCSSのファイルは一つにまとめたい、そんな要求が生じます。

そんなとき重宝するのが、SASSやSCSSです。(違いは今回書きません)

ここではSCSSを扱いますがこれらはCSSを生成(コンパイル)するための、CSSに似た言語です。

私のおすすめのエディタは以下です。


VSCode(無償)

SCSSをリアルタイムでCSS生成(コンパイル)してくれるプラグインを使います。

LiveSassCompilerがおすすめ。


PhpStorm(有償)

元々の拡張機能のFile Watchersを活用します。

PreferencesのToolsのFile Watchersから使えます。


どちらもscssファイルを保存すると同階層にcssファイルが生成される便利な機能があります。

scssにエラーがあるとコンパイルできないので、エラーの出ないように書きます。

では早速サンプルです。

例えば、3つの要素を持った、common.cssという一つのファイルを作りたいとします。

common.scss

@import 'test/test';
@import 'test2/test2';
@import 'test3/test3';

各scssファイルを読み込むときはこのように書きます。実際ファイルの「.scss」という拡張子は省略されいます。

各ディレクトリの配下にあるtest.scss,test2.scss,test3.scss を読み込んだ一つのcommon.cssをコンパイルで作るコードサンプルということです。

各ファイルを用意していなければ、保存しても当然エラーでCSSは生成されません。

test/test.scss

#hoge{
    font-size:12px;
}

シンプルなCSSを記述したパターン。(プレーンなCSSだけでも動くので、導入しやすいです)

test2/test2.scss

#myId {
  margin: 15px;
    a {
      color: #0FF;
      &:hover { color: #0FF; }
    }
}

二つ目は、SCSSの独自の効率的な書き方をしたパターン。(意味は別ページで紹介しています)

test3/test3.scss

@mixin myPadding($num:10px,$num2:10px) {
    .myBox {
        padding: $num;
        margin: $num2;
    }
}

#demo_box {
    @include myPadding;
}
#demo_box2 {
    @include myPadding(30px);
}

3つ目は、SCSSの書き方を使って、似たようなデザインパターンを2つ記述する例です。

@mixinはあとで使うスタイルを書いて、$num,$num2のような変動値を指定して、2回呼び出しています。

こうすることで、test3で扱うデザインパターンはすべてtest3.scssの中に記述することができます。

common.scssを保存することでこれらのすべてを結合した結果が、以下のようなcommon.cssに書き込まれます。

common.css

#hoge {
  font-size: 12px;
}

#myId {
  margin: 15px;
}

#myId a {
  color: #0FF;
}

#myId a:hover {
  color: #0FF;
}

#test {
  background-color: #111;
}

#demo_box .myBox {
  padding: 10px;
  margin: 10px;
}

#demo_box2 .myBox {
  padding: 30px;
  margin: 10px;
}
/*# sourceMappingURL=common.css.map */

規模によっては、このcommon.cssを直に書いて運用することもあります。

ですが、SCSSを使って、細分化して管理することで、複数人でいじる場合や同様のデザインの量産、使っていない要素の整理、など長く運用する際に力を発揮すると思います。

公開 : 2019-11-08 14:53:35
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top