bootstrap を使う SCSS の書き方

これまで CSS を直書きしかしたことがなくて
bootstrap 4 も SCSS もはじめて使うのですが

たとえば
form 全部に .form-control .form-control-sm って付けたいとき

form {
@extend .form-control .form-control-sm;
}

みたいにかけばいいのでしょうか

これだけかくとクラスがみつからないといわれて
@import 'bootstrap' とかくと
使わない bootstrap の中身もすべて展開されてしまいます

部品ごとに CSS をわけたいときに
どのCSSにも重複する bootstrap の中身が展開されるのは無駄な気がします

どのように書くのがスマートなんでしょうか

行動規範の内容に同意します

回答2件

単にしたいことを書けばこうでしょうね。

SASS
1form {
2  @extend .form-control;
3  @extend .form-control-sm;
4}

ただ、不用意に@extendを使うと生成されるCSSが膨れ上がるので気を付けてください。
わたしは要素のみのセレクタでは怖いので使いません。

投稿2018/08/23 07:41

x_x

総合スコア13749

退会済みユーザー

2018/08/23 10:27

回答ありがとうございます extend で膨れ上がるというより extend するための import でふくれあがるのが困るんですよね CSSを部品ごとにわけるとどのCSSでもbootstrap全体がimport されてしまうので extend するクラスのみがよみこまれるのであれば extend で増えるのは許容できるんですが…

行動規範の内容に同意します

ベストアンサー

残念ながら、Bootstrapの設計思想自体が「form 全部に .form-control .form-control-sm って付けたいとき」には都度<form class="form-control form-control-sm">と書く、というものになっています。

Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., input[type="text"]) and extraneous parent classes (e.g., .parent .child) that make styles too specific to easily override. （Bootstrap 4.1リファレンスより）

和訳すれば、「クラス以外のセレクタに対してnormalize以上のスタイルを適用してしまうと、あとあとオーバーライドするのが面倒になる（ので、適用するCSSはすべてクラスで指定する）」ということです。

クラスなしで特定のスタイルを利かせる、という設計のベースにするには、Bootstrapは方向性が違いすぎます。

投稿2018/08/23 07:13