くまだどうも、くまだです。
CSSを楽に書ける「Sass」についてですが、私はSassの全ての機能を使いこなしているとは言い難く、そして全て使えなくてもいいかなと思っています。
どんな便利な機能であっても、メリットとデメリット2つ持っていると思っています。
それは、Sassも同様だと個人的に考えています。
ちなみに一周回ってCSSが便利なこともあります。
sassの主な便利機能
Sassといえばだいたい以下のような機能があります。
- 入れ子で書ける（ネスト）
- extend使える
- mixin使える
- 変数管理できる
- ファイル分割管理できる
- 関数使える
他にもあるかもですが、メジャーどころはこんなところかなと。
これらの機能について、私は使わなくても（使えなくても）いいと思っています。
Sassの入れ子（ネスト）を使ってない
Sassを学習した当初は入れ子（ネスト）を使って記述していました。入れ子とは、例えば以下のような記述です。
.header {
&__inner {
}
&__title{
}
&__nav {
&__items {
}
}
&__link {
}
&__img {
}
}
&を使ってつなぐとか、{}の中にまたクラス名を書くことができます。
最初のうちはこれでもいいのですが…
記述が縦に長くなるにつれ、そして入れ子が深くなると自分がいまどの位置にいるのか分からなくなるというデメリットがあります（自分だけかもしれない）。そしてこの記述に慣れてしまうと、CSSの記述に違和感を覚えることでしょう。
1ヶ月後とかにそのファイルを見直すと、非常に読みにくい…
この&の元はどれだ…みたいな感じでめちゃめちゃ読みにくい。
さらにもう一つデメリットを挙げるなら、クラス名での検索ができない点です。
個人的に非常に効率の悪さを感じています…
私の場合はSassを使う場合であっても、CSS式の記述（つまり、入れ子使わない）で済ませています。:hoverやbefore,afterなどを使うときでも&使いません。
@extend使わない
mixinと似たような感じで使える@extendは、一切使っていません。
特に使わなくても困っていないので、ここに関しては特にいうことはありません笑
ちなみに@extendとは、以下のような記述です。
.box {
margin: 20px;
background: red;
padding: 10px;
}
.item {
@extend .box;
}こちらをコンパイルすると、
.box, .item {
margin: 20px;
padding: 10px;
background: red;
}
.boxで使ったスタイルが継承されます。一見mixinと似ているのですが、mixinの場合はコンパイル後のCSSが違います。
@mixin box {
margin: 20px;
background: red;
padding: 10px;
}
.item2 {
@include box;
}
mixinを使った場合、コンパイルすると、次のようになります。
.item2 {
margin: 20px;
padding: 10px;
background: red;
}
＠extendを使う場合はグルーピングされます。で、個人的にはmixinのほうが使いやすいのでextendは使っていません。
mixinはメディアクエリの記述しか使ってない
mixinに関しては使いこなせば便利なんだろうなーという認識です。学習当初はいろいろ考えたりしたような気がしましたが、結局今はメディアクエリを呼び出すための記述ぐらいしか使ってないです。
mixinでメディアクエリの記述を設定してincludeで呼び出す。
これが便利すぎて、メディアクエリの書き方忘れるレベル笑
例えばメディアクエリの記述をmixinで次のように記述し、それをincludeで呼び出す感じです。
$breakpoints: (
"md": 768px,
"lg": 1080px,
);
@mixin mq($breakpoint: md) {
@media screen and (min-width: #{map-get($breakpoints, $breakpoint)}) {
@content;
}
}
.box {
@include g.mq() {
}
}これだけは超便利。
関数あまり使っていない
Sassでは、@functionで自作関数を設定することができます。
こちらの場合も使いこなせばめちゃくちゃ便利なんだろうという認識ですが、私の場合はあまり使っていません…（使いたい）
例えば次のような自作関数を設定して使うことができます。
@function ColorRed() {
@return red
}
.item {
color: ColorRed();
}これをコンパイルすると、
.item {
color: red;
}
上記は関数でも何でもないですが、@functionの中に記述すれば関数っぽく使うことができます。ちなみに@functionは引数を設定することができます。
@function ColorRed($colorValue) {
@return $colorValue;
}
.item {
color: ColorRed(blue);
}これをコンパイルすると、
.item {
color: blue;
}という感じで使うことができます。
ファイル分割と変数管理
ファイル分割と変数管理も便利です。こちらは個人的に使う頻度が高いですが、時と場合によっては使わなくてもいい気がしています。
- 変数管理⇀CSSのカスタムプロパティで代用
- ファイル分割⇀小規模制作なら分割する必要ないかも？
ファイル分割は便利といえば便利なのですが、ファイルの数が膨大になるというデメリットがあります。コンポーネント単位で管理しているなら、コンポーネントの数だけファイルが必要になります。
小規模サイトの場合は、そこまでファイル分割するメリットはあまりないかもしれません。
無理して全部使わなくてもいける
というわけで、Sassで私が使っているのは、
- 変数管理⇀ただし、カスタムプロパティに移行する
- ファイル分割
- mixin（メディアクエリの記述のみ）
の3つです。
それだけでも制作はいけるので、無理して全部使わなくてもいいかなと思います。
ここまで読んでくださりありがとうございました。