sorry, thought I sent the public link before. that should work
okay... NOW it should work
Thank you!
correct. Dart-Sass is just where the new features are written, then, it is automatically converted to JS and published under the
sass Node module. you can look at the documentation for how to use it. or if you use Gulp there is Gulp-Sass, or webpack has the Sass-Loader, etc.
yo
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
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
@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
$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};
}
}
}
}
}@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?
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);
should convert
form using mixins to use css-load
as conditional import
if i replaced the css-load to regular @import the error goes
form using mixins to use css-load
as conditional import
if i replaced the css-load to regular @import the error goes
Wow! @mirisuzanne , you are here! Read your book recently. Thank you!
@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
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.
you can separate your code into different modular, reusable files, then import those files into your other files (via
@use).