sass/sass

A room for discussing Sass and all its implementations.

Abdelrahman Abdelfattah

@blackPeppper

every file

The Jared Wilcurt

@TheJaredWilcurt

https://sass-lang.com/guide#topic-5

Abdelrahman Abdelfattah

@blackPeppper

the problem at compile time before the css-load the files are spread to one file then compiled but hire its compiling directly

The Jared Wilcurt

@TheJaredWilcurt

I'm sorry, there may be a language barrirer, I'm not sure I understand. When using the newer approaches to modularizing your code, you need to be very explicit about where variables you import come from and how you access them.

Abdelrahman Abdelfattah

@blackPeppper

‪_basket.scss - fruitUI - Visual Studio Code‬ 28_06_2022 03_53_35 م.png

artart37

@artart37

Hi there. A short question. Is there any benefit at all using @use instead of @import in angular applications. And is there any benefit using partials instead of normal Sass files (again, in Angular apps)?

Wow! @mirisuzanne , you are here! Read your book recently. Thank you!

The Jared Wilcurt

@TheJaredWilcurt

@import will be removed in a future version of Sass. as @import has a different existing use in CSS. Also @use is a more powerful approach. This also means that it is more complex. But worth learning if starting a new Sass project. What JS framework you use is up to you

@artart37

artart37

@artart37

Thank you, @TheJaredWilcurt . I think one of the main reasons for advocating the shift to @use is that @import's support will cease in the future. There are indeed other advantages:

@use helps scope rule sets and sass bindings to their own files.
@use only ever loads each file once.

Partial vs non-partial
One of the main advantages of partials, as far as I understand, is that they don't transpile into CSS on their own, but only when @imported/@used into a non-partial file. My question is whether this was the only technical difference.

I am not 100% sure, but as far as I understand, you don't have such a problem in angular applications as during build time only specified scss files would be transpiled - here comes my question: if my understanding is correct, is there any other good reason why one would opt for partials instead of non-partials.

The Jared Wilcurt

@TheJaredWilcurt

If you prefix a .sass or .scss file with an underscore, then a Sass process should skip it. We call these "partials". That's all there is to it.

you can separate your code into different modular, reusable files, then import those files into your other files (via @use).

How you set up your project is up to you

Jin Su Park

@jinsupark

Hey @blackPeppper, check out Uniform CSS (uniformcss.com)! It is a utility-first CSS framework similar to Tailwind but in Sass. It has built-in @apply and API function support similar to Tailwind. You can even generate your library and output a JSON compile to build your own API reference if you choose.

Due to the language limitation, I don't think there is an easy way to do JIT compilation however.

André Drougge

@miphe

Hi all, I'm migrating an app from node-sass to dart-sass, moving over from using @imports to @use and so on. I'm wondering if I've understood this correctly...

Previously I could @import all variables from a _config.sass file, and any subsequent sass file would have access to those variables. Now with new sass version, we have scoped variables, so I'll be addressing those variables with something like: config.NEUTRALGRAY - namespaced.

My question is.. now that @use works more like JS imports, am I supposed to import (@use) this config file containing my variables in every sass file that uses those variables? So basically 2-3 hundred files now need @use "config" at the top. Is that right?

The Jared Wilcurt

@TheJaredWilcurt

@miphe sass/sass#2750

André Drougge

@miphe

Thank you @TheJaredWilcurt - that answers it.

The Jared Wilcurt

@TheJaredWilcurt

:+1:

Abdelrahman Abdelfattah

@blackPeppper

@TheJaredWilcurt
is there a way to get contnet from mixin
for another mixin like in a var or something like that i want to get content for the mixin like the function

The Jared Wilcurt

@TheJaredWilcurt

I do not understand your question. see the docs: https://sass-lang.com/documentation/at-rules/mixin

Abdelrahman Abdelfattah

@blackPeppper

// Test CSS output from mixins
@include it('Outputs a font size and line height based on keyword') {
  @include assert {
    @include output {
      @include font-size('large');
    }

    @include expect {
      font-size: 2rem;
      line-height: 3rem;
    }
  }
}

like this

how he talked the output mixin vakue

Abdelrahman Abdelfattah

@blackPeppper

https://github.com/oddbird/true

The Jared Wilcurt

@TheJaredWilcurt

I'm unfamiliar with that library or how it works

You can look through the source code to see though

Eonasdan

@Eonasdan

Is it possible to use the JS API to replace the value of a global variable? e.g. $domain: 'REPLACE'; => sass.compile(file, options??)

The Jared Wilcurt

@TheJaredWilcurt

I don't think so, but if you are using the JS API, why not just use JS string manipulation to modify the value

take the output and then just output.replaceAll('REPLACE', 'Some value');

oh, because the $var might be a value used in other Sass logic

I don't think I understand your use case. Sass is meant to be declaritive, like CSS. If you want to allow others to use a unique value for a variable, have them call your Sass function or mixin with an argument

@Eonasdan

Eonasdan

@Eonasdan

@TheJaredWilcurt yeah my repo is for static templates for Azure B2C that requires FQDN for asset paths. I was hoping to let people run something like npm run compile --domain https://foo.com. The mixin or the replace might work just as well.

Eonasdan

@Eonasdan

The custom function in the options parameter works btw. Thanks for the help

lossius30

@lossius30

Hello guys :) Is this feature missing ? I'm talking about write font-weight:medium; instead of font-weight:500;

The Jared Wilcurt

@TheJaredWilcurt

https://www.sassmeister.com

You can go there and type in your Sass code on the left and see the CSS on the right

.example { font-weight: medium; } will come out unchanged

Sass will occasionally replace some of the code your wrote with an equivalent, but shorter version though. .example{color:rgb(255, 255, 255)} will become .example{color:#fff} for example. But font-weight: medium; is just an alias for font-weight: 600, it shouldn't replace it with 500

The Jared Wilcurt

@TheJaredWilcurt

Tried in RubySass, LibSass, and Dart Sass, none of them mutate the font-weight

lossius30

@lossius30

Ty for answers :) Do you know if there is any way to manually add this feature ?

The Jared Wilcurt

@TheJaredWilcurt

@lossius30 what code do you want to input, and what code do you want outputted

lossius30

@lossius30

@TheJaredWilcurt .example { font-weight: medium; } TO .example { font-weight:500; } :)

The Jared Wilcurt

@TheJaredWilcurt

that doesn't make sense though. As font-weight: medium literally translates to font-weight: 600

it would be like translating color: red to color: #A00 instead of it's true value #F00

if you want font-weight: 500 just type it that way in your document. It's just CSS, it has nothing to do with Sass

or you can do

$medium: 500

.example
    font-weight: $medium

lossius30

@lossius30

@TheJaredWilcurt following the MDN font-weight documentation, 500 is medium.

I don't get what you say "font-weight: medium literally translates to font-weight: 600", there is nothing replaced if I SASS a CSS file with "font-weight:medium"

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

The Jared Wilcurt

@TheJaredWilcurt

I looked it up previously and found something saying that 600 is equivelent to medium, but now I can't find it, MDN does indeed say medium is 500. Don't know where I got the 600 from.

Where communities thrive

People

Repo info

Activity