Skip to content

Commit fc95b12

Browse files
stevecheckowaystevecheckoway
committed
Fix @import deprecation warnings
Sass will no longer support @import (the equivalent of C's #include). Instead, there's a new module system that uses @use and @forward. I'm following the changes made in this PR. jekyll/minima#848
1 parent b994f50 commit fc95b12

7 files changed

Lines changed: 76 additions & 57 deletions

File tree

‎_sass/minima.scss‎

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,6 @@
11
@charset "utf-8";
2-
// Define defaults for each variable.
3-
$base-font-family: -apple-system,
4-
BlinkMacSystemFont,
5-
"Segoe UI",
6-
Roboto,
7-
Helvetica,
8-
Arial,
9-
sans-serif,
10-
"Apple Color Emoji",
11-
"Segoe UI Emoji",
12-
"Segoe UI Symbol" !default;
13-
$base-font-size : 16px !default;
14-
$base-font-weight: 400 !default;
15-
$small-font-size : $base-font-size * 0.875 !default;
16-
$base-line-height: 1.5 !default;
17-
$spacing-unit : 30px !default;
18-
$text-color : #111 !default;
19-
$background-color: #fdfdfd !default;
20-
$brand-color : #2a7ae2 !default;
21-
$grey-color : #828282 !default;
22-
$grey-color-light: lighten($grey-color, 40%) !default;
23-
$grey-color-dark : darken($grey-color, 25%) !default;
24-
$orange-color : #f66a0a !default;
25-
$table-text-align: left !default;
26-
// Width of the content area
27-
$content-width : 800px !default;
28-
$on-palm : 600px !default;
29-
$on-laptop : 800px !default;
30-
$on-medium : $on-palm !default;
31-
$on-large : $on-laptop !default;
32-
// Use media queries like this:
33-
// @include media-query($on-palm) {
34-
// .wrapper {
35-
// padding-right: calc($spacing-unit / 2);
36-
// padding-left: calc($spacing-unit / 2);
37-
// }
38-
// }
39-
// Notice the following mixin uses max-width, in a deprecated, desktop-first
40-
// approach, whereas media queries used elsewhere now use min-width.
41-
@mixin media-query($device) {
42-
@media screen and (max-width: $device) {
43-
@content;
44-
}
45-
}
462

47-
@mixin relative-font-size($ratio) {
48-
font-size: $base-font-size * $ratio;
49-
}
50-
51-
// Import partials.
52-
@import "minima/base",
53-
"minima/layout",
54-
"minima/syntax-highlighting",
55-
"minima/extras";
3+
@use "minima/base" as *;
4+
@use "minima/layout" as *;
5+
@use "minima/syntax-highlighting" as *;
6+
@use "minima/extras" as *;

‎_sass/minima/_base.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@charset "utf-8";
2+
3+
@use "common" as *;
4+
15
/**
26
* Reset some basic elements
37
*/

‎_sass/minima/_common.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@charset "utf-8";
2+
3+
// Define defaults for each variable.
4+
$base-font-family: -apple-system,
5+
BlinkMacSystemFont,
6+
"Segoe UI",
7+
Roboto,
8+
Helvetica,
9+
Arial,
10+
sans-serif,
11+
"Apple Color Emoji",
12+
"Segoe UI Emoji",
13+
"Segoe UI Symbol" !default;
14+
$base-font-size : 16px !default;
15+
$base-font-weight: 400 !default;
16+
$small-font-size : $base-font-size * 0.875 !default;
17+
$base-line-height: 1.5 !default;
18+
$spacing-unit : 30px !default;
19+
$text-color : #111 !default;
20+
$background-color: #fdfdfd !default;
21+
$brand-color : #2a7ae2 !default;
22+
$grey-color : #828282 !default;
23+
$grey-color-light: lighten($grey-color, 40%) !default;
24+
$grey-color-dark : darken($grey-color, 25%) !default;
25+
$orange-color : #f66a0a !default;
26+
$table-text-align: left !default;
27+
// Width of the content area
28+
$content-width : 800px !default;
29+
$on-palm : 600px !default;
30+
$on-laptop : 800px !default;
31+
$on-medium : $on-palm !default;
32+
$on-large : $on-laptop !default;
33+
// Use media queries like this:
34+
// @include media-query($on-palm) {
35+
// .wrapper {
36+
// padding-right: calc($spacing-unit / 2);
37+
// padding-left: calc($spacing-unit / 2);
38+
// }
39+
// }
40+
// Notice the following mixin uses max-width, in a deprecated, desktop-first
41+
// approach, whereas media queries used elsewhere now use min-width.
42+
@mixin media-query($device) {
43+
@media screen and (max-width: $device) {
44+
@content;
45+
}
46+
}
47+
48+
@mixin relative-font-size($ratio) {
49+
font-size: $base-font-size * $ratio;
50+
}
51+

‎_sass/minima/_extras.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@charset "utf-8";
2+
3+
@use "common" as *;
4+
15
.people-box {
26
display: grid;
37
grid-template-columns: repeat(auto-fill, minmax(160px, auto));

‎_sass/minima/_layout.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@charset "utf-8";
2+
3+
@use "common" as *;
4+
@use "base" as *;
15
@use "sass:math";
26

37
/**

‎_sass/minima/_syntax-highlighting.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@charset "utf-8";
2+
3+
@use "common" as *;
4+
@use "base" as *;
5+
16
/**
27
* Syntax highlighting styles
38
*/

‎assets/css/style.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
---
2-
# Only the main Sass file needs front matter (the dashes are enough)
3-
---
1+
---
2+
# Only the main Sass file needs front matter (the dashes are enough)
3+
---
44

5-
@import "minima";
5+
@forward "minima";

0 commit comments

Comments
 (0)