cssのファイル名の付け方
最近、cssのファイル名を何にすべきか悩んでます。
今まで、common.cssと当たり前のように付けてましたがstyle.cssと付ける風潮もあるようで…
正直なところ、特にこうしろと言う決まったルールは無いのでなんでも良いっちゃなんでも良い。
style.cssでもcommon.cssでも、わかりやすい名前ならなんでも良い。
分割SASS・SCSSのディレクトリー構成について
cssを分割して、scssから@use使ってimportするのが良いみたい。
そこでディレクトリー構成をどうするのが良いか考える。
必ずこうしろという厳格なルールは無く、各個人や会社やプロジェクトの仕来りによって構成は違ってくる。
昨日、Dartsassをインストールする時に拾ってきたサンプルプロジェクトのsassディレクトリーの構成を見てみる。
サンプルプロジェクト
style.scss ：主にこのファイルをコンパイルしてcssを作る。
- foundation/：土台、礎、基盤
- utility/：実用品、実用性、役に立つこと、用役、有用性、効用
- component/：部品・要素・成分
- layout/：設計図、配置図、並べたてたもの
- page/：ページ
- global/：広範囲の、全体的な、包括的な @forward 継承的な何か、
style.scssから読み込んでいく順番
@use “foundation”; 土台
>_index.scss
>>@use “reset”; リセットcss
>>@use “base”; body用のcss
@use “utility”; 道具係
>_index.scss
>>@use “utility”; 道具系
@use “component”; 部品系
>_index.scss
>>@use “title”;部品係
@use “layout”; レイアウト係
>index.scss
>>@use “container”; コンテナ用css
>>@use “header”; ヘッダー用css
>>@use “footer”; フッター用css
@use “page”; ページに表示するsection係
>index.scss
>>@use “top/top”;
>>@use “top/top-section01”;
>>@use “top/top-section02”;
>>@use “top/top-section03”;
globalに関しては、各scssファイルから@use “../global” as g;されてる。
>_index.scss
>>@forward “breakpoints”; 画面の横幅が変わると@media screenでcssを切り換える。
>>@forward “color”; 色関連
>>@forward “content-width”; 横幅関連
>>@forward “font”; フォント関連
globalだけ、@useではなく@forward(継承)が使われている。
@useは、
指定したファイルを読み込む。継承が発生しない
@forwardは、
記載してあるファイルを読み込むと、その中で@forwardで読み込んでいるファイルの内容を引き継ぐことができる。
:rootって、なんだろ？
:root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では :root は <html> 要素を表し、詳細度が高いことを除けば html セレクターと同等です。
:root はグローバルの CSS 変数を宣言するのに便利です。
@mixinってなんだろ？
Mixinとは、オブジェクト指向プログラミング言語において、サブクラスを継承して機能を提供し、独立して動作することを意図していないクラスのことです。いくつかの言語では、ミックスインは、その言語のクラスや継承とは異なる仕組みになっています。
オブジェクト指向プログラミングでは、当初、継承は特殊化であると考えられていました。 つまり、継承した部分である（派生型）と（ベース型）の間にリスコフ置換原理が存在すると仮定したわけです。
もっと簡単に言えば、単体で機能するコードではなく、他の部分から呼び出されて適応されると機能するコードのことです。
本体であるクラスが戦士だとしたら、Mixinとはソードと言えます。ソードは単体では使えませんよね、まあ、ある意味クラスを継承するのとそんなに変わりません。
@includeってなんだ？
@includeで@mixinで指定したスタイルをインクルードする。
関数とmixinの違い
関数は関数で、
mixinは、要するにそれ単体では動作せず読み込んで使う事が前提の関数みたいなもん。
@media screen(メディアクエリ)ってなんだろ？
CSS メディアクエリー（CSS Media Query）を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。
@contentってなんだ？
mixinにコンテントブロックを渡せる。
@mixin sp {
@media screen and (
max-width: 767px) {
@content;
}
}
@include sp {
margin-top: .8rem; padding: 0 .2rem .6rem 0;
}
{}の中身が渡せる。
@include spでmixinの内容を引っ張ってくるんだけど、その前に{}も内容をmixinに渡して処理して帰ってくる。
上記の場合は、max-width: 767px以下の時、スタイルが適用されるけど
それ以上の場合は、適用されない。って事だろう。
map-getとは？
map-get(map名, key名)の組み合わせで、mapの中からkeyに対応した値が取り出せる。
mapってなんだ？
下記みたいなやつ、＄から始まるやつ
要するに配列とかjsonみたいなもんか、
$btn-colors: (
"primary": #337AB7,
"secondary": #5CB85C,
"tertiary": #F0AD4E
);#{}とは？
通常エラーになってしまう処理を書ける。#{}に入れたものを素のCSSとして扱って欲しい時に使う。
@function
関数だね。
@extend %container;ってなんだ？
@extendは指定したセレクタのスタイル（定義したスタイル）を継承する機能です。
@extend @mixinって機能が似てるけど、微妙に色々違うみたい。
@extendは、引数が使えない。グルーピングされる。
@mixinは、引数が使える。グルーピングされない。
@extendに使う%（プレースホルダーセレクタ）って？
@extendを使うと、コンパイル後のCSSには継承元のセレクタも生成されます。@extendのためだけにセレクタを用意したい場合は、％をセレクタに用いることができます。（%のことを、プレースホルダーセレクタと言います）
var()ってなんだ？
var() 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。
なんか色々機能が似てて混乱しそうだ。
@useが読み込みで
@forwardが読み込んで継承
@functionが関数で
var() 関数がプロパティ呼び出しで
@mixinが継承クラスで
@includeが mixinを継承する。
@extendが指定したセレクタのスタイルの継承
うん、使いながら覚えよう。
scssについてある程度理解したので、実際に既存のcssをscssに変換していきたいと思う。
単純な変換については、cssをscssに変換してくれるウェブサービスを利用する。
ここでは、cssを切り分けて複数の_scssファイルで管理する事について考えていく。
- @import “./reset_min.css”;を辞め、@useに変更する。
- @import url(“https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap”);をhtmlの方から読むようにする。
- common.scssが長ったらしいので、分割しちゃいましょうか。
分割手順
まず、
foundation/にリセットcssとbodyを入れる。
次に、
layout/にheader・nav・container・subnav・footerのcssを分けて入れる。
page/にsection関係の物を入れる。
component/にtitleとか、そういうパーツを入れる。
utility/に上下パディングとか、左右パディングとかそういう実用的な物を入れる。
global/に全体で使うカラー・フォント・コンテンツ幅・ブレイクポイント関係の物を入れる。
そんな感じぽい。