Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 23 21:04

    nex3 on main

    Fix typo in variable name (#339… (compare)

  • Sep 23 21:04
    nex3 closed #3396
  • Sep 22 22:52

    sassbot on 1.55.0

    (compare)

  • Sep 22 22:52

    sassbot on main

    Update compiler version and rel… (compare)

  • Sep 22 22:38

    nex3 on 1.55.0

    (compare)

  • Sep 22 22:38

    nex3 on 1.55.0

    (compare)

  • Sep 22 22:38

    nex3 on 1.55.0

    (compare)

  • Sep 22 22:37

    nex3 on 1.55.0

    (compare)

  • Sep 22 22:34

    nex3 on main

    Add CHANGELOG entry for 1.55.0 … (compare)

  • Sep 22 22:34

    nex3 on changelog

    (compare)

  • Sep 22 22:34
    nex3 closed #114
  • Sep 22 08:31
    bramus opened #3396
  • Sep 22 00:53
    nex3 review_requested #114
  • Sep 22 00:53
    nex3 opened #114
  • Sep 22 00:53

    nex3 on changelog

    Add CHANGELOG entry for 1.55.0 (compare)

  • Sep 21 23:07

    nex3 on 1.55.0

    (compare)

  • Sep 21 23:07

    nex3 on release

    (compare)

  • Sep 21 23:07

    nex3 on main

    Update dependencies and release… (compare)

  • Sep 21 23:07
    nex3 closed #113
  • Sep 21 23:01
    nex3 review_requested #113
Abdelrahman Abdelfattah
@blackPeppper
hi
The Jared Wilcurt
@TheJaredWilcurt
:sunrise:
yo
Abdelrahman Abdelfattah
@blackPeppper
Hi i want some new features like documentation (you can use docusarus)
new features like conditional import, autoprefixer , JIT complier , official Vscode extensions with full intellisense
and a variable will called compress takes a Boolean and at compile every class has the same property take it like extend at rule it's very useful for components
@apply directive like in tailwind
1 reply
The Jared Wilcurt
@TheJaredWilcurt
@spicestudio I'm not sure what you are asking. Is there a specific question you have? It sounds like you just want various tooling, which isn't really related to Sass directly
Abdelrahman Abdelfattah
@blackPeppper
i want to use range and add auto in my map
The Jared Wilcurt
@TheJaredWilcurt
@spicestudio I'm not sure what you're asking again. I can see your Sass Map, and it contains an "auto": auto and many other values, but I don't know what your goal is. https://www.sassmeister.com/gist/d9b02802323a103c2148e77961821f23?token=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&scope=gist,read:user
perhaps you should write out the CSS you are trying to produce first and then work your Sass toward that
Abdelrahman Abdelfattah
@blackPeppper
$preset-color: (
  pink: (
    50    : $pink-50,
    100   : $pink-100,
    200   : $pink-200,
    300   : $pink-300,
    400   : $pink-400,
    500   : $pink-500,
    600   : $pink-600,
    700   : $pink-700,
    800   : $pink-800,
    900   : $pink-900,
  ),
);

@mixin useShades($shade-end: 600,$shade-start: 100 ) {
  @each $color, $shades in $preset-color {
    @each $shade, $val in $shades {
      @if ($shade >= $shade-start and $shade <= $shade-end) {
        .text-#{"" + $color}-#{$shade} {
          color: #{$val};
        }
        .bg-#{"" + $color}-#{$shade} {
          background-color: #{$val};
        }
      }
    }
  }
}
i mean i want make a range
but add auto value
The Jared Wilcurt
@TheJaredWilcurt
@mixin useShades($shade-end: 600, $shade-start: 100, $auto: true) {
  @if ($auto) {
    .auto {
      auto: 'auto'
    }
  }
  @each $color, $shades in $preset-color {
    @each $shade, $val in $shades {
      @if ($shade >= $shade-start and $shade <= $shade-end) {
        .text-#{"" + $color}-#{$shade} {
          color: #{$val};
        }
        .bg-#{"" + $color}-#{$shade} {
          background-color: #{$val};
        }
      }
    }
  }
}
Is that what you mean?
Abdelrahman Abdelfattah
@blackPeppper
like this
.py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

.py-2 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-3 {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

.py-4 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-5 {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.py-8 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-9 {
  padding-top: 2.625rem;
  padding-bottom: 2.625rem;
}

.py-10 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-11 {
  padding-top: 3.375rem;
  padding-bottom: 3.375rem;
}

.py-12 {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
i want to add range for making the classes
and i want the auto
or any value is not a number
i already maked a map with range but i couldn't add the auto value
I think that is what you want
Actually you could probably simplify these 3 in that example
    $className: map.get($sectionMap, class);
    $properties: map.get($sectionMap, property);
    $values: map.get($sectionMap, values);
Abdelrahman Abdelfattah
@blackPeppper
‪_basket.scss - fruitUI - Visual Studio Code‬ 28_06_2022 10_05_04 ص.png
should convert
form using mixins to use css-load
as conditional import
if i replaced the css-load to regular @import the error goes
The Jared Wilcurt
@TheJaredWilcurt
That's because @import is the old way of doing things, when everything was globally scoped, if you use the new way, variables are scoped. I don't know which file needs access to that variable, but you'll need to provide it to it some how.
Abdelrahman Abdelfattah
@blackPeppper
every file
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: