SASS: Is there a way to cusomize the sass syntax?

user_10289265 0
Viewed 39

I have an scss function like this

@function dpx($size) {
  @return calc(var(--dpx, 10px) * #{$size});
}

This is working fine like this:

h1 {
  font-size: dpx(1.6);
}

But I think it's a little verbose since I need to use it everywhere and I want to make this function more feels like a unit.

I know sass is a precompiler, can I somehow to make the following syntax compiles into dpx(1.6)?

h1 {
  font-size: 1.6dpx;
}
sass css
1 Answers

You could centralize font-sizing using CSSVariables (no SCSS required)

* {
  font-size: calc(var(--dpx, 10px) * var(--fs));
}

.a { --fs: 1; } 
.b { --fs: 2; } 
.c { --fs: 3; } 
.d { --fs: 4; } 
<h2 class="a">lorem</h2>
<h2 class="b">lorem</h2>
<h2 class="c">lorem</h2>
<h2 class="d">lorem</h2>

user_22673080
Related