Rearranging the @use directive in Sass

Question

Rearranging the @use directive in Sass

Here are some style snippets:

tokens.scss

.text-center {
  text-align:center;
}

.bold {
  font-weight: bold;
}

@mixin text-style-1 {
  font-size: 1.2rem;
  font-weight: bold;
}

component/card.scss

@use "../token.scss" as tokens;

.card {
  @include tokens.text-style-1;
  border: 1px solid #333333;
}

index.scss

// Importing components
@use component/card.scss

// Importing tokens
@use tokens.scss

While compiling index.scss, I want the styles from tokens.scss to be included after my component styles. However, due to using mixins from tokens.scss in my components, it always gets imported first and not in the specified order in index.scss.

Is there a way to only include the mixins from tokens.scss without importing all the styles before my components? Or is there a method to define import order when using @use?

The only solution I've found so far is replacing @use with @import in index.scss, but this creates duplicate styling which is not ideal.

css sass

Answer 1

Answer №1

To optimize your code, it is recommended to store the mixin in a separate file to avoid unnecessary styling being brought in with @import or @use.

You can refer to the official SASS documentation for more information.

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

After doing this, you can then use the following approach:

// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

Additionally, here is the expected output after implementing the changes:

.button {
  border-radius: 3px;
  padding: 8px;
}

Answer 2

To optimize your code, it is recommended to store the mixin in a separate file to avoid unnecessary styling being brought in with @import or @use.

You can refer to the official SASS documentation for more information.

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

After doing this, you can then use the following approach:

// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

Additionally, here is the expected output after implementing the changes:

.button {
  border-radius: 3px;
  padding: 8px;
}

Rearranging the @use directive in Sass

Answer №1

Similar questions

Combining the background images of two separate <div> elements results in a deeper shadow effect than when they are individually displayed

Is there a way to conceal the second td element?

Data is not displaying correctly in the Angular Material Table

Utilize custom scrollbar design exclusively for Windows operating system

How to use CSS to align a link vertically next to an image

Issue with setting a background image to a div in Next.js: not functioning as expected

Would it be beneficial to create classes for frequently used CSS styles and apply them to HTML elements?

Utilizing jQuery to toggle nested divs within identical parent divs when they contain more than three elements using the :nth-child selector

"Utilizing Bootstrap's Table Features within the Moodle Platform

Is the imported style file not properly scoped?

Maintain a fixed element and enable the rest of the elements to scroll as the mobile browser address bar collapses while scrolling upwards

Utilizing extra CSS for a full-width Wordpress featured image makes for a visually stunning design

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

Problem with aligning divs in Bootstrap

Place text in the center of a div and add a numbered circle beside it

I am currently working on creating a timer and I am looking to position these three buttons in a circular formation

Is there a method in JavaScript to prevent href="#" from causing a page refresh? This pertains to nyroModal

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Design that adapts to various screen sizes and devices