Skip to content

Commit 35c794c

Browse files
cotes2020cotes2020
authored
perf: modular sass architecture (#2052)
- Modularized the Sass architecture to enhance code maintainability and reduce the output file size - Replaced deprecated `@import` with `@use` / `@forward`
1 parent c69914e commit 35c794c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2523
-2502
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ package-lock.json
2323
!.vscode/tasks.json
2424

2525
# Misc
26-
_sass/dist
26+
_sass/vendors
2727
assets/js/dist

‎.stylelintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"ignoreFiles": ["_sass/vendors/**"],
23
"extends": "stylelint-config-standard-scss",
34
"rules": {
45
"no-descending-specificity": null,

‎_includes/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070

7171
<!-- Bootstrap -->
7272
{% unless jekyll.environment == 'production' %}
73-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css">
73+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].3/dist/css/bootstrap.min.css">
7474
{% endunless %}
7575

7676
<!-- Theme style -->

‎_posts/2019-08-09-getting-started.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,6 @@ Social contact options are displayed at the bottom of the sidebar. You can enabl
9393

9494
To customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
9595

96-
Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main SASS file `_sass/main.scss`{: .filepath} to the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign your new values there.
97-
9896
### Customizing Static Assets
9997

10098
Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in `_data/origin/cors.yml`{: .filepath }. You can replace some of them based on the network conditions in the region where your website is published.

‎_sass/abstracts/_breakpoints.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@use 'sass:map';
2+
3+
$-breakpoints: (
4+
// 1 column
5+
sm: 576px,
6+
md: 768px,
7+
// 2 columns
8+
lg: 850px,
9+
// 3 columns
10+
xl: 1200px,
11+
xxl: 1400px,
12+
xxxl: 1650px
13+
);
14+
15+
@function get($breakpoint) {
16+
@return map.get($-breakpoints, $breakpoint);
17+
}
18+
19+
/* Less than the given width */
20+
@mixin lt($width) {
21+
@media all and (max-width: calc(#{$width} - 1px)) {
22+
@content;
23+
}
24+
}
25+
26+
/* Less than or equal to the given width */
27+
@mixin lte($width) {
28+
@media all and (max-width: $width) {
29+
@content;
30+
}
31+
}
32+
33+
@mixin sm {
34+
@media all and (min-width: get(sm)) {
35+
@content;
36+
}
37+
}
38+
39+
@mixin md {
40+
@media all and (min-width: get(md)) {
41+
@content;
42+
}
43+
}
44+
45+
@mixin lg {
46+
@media all and (min-width: get(lg)) {
47+
@content;
48+
}
49+
}
50+
51+
@mixin xl {
52+
@media all and (min-width: get(xl)) {
53+
@content;
54+
}
55+
}
56+
57+
@mixin xxl {
58+
@media all and (min-width: get(xxl)) {
59+
@content;
60+
}
61+
}
62+
63+
@mixin xxxl {
64+
@media all and (min-width: get(xxxl)) {
65+
@content;
66+
}
67+
}
68+
69+
@mixin between($min, $max) {
70+
@media all and (min-width: $min) and (max-width: $max) {
71+
@content;
72+
}
73+
}

‎_sass/abstracts/_index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@forward 'variables';
2+
@forward 'mixins';
3+
@forward 'placeholders';
4+
@forward 'breakpoints';

‎_sass/abstracts/_mixins.scss‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@mixin text-ellipsis {
2+
overflow: hidden;
3+
text-overflow: ellipsis;
4+
white-space: nowrap;
5+
}
6+
7+
@mixin mt-mb($value) {
8+
margin-top: $value;
9+
margin-bottom: $value;
10+
}
11+
12+
@mixin ml-mr($value) {
13+
margin-left: $value;
14+
margin-right: $value;
15+
}
16+
17+
@mixin pt-pb($val) {
18+
padding-top: $val;
19+
padding-bottom: $val;
20+
}
21+
22+
@mixin pl-pr($val, $important: false) {
23+
@if $important {
24+
padding-left: $val !important;
25+
padding-right: $val !important;
26+
} @else {
27+
padding-left: $val;
28+
padding-right: $val;
29+
}
30+
}
31+
32+
@mixin placeholder {
33+
color: var(--text-muted-color) !important;
34+
}
35+
36+
@mixin placeholder-focus {
37+
opacity: 0.6;
38+
}
39+
40+
@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
41+
color: $color;
42+
font-size: $font-size;
43+
font-weight: $font-weight;
44+
}
45+
46+
@mixin align-center {
47+
position: relative;
48+
left: 50%;
49+
transform: translateX(-50%);
50+
}
51+
52+
@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
53+
&.prompt-#{$type} {
54+
background-color: var(--prompt-#{$type}-bg);
55+
56+
&::before {
57+
content: $fa-content;
58+
color: var(--prompt-#{$type}-icon-color);
59+
font: var(--fa-font-#{$fa-style});
60+
61+
@if $rotate != 0 {
62+
transform: rotate(#{$rotate}deg);
63+
}
64+
}
65+
}
66+
}
67+
68+
@mixin slide($append: null) {
69+
$basic: transform 0.4s ease;
70+
71+
@if $append {
72+
transition: $basic, $append;
73+
} @else {
74+
transition: $basic;
75+
}
76+
}
77+
78+
@mixin max-w-100 {
79+
max-width: 100%;
80+
}

‎_sass/addon/module.scss‎ renamed to ‎_sass/abstracts/_placeholders.scss‎

Lines changed: 12 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
/*
2-
* Mainly scss modules, only imported to `assets/css/main.scss`
3-
*/
4-
5-
/* ---------- scss placeholder --------- */
1+
@use 'variables' as v;
2+
@use 'mixins' as mx;
63

74
%heading {
85
color: var(--heading-color);
96
font-weight: 400;
10-
font-family: $font-family-heading;
7+
font-family: v.$font-family-heading;
118
scroll-margin-top: 3.5rem;
129
}
1310

@@ -82,7 +79,7 @@
8279
}
8380

8481
%rounded {
85-
border-radius: $radius-lg;
82+
border-radius: v.$radius-lg;
8683
}
8784

8885
%img-caption {
@@ -112,14 +109,8 @@
112109
-webkit-box-orient: vertical;
113110
}
114111

115-
@mixin text-ellipsis {
116-
overflow: hidden;
117-
text-overflow: ellipsis;
118-
white-space: nowrap;
119-
}
120-
121112
%text-ellipsis {
122-
@include text-ellipsis;
113+
@include mx.text-ellipsis;
123114
}
124115

125116
%text-highlight {
@@ -151,65 +142,15 @@
151142
}
152143
}
153144

154-
/* ---------- scss mixin --------- */
155-
156-
@mixin mt-mb($value) {
157-
margin-top: $value;
158-
margin-bottom: $value;
145+
%code-snippet-bg {
146+
background-color: var(--highlight-bg-color);
159147
}
160148

161-
@mixin ml-mr($value) {
162-
margin-left: $value;
163-
margin-right: $value;
149+
%code-snippet-padding {
150+
padding-left: 1rem;
151+
padding-right: 1.5rem;
164152
}
165153

166-
@mixin pt-pb($val) {
167-
padding-top: $val;
168-
padding-bottom: $val;
169-
}
170-
171-
@mixin pl-pr($val, $important: false) {
172-
@if $important {
173-
padding-left: $val !important;
174-
padding-right: $val !important;
175-
} @else {
176-
padding-left: $val;
177-
padding-right: $val;
178-
}
179-
}
180-
181-
@mixin placeholder {
182-
color: var(--text-muted-color) !important;
183-
}
184-
185-
@mixin placeholder-focus {
186-
opacity: 0.6;
187-
}
188-
189-
@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
190-
color: $color;
191-
font-size: $font-size;
192-
font-weight: $font-weight;
193-
}
194-
195-
@mixin align-center {
196-
position: relative;
197-
left: 50%;
198-
transform: translateX(-50%);
199-
}
200-
201-
@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
202-
&.prompt-#{$type} {
203-
background-color: var(--prompt-#{$type}-bg);
204-
205-
&::before {
206-
content: $fa-content;
207-
color: var(--prompt-#{$type}-icon-color);
208-
font: var(--fa-font-#{$fa-style});
209-
210-
@if $rotate != 0 {
211-
transform: rotate(#{$rotate}deg);
212-
}
213-
}
214-
}
154+
%max-w-100 {
155+
max-width: 100%;
215156
}

‎_sass/addon/variables.scss‎ renamed to ‎_sass/abstracts/_variables.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/*
2-
* The SCSS variables
3-
*/
4-
51
/* sidebar */
62

73
$sidebar-width: 260px !default; /* the basic width */

0 commit comments

Comments
 (0)