2018年度SCSS設計を考えました

おけましておめでとうございます！！！　弊社のエンジニアです！！
世の中に様々な設計理論などが存在しますが、自分なりにこれは使いやすく取り入れているちょっとした設計ルールを紹介しようかと思います。（わたし自身エンジニア歴が決して長い訳では決してありませんが、）
ご参考までに！！＼(^o^)／

SCSS(SASS)について

まず、CSSですがそのままCSSをガリガリ記述しているエンジニアはもう古い！！（・・・すみません）
SCSSっていうのは、CSSで同じような頭の記述(#main .wrap .wrap_inr~~みたいな)をいつもしていて面倒だな…とか、同じような色の設定をしていて面倒だな…とかメディアクエリが長すぎて毎度書くのが面倒だな…っていうわたしのような面倒な人にもってこいのツールです！！（かゆいところに手が届く的な？）
SASSでは変数や先ほどのようなCSSでできないことをSASSでやってやろう！ってものです。ですが厄介なことに、WEBはシンプル(HTMLとCSS)なのでSCSSファイルを読み込んでくれません！
なのでSASSで記述したものをCSSに変換（コンパイル）をなにかしらのツールでやらなければなりません。

• Koala（コアラ）
• compass（コンパス）

あたりを使用して、まずは体験してみてください。CSSがわかる方であれば記述ルールが入れ子になるだけなのでさほど苦なく環境に取り入れられると思いますよ！試しにこれがこうなりますよっていう例を添付しておきます。

SASS

div {
		width: 70%;
		display: inline-block;
		vertical-align: middle;
		h4 {
  		font-weight: bold;
  		margin-bottom: 1.5%;
  		padding-bottom: 1.5%;
  		border-bottom: 2px solid #000;
		}
		p {
			line-height: 1.4;
		}
	}

CSS

div {
  width: 70%;
  display: inline-block;
  vertical-align: middle;
}
div h4 {
  font-weight: bold;
  margin-bottom: 1.5%;
  padding-bottom: 1.5%;
  border-bottom: 2px solid #000;
}
div p {
  line-height: 1.4;
}

このように見慣れたコードに変えてくれますね。入れ子にしたりすることで親のdivの名前を何度も書かなくてよいなどのメリットがあります。

変数設計

SASSのもうひとつの便利なこととして使っているのがこの変数機能です。CSSには変数機能がないので色の指定やメディアクエリを何度も記述しなければなりません。そこでわたしはサイトのルールをあらかじめutill.scssに保存し変数として使い回す手法をとってます。

カラー指定

サイトカラーを保存し使いまわします。使い方は以下をSASSに保存しcolor: $grey;と呼び出してあげるだけです。簡単です。例えばどこかのADが「このグレーもうちょっと濃くできんかね？」って公開前に言ってきたら置換することなくこの変数カラーを変えてあげるだけで全ページのカラーを修正できるわけです。便利ですね。カラーの変数名は簡単にしておかなければ忘れてしまうので注意です

$white: #fff;
$black: #000;
$grey: #aaa;

メディアクエリ指定

毎度メディアクエリごとに、@media screen and (min-width: 500px) and (max-width: 800px) { … }とか書いてたら日が暮れてしまうので、なんとしてもこれを省略したい。ということでメディアクエリも変数にしてしまいましょう。以下コードを参考に指定したければ@include mq() {} と記述すれば変数として使い回すことができます。ですが毎度これを書いていたらCSSがすごいキタナクなるので…(みなかったことにしましょう）

$breakpoints: (
  'sp': 'screen and (max-width: 425px)',
  'tb': 'screen and (min-width: 426px) and (max-width: 999px)',
  'pc': 'screen and (min-width: 1000px)',
) !default;
@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

フォント指定

フォントの指定って地味に面倒なので変数にしましょう。ルールを決めてフォントも一括管理した方が効率がいいので。
フォントがいっぱいあるWEBサイトはデザイナーがアホなだけです。異議申し立てましょう！！

$f-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
$f-serif: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;

clearfix指定

最近はdisplay:flexが流行ってきたのでfloatという旧時代のスタイルは使わなく・・・いやIEが生きている限りfloatは輝く。ヤツがいる限りfloat使用のcf(clearfix問題)はつきまとうのであらかじめmixinして使うようにします。HTML自体にcfなんていうクラスを書くのはダサいのでやめましょう。

@mixin cf {
	zoom: 1;
	&:after {
		display: block;
		content: "";
		clear: both;
	}
}

フォントサイズ

最近PCの級数をそのままSPで使っても結構いいサイズじゃないかと思いはじめてますが、やはりサイズが大きくなる問題があります。PCはpx(ピクセル)で指定したいが、タブレットやスマートフォンはemで指定しデバイスの大きさによって級数を変化させていくのが一番思ったとおりのデザインを導くことができると思います。ただ級数においては要素によってかなりバラバラなのでこれを指定するのはかなり苦行です。なので変数を駆使し自動的にフォントサイズを調整してくれるものを作りましょう。

@mixin fzvw($px) {
  font-size: $px / 640 * 100 + vw;
}
@mixin fz($px) {
  @include mq(sp) {
    font-size: $px * 1.4 / 640 * 100 + vw;
  }
  @include mq(tb) {
    font-size: $px + px;
  }
  @include mq(pc) {
    font-size: $px + px;
  }
}

インナー

divの中にいるインナークラスですが毎度これを書いてはクエリで100%にって面倒だし汚いので、これも変数としミックスインを当てることで解決します。

@mixin inr {
	@include mq(sp) {
		width: 90%;
		margin: 0 auto;
	}
	@include mq(tb) {
		width: 90%;
		margin: 0 auto;
	}
	@include mq(pc) {
		margin: 0 auto;
		width: 960px;
	}
}

おわりに

いかがだったでしょうか。こちらはあくまでも個人的なSASSのutil設計になるので参考までにご利用ください。CSSだけを使用してコーディングをしているのであれば世界がまた広がるかと思います。