sass/sass

A room for discussing Sass and all its implementations.

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';
}

@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.

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

CSS Discord - https://discord.gg/8JSn92uj

https://old.reddit.com/r/csshelp

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

It says that I do not have access to the file.

The Jared Wilcurt

@TheJaredWilcurt

https://docs.google.com/presentation/d/1G_d5Eu3fIUZTvk3VHlXSURFplUHfVDlIuPk9HO5hfIM/edit?usp=sharing

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?

The Jared Wilcurt

@TheJaredWilcurt

https://docs.google.com/presentation/d/1Zg9987Po-9Ds_WGuHwuF9OeeMedhEISAtDhwWcIhiBg/edit?usp=sharing

okay... NOW it should work

artart37

@artart37

It does, 27 slides

Thank you!

The Jared Wilcurt

@TheJaredWilcurt

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.

artart37

@artart37

Fantastic! Thank you so very much, @TheJaredWilcurt , for clarifying & answering my questions ! Awesome!

The Jared Wilcurt

@TheJaredWilcurt

27 has the "History" slides. 30 is the newer sliders. I removed the history part because most people weren't interested in it during my talks and it slowed the pacing

artart37

@artart37

Noticed that : Will try to absorb all the info and share: )

The Jared Wilcurt

@TheJaredWilcurt

:thumbsup:

artart37

@artart37

Thank you, again. I have been using Sass for a while but at existing projects - never took the time to understand it:D. Now trying to understand it in its core to be able to set up styling for one of my projects in a good way.

Where communities thrive

People

Repo info

Activity