タグ: sass

Guideline : css sass scss

ver_4.0

ver 3 を飛ばして4にした。
wordpressでの利用を想定。

色指定　RGBAで指定

style.scss

@charset "UTF-8";
/*
Theme Name: NameTheme URL: noneDescription: Corporate Name
Author: designlab
Version: 0.0.0
Tags: tag ,tag
*/

@import '_01_default.scss';

/*! --------------------------------------------------
Start Customize
-------------------------------------------------- */

@import '_02_base.scss';
@import '_03_layout.scss';
@import '_04_module.scss';
@import '_05_nav.scss';
@import '_06_state.scss';
@import '_07_theme.scss';
@import '_08_contents.scss';

@import 'editor-style.scss';

_01_default.scss

sanitize.cssを入れ込んだ

_02_base.scss

使い回すものを記載。
大きく分けて、変数、数式

_03_layout.scss

サイトのレイヤー

• html
• body
• header、footer
• row、container
• sideBox

---

_06_state_1.0.scss

• 状態が変わる際に付与されるclass
• 主に　js　や　チェックボックスなどの変化で利用

利用したことがない

---

Guideline : CSSは内部的なもので、こちらは、構造的なもの

設計に関して、いろいろな考え方があるようですが、自分のやりたいようにいいとこ取りで、設計することにしてます。BEM、SMACSS、OOCSS、FLOCSS、MCSS…

• バージョン管理はgit でやりたいけど、難しいんだよね。色々と。w
• 目次に説明をつけたいから…
• 図が必要かな

• 疑似は::ダブルで

言葉の定義

大きく分けて、レイアウト　＞　モジュール　＞　パーツ

• レイアウト　レイヤー的な
• モジュール　グローバルに使い回す的な
• コンテンツ　そのページのみで使うもの

ver 2.1.0

@import '_01_sanitize.scss';

/*! --------------------------------------------------
Start Customize
-------------------------------------------------- */

@import '_02_base.scss';
@import '_03_layout.scss';
@import '_04_module.scss';
@import '_05_nav.scss';
@import '_06_state.scss';
@import '_07_theme.scss';
@import '_08_contents.scss';

@import 'editor-style.scss';

_01_sanitize.scss

そのまま利用。

_02_base.scss

/* --------------------------------------------------
_02_base.scss

Setting
- MediaQuery : Brake point
- Color
- Font

extend

-------------------------------------------------- */

使い回すものを記載している。

大きく分けて、

• 変数
• 数式

_03_layout.scss

サイトのレイヤー的な

• html
• body
• header、footer
• row、container
• sideBox

_04_module.scss

モジュールとは、

/* --------------------------------------------------
module ... parts
-------------------------------------------------- */
@import '_04-01_defaultParts.scss';
@import '_04-02_customPrats.scss';
@import '_04-03_commonClass.scss';

_04-01_defaultParts.scss

/*--------------------------------------------------
module
headline
p
a
img

Parts Lib

// classは_04-02_customPrats　にあります
-------------------------------------------------- */

_04-02_customParts.scss

/*--------------------------------------------------
Parts Lib
.m_h1-01
.m_p-01

::before ::after

-------------------------------------------------- */

_04-03_commonClass.scss

これ、他の場所にもあった気が…

/* --------------------------------------------------
Component
Cler fix
clear float
text-align
display
mab 8,16,24,32

Column
- .column3
- .column4

Hr

Common
.- .att
Button
  button01


// -------------------------------------------------- */

_05_nav.scss

/* --------------------------------------------------
Navigation

_05-01_gNav.scss
global navigation

_05-02_lNav.scss
local navigation
side navigation
page navigation
pankuzu list
-------------------------------------------------- */
@import '_05-01_gNav.scss';
@import '_05-02_lNav.scss';

_05-01_gNav.scss

グローバルナビ

_05-02_lNav.scss

ローカルナビ

_06_state.scss

利用したことがない

_07_theme.scss

• version: color,font etc…

利用したことがない

_08_contents.scss

/* --------------------------------------------------
module ... parts
-------------------------------------------------- */
@import '_08-01_commonLayouts.scss';
@import '_08-02_index.scss';
@import '_08-02_404.scss';
@import '_08-02_archive.scss';
@import '_08-02_single.scss'

_08-01_commonLayouts.scss

色々なページで使う、共通のレイアウト

• NewBox
• Access
• Map

_08-02_index.scss

/* --------------------------------------------------
Main Promotion
index design
-------------------------------------------------- */

_08-02_404.scss

_08-02_archive.scss

_08-02_single.scss

editor-style.scss

sideBoxなど、必要ないものは、削除する。

ver 1

 _01_default.scss -> _01_sanitaize.scss

2024

html {fonto-size: 62.5%;}

を利用していこうかと。

14px = 1.4rem

1px = 0.1rem

…sassの計算式も変更

2021

サイズ指定、1rem = 16px
文字サイズ、14px　（モバイル）

気持ち悪いのは、1rem = 1文字と考えてしまうからである。

しかし、0.875rem = 1文字 ( 14 / 16 ) と、考えれば良いだけ。
と思う。

html {
   font-size: 0.875rem;
   font-size: 14px;
}

他は、16pxに指定する。

色々考えたけど、これまでと一緒。

2020年まで

1rem = 16pxで全てを計算していた

コンパイル後、

margin-right: 1rem;
margin-right: 16px;

のような表示で統一。

コードが見やすかったので長い間利用しているが、数年前から、スマホでの文字サイズが、14px 相当が適していると感じているので、デフォルトで、14pxを使えるようになるとどうなるのか？

メリット、デメリットを最近の動向を踏まえて考えたい。

現状のメリット

とにかく色々と計算しやすい。
後少しスペースが欲しい時に、基準が持てるので分かりやすい。

0.1rem = 2px
0.5rem = 8px
1rem = 16px
1.5rem = 24px
2rem = 32px

デメリットは特になかった。
最近の文字サイズに合っていない気がするだけ。

そこで、

1rem = 14px

62.5% を利用する方法もある。が、そんなことする必要あるのか？って感じなんですよね。

今まで

4px,8,px,12px

といった、2の倍数で対応できたので、16pxを利用していたと思う。

とりあえず、14で適当にしたら、どうなるか？あまり気にぜず計算してみよう。

0.1rem = 2px ... = 2/14
0.5rem = 7px ... = 7/14
1rem = 14px ... = 14/14
1.5rem = 24px
2rem = 32px

320px = 16 * 20rem

色々考えたけど、そもそも、割り切れない…そういえばそうだった。

sass のmixin で管理しているから、割り切れた方が、管理しやすいので、最初の結論に至る。