ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2018-01-15

Bootstrap4でも採用!sassの便利な機能を紹介

Bootstrap4にも正式に採用されているsass、気になっているけどどんなことができるのか見ていきたいと思います。
sassを使えば通常のcssでできなかったことや手間を軽減する事ができるようになります。

sassとは?

これまでのcssで直接書いていた方法だと高度で大規模なサイトの構築だと制作や修正に時間がかかってしまうようになりました。
Javascriptやphpなどのプログラミング言語では変数や条件分岐などが使いますが、sassではそれらが使えます。

例えばwebサイトの基本カラーをピンクに決めていた場合通常のcssだとたくさんの箇所に色の記述をすると思いますが、いざ変更になった場合修正箇所が多くなり、多くの手間がかかりなおかつ修正漏れなどが発生してしまうことがあります。

そんな場合でもsassを使えば1行変更するだけで変更が全てに反映されるなんてことが可能となります。

sassの使い方1.sassファイル内にcssを書ける

sassをこれから使うひとは安心してください、sass内に通常のcssも書けるのでまずは初めて見ることが出来ます。

.hoge {
     width: 100%;
     margin: 10px;
}

sassの使い方2.ネストで書ける

●cssの場合

.hoge-wrap h1 { font-size: 20px;}
.hoge-wrap p { color: #222; }

●sassの場合

.hoge-wrap{
  h1{ font-size: 20px;}
  p{ color: #222 }
}

記述もすっきりとして見やすくなります。

親参照セレクタ (&)

&を使えば親参照セレクタを使えば疑似要素等を記述する場合便利になります。

●cssの場合

a {
  color: #ff0;
}
a:hover {
  text-decoration: underline;
}

●sassの場合

a {
  color: #ff0;

  &:hover {
    text-decoration: underline;
 }
}

変数

Javascriptの様な変数が使えます、サイトの共通カラーなどに使用すると変更時などに便利です。

●cssの場合

.main { color: #ff0; }
a { color: #ff0; }

●sassの場合

$main-color: #ff0;

.main { color: $main-color; }
a { color: $main-color; }

変数$main-colorに色をセットしてcssの記述で使用することができるので、変更になった場合も$main-colorの値を変更するだけで定義した箇所全てに変更が反映します。

他にもできることがいっぱい

この他にもJavascriptで使うような演算やクラスの継承ににた事もできるため特に大規模サイトや、すでに使ったcssをほかのサイトで使いまわす場合にも便利です。

~この記事の著者~

大規模なホームページ制作は是非ご相談ください

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素