host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use SASS variables instead of CSS custom properties

Browse source
This commit is contained in:
Paul Nicoué 2025-05-24 12:40:09 +02:00
parent 9afaa44c4b
commit 2f9bf8cd78
2 changed files with 23 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

57
assets/css/abstracts/_variables.scss
View file

@ -2,58 +2,23 @@
// VARIABLES // VARIABLES
// -------------------------------------------------- // --------------------------------------------------
:root {
// Fonts // Fonts
$text-font-family: Helvetica, Arial, sans-serif;
--text-font-family: Helvetica, Arial, sans-serif; $regular-font-weight: 400;
--regular-font-weight: 400; $medium-font-weight: 500;
--medium-font-weight: 500; $semi-bold-font-weight: 600;
--semi-bold-font-weight: 600; $bold-font-weight: 700;
--bold-font-weight: 700; $text-font-size: 1rem;
--text-font-size: 1rem; $text-line-height: 1.1;
--text-line-height: 1.1;
// Dimensions // Dimensions
$icon-size: 3rem;
--icon-size: 3rem; $sidebar-padding: 0.8rem;
--sidebar-padding: 0.8rem;
// Colors // Colors
$black: #000;
--black: #000; $white: #fff;
--white: #fff;
}
// Media queries // Media queries
$tablet-media-query: 48rem; $tablet-media-query: 48rem;
$desktop-media-query: 62rem; $desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
// Fonts
--text-font-size: 0.95rem;
// Dimensions
--icon-size: 2.8rem;
}
}
@media screen and (min-width: $desktop-media-query) {
:root {
// Fonts
--text-font-size: 0.9rem;
// Dimensions
--icon-size: 2.6rem;
}
}

18
assets/css/base/_base.scss
View file

@ -7,14 +7,14 @@
// Fonts and colors // Fonts and colors
body { body {
font-family: var(--text-font-family); font-family: $text-font-family;
font-size: var(--text-font-size); font-size: $text-font-size;
line-height: var(--text-line-height); line-height: $text-line-height;
color: var(--black); color: $black;
} }
strong { strong {
font-weight: var(--bold-font-weight); font-weight: $bold-font-weight;
} }
em { em {
@ -24,7 +24,7 @@ em {
// Link style // Link style
a { a {
color: var(--black); color: $black;
text-decoration: none; text-decoration: none;
transition: text-decoration 200ms ease-in-out; transition: text-decoration 200ms ease-in-out;
@ -35,7 +35,7 @@ a {
} }
&:focus-visible { &:focus-visible {
outline: 1px dashed var(--black); outline: 1px dashed $black;
outline-offset: 2px; outline-offset: 2px;
} }
} }
@ -68,8 +68,8 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: var(--icon-size); width: $icon-size;
height: var(--icon-size); height: $icon-size;
svg { svg {
width: 100%; width: 100%;