Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 04:25
    ntkme opened #122
  • 03:36
    ntkme synchronize #118
  • 03:28
    ntkme synchronize #1829
  • 02:50

    nex3 on main

    Reformat pubspec.yaml (#121) (compare)

  • 02:50
    nex3 closed #121
  • 02:42
    nex3 synchronize #98
  • 02:42

    nex3 on error-types

    Add back merge error changelog … (compare)

  • 01:51

    nex3 on feature.color-4

    (compare)

  • 01:18
    nex3 closed #97
  • 01:18
    nex3 synchronize #98
  • 01:18

    nex3 on error-types

    Release 1.0.0 (#91) Fix release tagging (#92) Fix release tagging (#93) and 3 more (compare)

  • 01:16
    nex3 review_requested #98
  • 01:16
    nex3 opened #98
  • 01:16

    nex3 on error-types

    Treat certain user-caused error… (compare)

  • Nov 29 21:07
    K4rakara ready_for_review #3442
  • Nov 29 21:06
    K4rakara synchronize #3442
  • Nov 29 01:10
    ntkme edited #121
  • Nov 29 01:09
    ntkme synchronize #49
  • Nov 29 01:08
    ntkme synchronize #49
  • Nov 29 01:02
    ntkme synchronize #49
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
however, you can do server-side processing, or client-side, but that is very rare
@artart37
You can use a sass processor tool during development. If you are not very technical, https://Scout-App.io is the easiest (download, unzip, double-click to run, then drag your project in and click one button)
If you are more experienced with frontend and use npm and build tools like Vite, Webpack, Gulp, etc there are plugins for those tools to process Sass
or you can npm install --save-dev sass and follow the documentation to do it by hand
Some text editors/IDE's even have Sass processing built in or available as a plugin
artart37
@artart37
Hi @TheJaredWilcurt . Thank you for your insight in to this matter. I am trying to understand how it works under the hood. Another question what this line from Sass's website means: "Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows". Does this mean that Dart Sass is compiled to pure JavaScript which can be used as a dev dependency package and in turn transpile the input sass or scss file to css?
1 reply
P.S. Sorry for the late response.
The Jared Wilcurt
@TheJaredWilcurt
Sass was created in 2006 by Hampton Catlin. He wrote it in Ruby. Over time new people... ya know what,I have slides for this. https://docs.google.com/presentation/d/1Zg9987Po-9Ds_WGuHwuF9OeeMedhEISAtDhwWcIhiBg/edit#slide=id.g3b52de659a_1_46
The Jared Wilcurt
@TheJaredWilcurt
dart-sass is an a Sass interpreter written in Dart. If you write code in dart, you can pull it in as a library. However most people use Node as part of their frontend development. most do an npm install sass to use the JS version of dart-sass.
artart37
@artart37
Thank you, @TheJaredWilcurt . I am now reading "JUMP START SASS" by HUGO GIRAUDEL & MIRIAM SUZANNE, but will have a look at your slides as well.
The Jared Wilcurt
@TheJaredWilcurt
Miriam is cool
I was just referring to the slides in that deck related to the history of Sass. not the whole slide deck
13-22
artart37
@artart37
Thank you, @TheJaredWilcurt , already sent the request.
The Jared Wilcurt
@TheJaredWilcurt
what request
artart37
@artart37
Screenshot_1.png
It says that I do not have access to the file.
sorry, thought I sent the public link before. that should work
artart37
@artart37
Thank you, much appreciated. Will indeed examine: )
The Jared Wilcurt
@TheJaredWilcurt
nope, sent the wrong link again
artart37
@artart37
Last question. So as far as I am working on a JavaScript project and install Sass from npm, I don't need to be concerned with Dart Sass, right?
okay... NOW it should work