sassを使用していて便利な点をまとめてみた1

sassを使用していて便利な点をまとめてみた

今回は、sassを使用していて便利だと感じている点をいくつか記載したいと思います。
sassがどんなものなのかというのは、説明を省くので調べてみてください！
それでは見てみましょう！

1　SPとPCの記述を同じ場所にかけるので、可読性と制作スピードが上がる
2　CSSファイルを分割してかけるので、運用が楽
3　BEMを快適にかける機能が備わっているので制作スピードが上がる

1　SPとPCの記述を同じ場所にかけるので、可読性と制作スピードが上がる

スマホが普及してから世の中のweb上にあるサイトなどは画面がモバイルに対応して作られていますね。
つまりCSSもSP版とPC版の両方に対応したソースが用意されています。
メディアクエリでSPとPCのソースを分かれていますが、同じ箇所を修正するのに、
SPとPCのソースを行ったり来たりすることになります。

.a {
  color: blue;
}
.b {
  color: blue;
}
.c {
  color: blue;
}

@media screen and (min-width: 768px) {
  .a {
    color: red;
  }
  .b {
    color: red;
  }  
  .c {
    color: red;
  }
}

.a {

color: blue;

}

.b {

color: blue;

}

.c {

color: blue;

}

@media screen and (min-width: 768px) {

.a {

color: red;

}

.b {

color: red;

}

.c {

color: red;

}

このサンプルコードだけなら量が少ないので見やすいですが、
サイト全体のCSSのソース量は軽く数千行は超えてくるので、とにかく可読性が低い。
しかし、sassを使えばspとpcの記述を一か所にまとめて記載できるので、
とにかく見やすい。

.a {
    color: blue;

    @media print, screen and (min-width: 768px) {
       color: red;
    }
}

.b {
    color: blue;

    @media print, screen and (min-width: 768px) {
       color: red;
    }
}

.c {
    color: blue;

    @media print, screen and (min-width: 768px) {
       color: red;
    }
}

.a {

color: blue;

@media print, screen and (min-width: 768px) {

color: red;

}

.b {

color: blue;

@media print, screen and (min-width: 768px) {

color: red;

}

.c {

color: blue;

@media print, screen and (min-width: 768px) {

color: red;

}

クラスを指定してその中にSPとPCの両方を書くことができるので、どのようなスタイルがコンテンツにかかっているかというのがソースで確認できるのがとても便利。ちなみにブレイクポイントもいくつか指定したい場合も全て同じ箇所に記述できます！
もうこれだけでsassを使っててよかったなという感じです！

2　CSSファイルを分割してかけるので、運用が楽
続いてはCSSファイルを分割してかけるので、運用が楽という話です。
先程はソース内での管理方法でしたが、こちらはファイル単位での管理方法です。
sassではファイルを分割して記述し、最終的に一つのファイルにまとめることができます。
これがまた便利。通常のCSSでは、ソース内にコメントアウトでスタイルが当たっている場所が記載されている場合もありますが、制作者がまとめていないと、どこに修正したいソースが
あるのか分からないということがあります。
しかし、sassではimportを使うことで、ヘッダーのCSSで1ファイル、フッターのcssで1ファイルという形で分割して管理できます。

@charset "utf-8";


@import "conf/**";


@import "page/emample";

@charset "utf-8";

@import "conf/**";

@import "page/emample";

ファイルの構成はプロジェクトごとに変更可能で、どこのファイルに対象のcssがあるのか一目瞭然なので、これも非常に便利。
今回はここまでなので、目次３の「BEMを快適にかける機能が備わっているので制作スピードが上がる」は次回に記載します！とても便利なネストと&マークの使い方についても紹介してきます！

Post Views: 583