Skip to content

Commit

Permalink
perf: modular sass architecture
Browse files Browse the repository at this point in the history
- Modularized the Sass architecture to enhance code maintainability and reduce the output file size
- Replaced deprecated `@import` with `@use` / `@forward`
  • Loading branch information
cotes2020 committed Nov 24, 2024
1 parent c69914e commit 71612a8
Show file tree
Hide file tree
Showing 45 changed files with 2,523 additions and 2,502 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ package-lock.json
!.vscode/tasks.json

# Misc
_sass/dist
_sass/vendors
assets/js/dist
1 change: 1 addition & 0 deletions .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"ignoreFiles": ["_sass/vendors/**"],
"extends": "stylelint-config-standard-scss",
"rules": {
"no-descending-specificity": null,
Expand Down
2 changes: 1 addition & 1 deletion _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@

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

<!-- Theme style -->
Expand Down
2 changes: 0 additions & 2 deletions _posts/2019-08-09-getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,6 @@ Social contact options are displayed at the bottom of the sidebar. You can enabl

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.

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.

### Customizing Static Assets

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.
Expand Down
73 changes: 73 additions & 0 deletions _sass/abstracts/_breakpoints.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
@use 'sass:map';

$-breakpoints: (
// 1 column
sm: 576px,
md: 768px,
// 2 columns
lg: 850px,
// 3 columns
xl: 1200px,
xxl: 1400px,
xxxl: 1650px
);

@function get($breakpoint) {
@return map.get($-breakpoints, $breakpoint);
}

/* Less than the given width */
@mixin lt($width) {
@media all and (max-width: calc(#{$width} - 1px)) {
@content;
}
}

/* Less than or equal to the given width */
@mixin lte($width) {
@media all and (max-width: $width) {
@content;
}
}

@mixin sm {
@media all and (min-width: get(sm)) {
@content;
}
}

@mixin md {
@media all and (min-width: get(md)) {
@content;
}
}

@mixin lg {
@media all and (min-width: get(lg)) {
@content;
}
}

@mixin xl {
@media all and (min-width: get(xl)) {
@content;
}
}

@mixin xxl {
@media all and (min-width: get(xxl)) {
@content;
}
}

@mixin xxxl {
@media all and (min-width: get(xxxl)) {
@content;
}
}

@mixin between($min, $max) {
@media all and (min-width: $min) and (max-width: $max) {
@content;
}
}
4 changes: 4 additions & 0 deletions _sass/abstracts/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@forward 'variables';
@forward 'mixins';
@forward 'placeholders';
@forward 'breakpoints';
80 changes: 80 additions & 0 deletions _sass/abstracts/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
@mixin text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

@mixin mt-mb($value) {
margin-top: $value;
margin-bottom: $value;
}

@mixin ml-mr($value) {
margin-left: $value;
margin-right: $value;
}

@mixin pt-pb($val) {
padding-top: $val;
padding-bottom: $val;
}

@mixin pl-pr($val, $important: false) {
@if $important {
padding-left: $val !important;
padding-right: $val !important;
} @else {
padding-left: $val;
padding-right: $val;
}
}

@mixin placeholder {
color: var(--text-muted-color) !important;
}

@mixin placeholder-focus {
opacity: 0.6;
}

@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
color: $color;
font-size: $font-size;
font-weight: $font-weight;
}

@mixin align-center {
position: relative;
left: 50%;
transform: translateX(-50%);
}

@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
&.prompt-#{$type} {
background-color: var(--prompt-#{$type}-bg);

&::before {
content: $fa-content;
color: var(--prompt-#{$type}-icon-color);
font: var(--fa-font-#{$fa-style});

@if $rotate != 0 {
transform: rotate(#{$rotate}deg);
}
}
}
}

@mixin slide($append: null) {
$basic: transform 0.4s ease;

@if $append {
transition: $basic, $append;
} @else {
transition: $basic;
}
}

@mixin max-w-100 {
max-width: 100%;
}
83 changes: 12 additions & 71 deletions _sass/addon/module.scss → _sass/abstracts/_placeholders.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
/*
* Mainly scss modules, only imported to `assets/css/main.scss`
*/

/* ---------- scss placeholder --------- */
@use 'variables' as v;
@use 'mixins' as mx;

%heading {
color: var(--heading-color);
font-weight: 400;
font-family: $font-family-heading;
font-family: v.$font-family-heading;
scroll-margin-top: 3.5rem;
}

Expand Down Expand Up @@ -82,7 +79,7 @@
}

%rounded {
border-radius: $radius-lg;
border-radius: v.$radius-lg;
}

%img-caption {
Expand Down Expand Up @@ -112,14 +109,8 @@
-webkit-box-orient: vertical;
}

@mixin text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

%text-ellipsis {
@include text-ellipsis;
@include mx.text-ellipsis;
}

%text-highlight {
Expand Down Expand Up @@ -151,65 +142,15 @@
}
}

/* ---------- scss mixin --------- */

@mixin mt-mb($value) {
margin-top: $value;
margin-bottom: $value;
%code-snippet-bg {
background-color: var(--highlight-bg-color);
}

@mixin ml-mr($value) {
margin-left: $value;
margin-right: $value;
%code-snippet-padding {
padding-left: 1rem;
padding-right: 1.5rem;
}

@mixin pt-pb($val) {
padding-top: $val;
padding-bottom: $val;
}

@mixin pl-pr($val, $important: false) {
@if $important {
padding-left: $val !important;
padding-right: $val !important;
} @else {
padding-left: $val;
padding-right: $val;
}
}

@mixin placeholder {
color: var(--text-muted-color) !important;
}

@mixin placeholder-focus {
opacity: 0.6;
}

@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
color: $color;
font-size: $font-size;
font-weight: $font-weight;
}

@mixin align-center {
position: relative;
left: 50%;
transform: translateX(-50%);
}

@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
&.prompt-#{$type} {
background-color: var(--prompt-#{$type}-bg);

&::before {
content: $fa-content;
color: var(--prompt-#{$type}-icon-color);
font: var(--fa-font-#{$fa-style});

@if $rotate != 0 {
transform: rotate(#{$rotate}deg);
}
}
}
%max-w-100 {
max-width: 100%;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
/*
* The SCSS variables
*/

/* sidebar */

$sidebar-width: 260px !default; /* the basic width */
Expand Down
Loading

0 comments on commit 71612a8

Please sign in to comment.