Transform these clamp CSS variables into functional SCSS variables

Question

Transform these clamp CSS variables into functional SCSS variables

I'm trying to utilize these variables as SCSS variables rather than CSS variables in my project. However, I'm struggling to figure out the proper way to convert them. Does anyone have any suggestions on how I can accomplish this task?

Below are the variables that I aim to convert:

--step--2: clamp(0.91rem, 0.89rem + 0.1vw, 0.96rem);
--step--1: clamp(1.09rem, 1.05rem + 0.21vw, 1.2rem);
--step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.5rem);
--step-1: clamp(1.58rem, 1.46rem + 0.59vw, 1.88rem);
--step-2: clamp(1.89rem, 1.71rem + 0.89vw, 2.34rem);
--step-3: clamp(2.27rem, 2.01rem + 1.29vw, 2.93rem);
--step-4: clamp(2.72rem, 2.36rem + 1.83vw, 3.66rem);
--step-5: clamp(3.27rem, 2.75rem + 2.56vw, 4.58rem);

css variables sass

Answer 1

Answer №1

To utilize the values in SCSS effectively, you can simply implement the following code:

$step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);

It is crucial to include the calc function since the addition is a real-time calculation. Both rem and vw are dynamic units within the browser that cannot be combined directly by SASS during compilation.

Moreover, this limitation implies that if you wish to use these values for further calculations, they must also be treated as real-time calculations through the usage of calc:

.foo {
  width: $step-0 + 1px; // This won't work
  width: calc(#{$step-0} + 1px); // This works correctly
}

Answer 2

To utilize the values in SCSS effectively, you can simply implement the following code:

$step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);

It is crucial to include the calc function since the addition is a real-time calculation. Both rem and vw are dynamic units within the browser that cannot be combined directly by SASS during compilation.

Moreover, this limitation implies that if you wish to use these values for further calculations, they must also be treated as real-time calculations through the usage of calc:

.foo {
  width: $step-0 + 1px; // This won't work
  width: calc(#{$step-0} + 1px); // This works correctly
}

Transform these clamp CSS variables into functional SCSS variables

Answer №1

Similar questions

Customize Material-ui ListItem styles using @media queries

What is the best way to adjust text across several lines to perfectly fit within a div's width?

swap the positions of two distinct texts

Expand Bootstrap accordion on hover

PHP and JavaScript Form: Include the page URL in the email form when submitting

When the width of a single table is large, Bootstrap tables can appear misaligned and not properly

Need to style today's date and selected date differently using react datepicker

Having trouble with the WordPress style file not functioning properly

Customize .dropdown-content style to correspond with unique button IDs using CSS

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

How to Insert a Hyperlink Beside a Button Using HTML and CSS

Selecting parent class using JQuery

Developing an HTML email editing tool.. Utilizing inherited classes?

position the cursor at the end of the text within the text box

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Injecting CSS into a dynamically created element within a Polymer component using jQuery

activating a button following the selection of a checkbox

Tips for creating two lines of text within one line using CSS

What can be done to ensure that the a href tag is functioning as clickable?

Changing in height by utilizing javascript's style.height animation