Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Feb 03 22:47

    nex3 on main

    Fixes typos (#1879) (compare)

  • Feb 03 22:47
    nex3 closed #1879
  • Feb 02 01:34
    ntkme review_requested #1878
  • Feb 02 01:30
    ntkme synchronize #1878
  • Feb 02 00:24
    nex3 synchronize #1879
  • Feb 02 00:23

    nex3 on sync-test

    (compare)

  • Feb 02 00:23

    nex3 on main

    Update synchronization tests to… (compare)

  • Feb 02 00:23
    nex3 closed #1880
  • Feb 02 00:13
    nex3 synchronize #1880
  • Feb 02 00:13

    nex3 on sync-test

    Update synchronization tests to… (compare)

  • Feb 02 00:08
    dependabot[bot] edited #177
  • Feb 02 00:08
    nex3 synchronize #1880
  • Feb 02 00:08

    nex3 on sync-test

    Update synchronization tests to… (compare)

  • Feb 02 00:05
    dependabot[bot] synchronize #177
  • Feb 02 00:05
    dependabot[bot] edited #177
  • Feb 02 00:04

    dependabot[bot] on npm_and_yarn

    Bump protoc from 1.0.4 to 1.1.3… (compare)

  • Feb 02 00:04
    dependabot[bot] edited #177
  • Feb 02 00:03
    dependabot[bot] edited #177
  • Feb 02 00:03
    nex3 review_requested #1880
  • Feb 02 00:03

    nex3 on sync-test

    Update synchronization tests to… (compare)

The Jared Wilcurt
@TheJaredWilcurt
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:

  1. @use helps scope rule sets and sass bindings to their own files.
  2. @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
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
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
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.
Though most fonts don't have a 500 and 600 font weight anyways, so it just rounds to the closest it has