1.0.1 • Published 7 years ago
@elricb/sass-themer-modular-scale v1.0.1
sass-themer-modular-scale
library
sass-themer-modular-scale/index.scss
demo
public/index.html
test
src/app/router/route/IndexComponent/index.scss
cd src/
npm install
npm run start
usage
modular scale mixins
name | mixin |
---|---|
Reset | @include resetModularScale() |
Set | @include setModularScaleItem($name, $base, $ratio) |
modular scale functions
$amount - number to increase scale by (1 to n)
$label - the name set in mixin setModularScaleItem().
name | function |
---|---|
Scale | modularscale($amount, $label) |
example
@import "~sass-themer-modular-scale/index.scss";
@include resetModularScale();
@include setModularScaleItem(desktop-font, 0.75rem, 1.18);
@include setModularScaleItem(tablet-font, 0.7rem, 1.17);
@include setModularScaleItem(mobile-font, 0.65rem, 1.16);
h1 {
font-size: modularscale(6, desktop-font);
//breakpoint
font-size: modularscale(6, tablet-font);
}
h2 {
font-size: modularscale(5, desktop-font);
}
h3 {
font-size: modularscale(4, desktop-font);
}
h4 {
font-size: modularscale(3, desktop-font);
}
h5 {
font-size: modularscale(2, desktop-font);
}
p {
font-size: modularscale(1, desktop-font);
}