Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 02:01
    dependabot[bot] edited #200
  • 02:00
    dependabot[bot] edited #200
  • 02:00
    dependabot[bot] synchronize #200
  • 02:00

    dependabot[bot] on npm_and_yarn

    Bump minipass from 4.0.1 to 4.0… (compare)

  • 02:00
    dependabot[bot] edited #200
  • 02:00
    dependabot[bot] edited #200
  • 01:59

    nex3 on main

    Use buf to compile protobufs (#… (compare)

  • 01:59

    nex3 on buf

    (compare)

  • 01:59
    nex3 closed #201
  • 01:35
    nex3 synchronize #201
  • 01:35

    nex3 on buf

    Fix lint (compare)

  • 01:30

    nex3 on main

    Use buf instead of protoc to co… (compare)

  • 01:30

    nex3 on remove-setup-protoc

    (compare)

  • 01:30
    nex3 closed #146
  • 01:26
    nex3 synchronize #201
  • 01:26

    nex3 on buf

    Fix some embedded protocol path… (compare)

  • 01:18
    nex3 synchronize #146
  • 01:18

    nex3 on remove-setup-protoc

    Reformat, fix typo (compare)

  • 01:08
    nex3 synchronize #146
  • 01:08

    nex3 on remove-setup-protoc

    Use buf instead of protoc to co… (compare)

The Jared Wilcurt
@TheJaredWilcurt
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?
Lei Chen
@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! :)

Jin Su Park
@jinsupark
That's really cool! @niksy I'll check this out.
Jin Su Park
@jinsupark

My project Uniform CSS has also officially launched as well! This project is a fully customizable utility generator and CSS framework for Sass to compete against Tachyon, BassCSS, and Tailwind!

Apart from having full control over how you can generate utility classes, it has other cool features like, API Functions, Apply support, JSON Reference output mode, and multi-property custom utility support. Please check it out: https://uniformcss.com

Jin Su Park
@jinsupark
Please support my Sass built project on Product Hunt https://www.producthunt.com/posts/uniform-css
Jan Kowalski
@anthropo51_twitter
Hello! Is it possible to use container queries with SASS?
The Jared Wilcurt
@TheJaredWilcurt
you mean the thing nothing supports? https://caniuse.com/css-container-queries

It's still in proposal state, yeah, it looks like it gets processed correctly in both LibSass and DartSass
INPUT:

.sidebar
  container-type: inline-size
  container-name: sidebar

@container sidebar (min-width: 700px)
  .card
    display: grid
    grid-template-columns: 2fr 1fr

OUTPUT:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}
@anthropo51_twitter
The Jared Wilcurt
@TheJaredWilcurt
you can test this yourself on https://www.sassmeister.com
Jan Kowalski
@anthropo51_twitter
Yep, that's exactly what I meant. Thanks for the answer!
Ingo Bürk
@Airblader
Is there a way to have a nested meta.load-css such that the parent is directly prepended? In other words, some .parent { @include } which produces .parent.child rather than .parent .child.
Ingo Bürk
@Airblader
That is, of course, assuming I cannot modify the included file which declares .child {}.
The Jared Wilcurt
@TheJaredWilcurt
it looks like what you want is selector.append. How you combine that with @import or @use is beyond me though
Ingo Bürk
@Airblader
Yeah, the problem is mostly that I cannot really combine the selectors. It may well be impossible.
The Jared Wilcurt
@TheJaredWilcurt

The intuitive thing would be:

.parent {
    &@import 'file';
}

or

@use 'file' prefixed by '.example';

though neither of those intuitive options are built in to the language

The Jared Wilcurt
@TheJaredWilcurt
Also, where the .parent gets placed isn't always where you'd expect when nesting an import anyway. So prefixing via Sass may not be what you want.
weird.png
Ingo Bürk
@Airblader
I think the placement issue is solved by using meta.load-css instead of import. But that's moot anyway since it doesnt seem to be possible.
Sandman
@009Sandman_twitter
can anyone suggest where I can go to find someone to help me with ongoing css/sass projects?
The Jared Wilcurt
@TheJaredWilcurt
There are CSS subreddits and Discords, if you're looking for help
artart37
@artart37
Hi everyone. Is SASS transpiled into CSS in the server-side?
artart37
@artart37

Hi everyone. Is SASS transpiled into CSS in the server-side?

I understand that yes, it is, but would be great having a confirmation and a bit of more insight into this

The Jared Wilcurt
@TheJaredWilcurt
Sass, not SASS. It is a meta-language, generally, during development, every time you save a .sass or .scss file they are automatically processed to CSS. Then the CSS file(s) will be stored as a static file on the server, not server-side rendered