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

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

Is there a way to automatically insert page numbers into every internal link on an HTML page?

Unable to adjust dimensions with CSS width and height properties

Prevent jQuery from overriding CSS styling

Arranging several lists in a row without any specific order

What is the best way to combine two DIV table rows within Bootstrap 5?

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

Chronological Overview (Highcharts)

Find all the child elements within a specific class using CSS

"Steady layout of grid for the navigation bar and

What is the best way to create grid designs using less in bootstrap?

Transition effects should be applied solely to the foreground text color, not to the background image

What's the best way to incorporate necessary styles into text using particular fonts?

Looking for assistance with CSS styling

Modifying the Position of the Search Box within DataTables by Manipulating DOM Elements

Troubleshooting problem with media queries in CSS

"Using CSS to align content in a table-row format on an HTML display

Switch up the CSS variable within an embedded iframe

Is it possible to automatically close navigation dropdowns when the screen size changes?

Swap out the HTML button element for text once the form is submitted