Kevin Powell - Community•5mo ago

@use instead of @import

So my dilemma is I used to import a _header.scss so it could have all the code for the nav in that area but how would I do something like that with @use since sass is trying to get away from @import 😉

12 Replies

Coder_Carl•5mo ago

kevin had a video on this not too long ago https://www.youtube.com/watch?v=CR-a8upNjJ0 basically if you want the same functionality of import and dont want to get into the nitty gritty of it, just chuck an as * at the end of the @use statement

@use '/folder_location' as *;

@use '/folder_location' as *;

Kevin Powell

YouTube

Stop using @import with Sass | @use and @forward explained

Keep up to date with my Sass course: https://beyondcss.dev/?utm_campaign=OlderYouTubeVideos&utm_source=YouTube The use of @import has been deprecated in Sass for quite a while now, but a lot of people still use it. In this video, I take a quick look at the replacements you should be using instead, @use and @forward. I just scratch the surface...

althepal78•5mo ago

I was watching this and it does not do the same thing as @import. If I had @import my code inside my module file would be rendered. For instance, if I was importing the header, it will render it to the css so on my styles.scss you would see @import vs @use. When I use @import the header with the navigation css would be imported not just a color to use. so

// this is the style.scss
@import 'headerFile';
@import 'colorFile';

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: system-ui;
  color: $text-color;
  padding: 0;
  margin: 0;
}

// this is the style.scss
@import 'headerFile';
@import 'colorFile';

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: system-ui;
  color: $text-color;
  padding: 0;
  margin: 0;
}

If I had the whole nav section in the header coded in the headerFile it would render the whole thing. It does not do the same thing with @use 'headerFIle';. I would actually have to do the styling in the style.scss and I can only use it if I needed something for it. Like if I had @use 'colorfile'; and in the code do something like body{color: colorfile.$text-color;} but it will not render any code that might be inside the colorfile or headerfile. I would prefer my @import in certain cases like what I wrote there I was literally watching this video to see if there was a more something like an import to use @Coder_Carl

Coder_Carl•5mo ago

no? if you use @use it will render the partials

althepal78•5mo ago

yes but only the part of the partials you use in the other scss file

Coder_Carl•5mo ago

@use as * if you dont do that, then yes you have namespaces and the option to limit what is being imported otherwise as I said earlier, if you just want the same functionality, use the as * and you get it

althepal78•5mo ago

what I am trying to say, is when I use @import I can get all this with it

header{   
    nav{
        ul{
            list-style: none;
            margin: 20rem;
            li{
                a{
                    padding: 1rem;
                    font-size: calc(1rem, 10svw, 2rem);
                }
            }
        }
    }
    .logo{
        background: url("/src/images/mylogo.jpg");
        background-repeat:no-repeat;
    }
}

header{   
    nav{
        ul{
            list-style: none;
            margin: 20rem;
            li{
                a{
                    padding: 1rem;
                    font-size: calc(1rem, 10svw, 2rem);
                }
            }
        }
    }
    .logo{
        background: url("/src/images/mylogo.jpg");
        background-repeat:no-repeat;
    }
}

then my styles.scss can look like

@import 'header';
// other code here

@import 'header';
// other code here

and all that header information will be inside the style.scss file when rendered

Coder_Carl•5mo ago

style.css

althepal78•5mo ago

is this no longer possible am I doing things wrong

Coder_Carl•5mo ago

how are you typing out the @use ? this is the current styles.scss I have in my personal project which I can assure you is compiling all of the scss and I get a mapped and built css file @use 'base'; @use 'layout'; @use 'utils'; @use 'components';

althepal78•5mo ago

I am an idiot it was not working because I was not even importing it lmao

Coder_Carl•5mo ago

to do this I am creating a barrel inside of each of the folders though rather than having to declare @use for each and every single one of the files inside my styles.scss inside my _index.scss file I have these set up @forward 'button'; @forward 'card'; @forward 'checkbox'; well ok then

althepal78•5mo ago

yes I am doing the same th injg that is why I got confused because I did the @use 'folder' as *; and then realized I did not use the folder I needed lol

Gaming

Programming

@use instead of @import