Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 10:00
    stscoundrel closed #1494
  • 09:59
    stscoundrel opened #1494
  • 00:15

    nex3 on limit-framework-checks

    (compare)

  • 00:15

    nex3 on main

    Only run framework checks when … (compare)

  • 00:15
    nex3 closed #1493
  • Sep 17 23:23

    nex3 on tags-filter

    (compare)

  • Sep 17 23:23

    nex3 on main

    Only run GitHub Actions for tag… (compare)

  • Sep 17 23:23
    nex3 closed #1484
  • Sep 17 23:23
    nex3 review_requested #1493
  • Sep 17 23:23
    nex3 opened #1493
  • Sep 17 23:23

    nex3 on limit-framework-checks

    Only run framework checks when … (compare)

  • Sep 17 23:17

    nex3 on main

    Test against real-world Sass fr… (compare)

  • Sep 17 23:17

    nex3 on framework-tests

    (compare)

  • Sep 17 23:17
    nex3 closed #1487
  • Sep 17 22:31

    nex3 on shared-js-tests

    (compare)

  • Sep 17 22:31

    nex3 on main

    Run shared JS tests from the sa… (compare)

  • Sep 17 22:31
    nex3 closed #62
  • Sep 17 16:58
    Awjin review_requested #62
  • Sep 17 01:59
    nex3 synchronize #62
  • Sep 17 01:59

    nex3 on shared-js-tests

    Install protoc (compare)

The Jared Wilcurt
@TheJaredWilcurt

The code you posted will output

tr.disabled, tr[data-disabled=true], tr[disabled] {
  opacity: 0.4 !important;
}

you can try it on https://sassmeister.com @chris453

new changes to JS API look good. though the code examples there aren't very friendly for JS devs
Michael Odumosu
@MichaelOdumosu57
can we return a mixin from fn and use the result as a mixin
The Jared Wilcurt
@TheJaredWilcurt
mixins cannot be generated
Arslan Ali
@arslanalidev

@arslanalidev
Failed to compile.

./src/components/ForgotPassword/ForgotPassword.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/components/ForgotPassword/ForgotPassword.scss)
Error: Can't resolve '../../images/purelyrx-brick-img.jpeg' in 'C:\Users\arsla\Documents\iTitans\Projects\RXdeliveryWeb\src\components\ForgotPassword'

I had updated my react-scripts to craco
now I am facing the issue of getting the assets in scss files
Do you know how can it will be solved?
The Jared Wilcurt
@TheJaredWilcurt
that's a react/webpack problem, not sass
My suggestion is to use Vue, everything just works. That's all the help I can give on this
Alex Baker
@alexobviously

Hey everyone, I have a question that's not related to Sass - I hope it's alright to post here, it's just that Sass is the only project I know of that's doing what I want and if anyone will know it's one of you.
There is a Sass NPM package generated from the Dart code - right?
I want to do the same thing - generate a JS library from my Dart package, and I can't quite figure out the right way to do it. I thought it'd be straightforward using dart compile js but that requires you to have a main function apparently. So I looked through the Sass repo a bit to try and figure out how you're doing it and I didn't really get anywhere, so I'd really appreciate it if someone could point me in the right direction. I saw some references to an action called pkg-npm-deploy, but I couldn't find where it was defined.

Thanks :)

pgnd
@pgnd

hi all,

i've an scss var defining an hsl color

_my-vars.scss

    $color_grey_medium: hsl(0, 0%, 70%);

in the same file, i've def'd a converter function, from hs; -> rgb

_my-vars.scss

    @function hsl-to-rgb($hsl-color) {
        @return mix($hsl-color,$hsl-color);
    }

using the function works fine if I use an explicit hsl() value,

    @import 'my-vars';
    .test {
        $blah: hsl-to-rgb(hsl(0, 0%, 70%));
    }

but if I embed the var

    @import 'my-vars';
    .test {
-        $blah: hsl-to-rgb(hsl(0, 0%, 70%));
+        $blah: hsl-to-rgb($color_grey_medium);
    }

attempt to bundle reports

SyntaxError
    precss: ... Could not resolve the variable "$color_grey_medium" within "hsl-to-rgb($color_grey_medium)"

iiuc I should be able to ref a var within a function.
what've I missed here? wrong usage? missing includes? etc ... ?

The Jared Wilcurt
@TheJaredWilcurt

Putting this in https://sassmeister.com worked fine:

$colorGrayMedium: hsl(0, 0%, 70%)

@function hslToRgb ($hslColor)
    @return mix($hslColor, $hslColor)

.test
    $test: hslToRgb(hsl(0, 0%, 70%))
    background: $test

.example
    $example: hslToRgb($colorGrayMedium)
    background: $example

My assumption is either you are doing imports wrong, or you have some build tool issues. Also, when using Sass, you don't control the output of colors.

.cow { color: #FF0000; background: #F00; border-color: rgb(255, 0, 0); outline-color: hsl(0, 100, 50); }

will be processed out to

.cow { color: red; background: red; border-color: red; outline-color: red; }

It goes with whichever representation is shortest

@pgnd
The Jared Wilcurt
@TheJaredWilcurt
pgnd
@pgnd
@TheJaredWilcurt I confirmed the test @ sassmeister works. Removed imports from my scenario, and still saw the prob.
Did some digging re: build tool issues, and found this:
csstools/precss#123
which certainly sounds similar, particularly since I'm seeing the 'SyntaxError' in precss :-/
Not sure how to fix/workaround, yet, but have a starting point. thx!
pgnd
@pgnd
looks like crowbar-ing use of https://www.npmjs.com/package/postcss-variables-loader into my process flow may be called for ...
pgnd
@pgnd

Can elements in a Sass map be referenced from within the same map itself?

E.g., I'd like to def "color3" by reference to "color1" in the following map,

$colors: (
    color1:  hsl(221, 15%, 50%),
    color2:  hsl(153, 20%, 50%),
    color3:  map.get($colors, "color1"),
);

That^ fails on compile, with "SassError: Undefined variable." ...

So either not doable, or my syntax is wrong.

The Jared Wilcurt
@TheJaredWilcurt
@use "sass:map";

$colors: (
    color1: hsl(221, 15%, 50%),
    color2: hsl(153, 20%, 50%)
);

$colors: map.set($colors, 'color3', map.get($colors, 'color1'));

.example {
    content: map-get($colors, 'color3');
}
@pgnd
Miriam Suzanne
@mirisuzanne
@pgnd not directly, no. You can either use a solution like the one Jared shows, or use something like https://www.oddbird.net/accoutrement/docs/ which has a custom syntax for describing relationships in a map, and then compiling the map after it's been defined.
pgnd
@pgnd
@TheJaredWilcurt thx for the indirect approach
@mirisuzanne never heard of accoutrement yet ... interesting, thx!
pgnd
@pgnd

I'm taking a forward-look at cleaning up a couple of sass/scss projects, I do see the coming deprecation of @import in favor of @use.

clear enough for local files. what's to be done for external file imports?

a number of projects here import AdobeTypekit

@import url("https://use.typekit.net/xxxxxx.css");

neither of

@use url("https://use.typekit.net/xxxxxx.css");
@use "https://use.typekit.net/xxxxxx.css";

are working here for me. so far, haven't found docs for use of @use with external refs.
what's the correct usage/syntax?

The Jared Wilcurt
@TheJaredWilcurt
@import is an official part of the CSS language, used to make network requests to load other CSS files. @import was also used by Sass to import Sass files locally. This caused a lot of confusion. So Sass will no longer be hijacking @import and instead using the more powerful @use syntax for modular files.
You can continue to use @import as defined in the CSS language, but should stop using it for Sass files
pgnd
@pgnd
yep. i was among the confused. thxalot o/
pgnd
@pgnd

I'm working on mv'ing a Bootstrap site from sass @import usage to @use/@forward.

Mostly working well; stuck on the following issue ... Atm, can't get manage to assign an sass @functions' return value to override a Bootstrap CSS var.
Not clear if it's my usage, or simply not allowed.

For an scss asset layout,

scss/
    styles.scss
    base/
        _index.scss
        _base0.scss
    helpers/
        _index.scss
        _my-vars.scss
    vendors.imports/
        _my-bs5.scss

my main scss is,

scss/styles.scss
    @use 'base';
    @use 'helpers';
    @use 'layout';
    @import 'vendors.imports/my-bs5';

where,

scss/base/_index.scss
    @forward 'base0';

scss/base/_base0.scss
    @use 'sass:color';
    @use 'sass:map';
    @use 'helpers';


scss/helpers/_index.scss
    @forward 'my-vars';

scss/helpers/_my-vars.scss
    @use "sass:color";
    @use "sass:map";

    @function my_color($color-name) {
        @return var(--my_color-#{$color-name});
    }

    $my_colors: (
        "test_color":  hsla(0, 0%, 94.1%, 1),
    );

    :root {
        @each $name, $color in $my_colors {
            --my_color-#{$name}: #{$color};
        }

    }

with that config, if I override BS' body backgroud color in its ":root", assigning value to a CSS var,

scss/vendors.imports/my-bs5.scss

    @use "sass:color";
    @use "sass:map";

    @use '../base';
    @use '../helpers';

    @import "bootstrap/scss/functions";
    @import "bootstrap/scss/variables";
    @import "bootstrap/scss/mixins";
    @import "bootstrap/scss/grid";
    @import "bootstrap/scss/containers";
    @import "bootstrap/scss/root";
    @import "bootstrap/scss/reboot";

    :root {
!!!        --bs-body-bg:  var(--my_color-test_color);
    }
    ...

it works as expected; body color is correctly set to "test_color"

OTOH, if I attempt to use the function,

    :root {
-        --bs-body-bg:  var(--my_color-test_color);
+        --bs-body-bg:  helpers.my_color("test_color");
    }

there's NO ERROR on compile, but the color isn't set.

Checking the sass-compile-generated .css,

grep "bs-body-bg" public/build/css/home.css | grep helpers
    --bs-body-bg: helpers.color("body");

What needs to be done to get that scss function's return value assigned to the BS css var?
Or, is it disallowed?

The Jared Wilcurt
@TheJaredWilcurt
I think this is a good case for making a min repro
pgnd
@pgnd

@TheJaredWilcurt
that's about as minimum as I've been able to get with my setup, and still have Bootstrap involved; sure, likely can be reduced with some fussing around.

are you suggesting that

test.scss
    :root {
        --some-css-var: sass-namespace-name.sass-function-name("argument");
    }

SHOULD work on compile?

Or is that the question you're suggesting the minrepro to find out?

pgnd
@pgnd
and, that's a NO ....
scss interpolation is required.
this works:
--bs-body-bg: #{helpers.color("body")};
The Jared Wilcurt
@TheJaredWilcurt
@nex3 Possible bug. Using npm install sass.
require('sass')
  .render(
    {
      data: 'h1 { quotes: "«" }',
      outputStyle: 'compressed'
    },
    function (err, result) {
      if (err) {
        console.log(err);
      } else {
        // '?h1{quotes:"«"}'
        console.log(String(result.css));
      }
    }
  );
The Jared Wilcurt
@TheJaredWilcurt
According to SassMeister the ?'s value is \ufeff
oh, I guess that's a unicode character to convey UTF-16 encoding?
Natalie Weizenbaum
@nex3
@alexobviously You're looking for the cli_pkgpackage: https://pub.dev/packages/cli_pkg
it's got a lot of docs but if you need any help with it lmk, I wrote it
@TheJaredWilcurt that's a Byte-Order Mark, it basically does the same thing as @charset "utf-8"
Alessandro Russo
@Alessandroinfo
Hi everybody
Where are all the versions of Sass?
The Jared Wilcurt
@TheJaredWilcurt
what a vague question
Alessandro Russo
@Alessandroinfo
I need to see for every Sass version the related features available.
pick a flavor and have fun :)
Alessandro Russo
@Alessandroinfo
Perfection. The sass npm repo what implementation is?
ChenLei
@iChenLei
dart-sass
Alessandro Russo
@Alessandroinfo
Many thanks
Ivan Nikolić
@niksy

Hello everyone!

I made something for Sass projects which I think could be useful to others :)

Sass currently doesn’t have up-to-date linter or error reporter, so I wanted to integrate it with current industry standard linter (Stylelint), so I made plugin which reports Sass errors and depractions as linter errors: https://github.com/niksy/stylelint-sass-render-errors

It’s based on other tool which is used to extract those information from Sass rendering process: https://github.com/niksy/sass-render-errors

Besides reporting errors and deprecations from render result, it can (optionally) check for undefined functions based on current native CSS functions.

Hope this helps you and others in better project maintenance :)

And, as always, suggestions are welcome! :)