Skip to content

Commit a38f046

Browse files
sebastianmusialsebastianmusial
authored
Merge pull request #4 from sebastianmusial/feat/font-settings
feat(font): global settings for line-height, font-size and letter-spa…
2 parents 3a7c0a1 + bc23f9d commit a38f046

4 files changed

Lines changed: 106 additions & 9 deletions

File tree

‎example/general/_global.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Global styles
22
// ------------------------------------------
33
body {
4-
@extend %u-font-size--small;
4+
// @extend %u-font-size--small;
5+
@extend %u-font--small;
56
@extend %u-padding--small;
67
}

‎example/settings/_fonts.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,41 @@ $sscss-font-size: (
66
'big': ($mobile: 24px),
77
);
88

9+
$sscss-font: (
10+
'small': (
11+
$mobile: (
12+
'font-size': 7px,
13+
'line-height': 7px,
14+
),
15+
$tablet: (
16+
'font-size': 14px,
17+
),
18+
$desktop: (
19+
'font-size': 28px,
20+
'line-height': 28px,
21+
),
22+
),
23+
'medium': (
24+
$mobile: (
25+
'font-size': 16px,
26+
'letter-spacing': 0.1em,
27+
'line-height': 1.4,
28+
),
29+
$tablet: (
30+
'font-size': 18px,
31+
'letter-spacing': 0.15em,
32+
'line-height': 2.4,
33+
),
34+
),
35+
'big': (
36+
$mobile: (
37+
'font-size': 25px,
38+
'letter-spacing': 0.15em,
39+
'line-height': 2.4,
40+
),
41+
),
42+
);
43+
944
// Optional global settings
1045
$sscss-font-interpolation: false;
1146
$sscss-font-as-class: false;

‎src/generator/_fonts.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,29 @@
2727
}
2828

2929
}
30+
31+
// ------------------------------------------
32+
// * u-font--{name}
33+
// ------------------------------------------
34+
@if variable-exists(sscss-font) {
35+
$interpolation: false;
36+
@if variable-exists(sscss-font-interpolation) {
37+
$interpolation: $sscss-font-interpolation;
38+
}
39+
40+
$symbol: '%';
41+
@if variable-exists(sscss-font-as-class) {
42+
@if $sscss-font-as-class {
43+
$symbol: '.';
44+
}
45+
}
46+
47+
@each $name, $value in $sscss-font {
48+
#{$symbol}u-font--#{$name} {
49+
@include scalable('letter-spacing', $value, false, false, true);
50+
@include scalable('line-height', $value, false, false, true);
51+
@include scalable('font-size', $value, $interpolation, false, true);
52+
}
53+
}
54+
55+
}

‎src/mixins/_mixins.scss‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,20 @@
3030
@return 2;
3131
}
3232

33-
@mixin set-properties($properties, $map, $index, $sign) {
33+
@mixin set-properties($properties, $map, $index, $sign, $is-multiple: false) {
3434
$keys: map-keys($map);
3535

3636
@each $property in $properties {
3737
$value: map-get($map, nth($keys, $index));
38-
#{$property}: #{$sign}#{$value};
38+
@if not($is-multiple) {
39+
#{$property}: #{$sign}#{$value};
40+
} @else {
41+
$single-value: map-get($value, $property);
42+
43+
@if $single-value {
44+
#{$property}: #{$sign}#{$single-value};
45+
}
46+
}
3947
}
4048
}
4149

@@ -63,40 +71,67 @@
6371

6472
// Scalable
6573
// ------------------------------------------
66-
@mixin scalable($properties, $sscss-map, $global-interpolation: false, $is-negation: false) {
74+
@mixin scalable($properties, $sscss-map, $global-interpolation: false, $is-negation: false, $is-multiple: false) {
6775
$map: get-scalabe-map($sscss-map);
6876
$keys: map-keys($map);
6977
$length: length($keys);
7078
$sign: get-sign($is-negation);
7179
$is-interpolation: is-interpolation($sscss-map, $global-interpolation);
7280
$start-id: get-start-id($is-interpolation);
7381

74-
@include set-properties($properties, $map, 1, $sign);
82+
@include set-properties($properties, $map, 1, $sign, $is-multiple);
7583

7684
@if ($length >= $start-id + 1) {
7785
@for $i from $start-id through ($length - 1) {
7886
$breakpointFrom: nth($keys, $i);
7987
$breakpointTo: nth($keys, ($i + 1));
88+
8089
$valueFrom: map-get($map, $breakpointFrom);
8190
$valueTo: map-get($map, $breakpointTo);
8291

92+
@if ($is-multiple) {
93+
$valueFrom: map-get($map, $breakpointFrom);
94+
$valueTo: map-get($map, $breakpointTo);
95+
}
96+
8397
@media (min-width: $breakpointFrom) {
8498
@if ($is-interpolation and $valueFrom != $valueTo) {
8599
@each $property in $properties {
86-
$linear-map: ($breakpointFrom: $valueFrom, $breakpointTo: $valueTo);
87-
#{$property}: linear-interpolation($linear-map, $is-negation);
100+
@if not($is-multiple) {
101+
$linear-map: ($breakpointFrom: $valueFrom, $breakpointTo: $valueTo);
102+
#{$property}: linear-interpolation($linear-map, $is-negation);
103+
} @else {
104+
@if ($global-interpolation) {
105+
$linear-map: ($breakpointFrom: map-get($valueFrom, $property), $breakpointTo: map-get($valueTo, $property));
106+
#{$property}: linear-interpolation($linear-map, $is-negation);
107+
} @else {
108+
$single-value: map-get($valueFrom, $property);
109+
110+
@if $single-value {
111+
#{$property}: #{$sign}#{$single-value};
112+
}
113+
}
114+
}
88115
}
89116
} @else {
90117
@each $property in $properties {
91-
#{$property}: #{$sign}#{$valueFrom};
118+
@if not($is-multiple) {
119+
#{$property}: #{$sign}#{$valueFrom};
120+
} @else {
121+
$single-value: map-get($valueFrom, $property);
122+
123+
@if $single-value {
124+
#{$property}: #{$sign}#{$single-value};
125+
}
126+
}
92127
}
93128
}
94129
}
95130
}
96131
}
97132

98133
@media (min-width: nth($keys, $length)) {
99-
@include set-properties($properties, $map, $length, $sign);
134+
@include set-properties($properties, $map, $length, $sign, $is-multiple);
100135
}
101136
}
102137

0 commit comments

Comments
 (0)