Sass variables
これは、Sass 変数を含むすべてのファイルを含むsettingsフォルダーの構造です 👇
settings/
│
├── base/
│ ├── _colors.scss
│ ├── _links.scss
│ ├── _misc.scss
│ ├── _scroll-reveal.scss
│ ├── _typography.scss
│ └── _widths-and-spacing.scss
│
├── elements/
│ ├── _accordion.scss
│ ├── _buttons-and-forms.scss
│ ├── _carousel.scss
│ └── _modal.scss
│
├── layout/
│ ├── _footer.scss
│ └── _header.scss
│
├── patterns/
│ ├── _split.scss
│ └── _tiles.scss
│
├── sections/
│ ├── _clients.scss
│ ├── _cta.scss
│ ├── _features-split.scss
│ ├── _features-tiles.scss
│ ├── _hero.scss
│ ├── _pricing.scss
│ ├── _signin.scss
│ ├── _team.scss
│ └── _testimonials.scss
│
└── _settings.scssたとえば、カラー パレットを変更したい場合は、settings/base/_colors.scss ファイルを開いて、HEX 値を独自の値に置き換えます 👇
// The color palette
$palette: (
light: (
1: #FFFFFF,
2: #F0F4FD,
3: #D9E0F0
),
dark: (
1: #2B2B52,
2: #58678C,
3: #95A1BC
),
primary: (
1: #8E79FC,
2: #B8ABFD,
3: #6448FB,
4: #E2DDFE
),
secondary: (
1: #6EB0FC,
2: #A0CBFD,
3: #3C95FB,
4: #D2E6FE
),
alert: (
error: #FF7272,
warning: #FFBF77,
success: #4ED3A1
)
);
...または、文字体裁スケールsettings/base/typography.scss を変更したい場合 👇
...
// The typographic scale
$font--scale: (
// key // font-size, line-height, kerning
alpha: ( 44px, 54px, null ),
beta: ( 38px, 48px, null ),
gamma: ( 32px, 42px, null ),
delta: ( 24px, 34px, -0.1px ),
epsilon: ( 20px, 30px, -0.1px ),
zeta: ( 18px, 28px, -0.1px ),
eta: ( 16px, 24px, -0.1px ),
theta: ( 14px, 22px, null )
);
...