Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 15 20:45
    tanapaydin commented #3103
  • May 14 21:11
    saper commented #3103
  • May 14 13:48
    duc-talentwunder commented #3103
  • May 13 20:56
    saper commented #3027
  • May 13 02:01
    nschonni closed #3050
  • May 13 02:00
    nschonni closed #3107
  • May 13 02:00
    nschonni commented #3107
  • May 13 01:30
    adamcooper1386 opened #3107
  • May 12 23:47
    maxburke commented #3106
  • May 12 23:45
    xzyfer commented #3106
  • May 12 23:44
    xzyfer reopened #3106
  • May 12 23:41
    maxburke commented #3106
  • May 12 23:38
    xzyfer commented #3106
  • May 12 23:33
    maxburke commented #3106
  • May 12 23:20
    xzyfer commented #3106
  • May 12 23:16
    xzyfer commented #3105
  • May 12 23:03
    maxburke commented #3106
  • May 12 23:02
    camiblanch commented #3103
  • May 12 23:02
    xzyfer commented #3106
  • May 12 23:01
    camiblanch commented #3103
iniatse
@iniatse

Why does sass not optimize duplicate dependencies? Essentially less and sass dont do that, like here: webpack-contrib/less-loader#7

It makes no sense at all to have a scss file imported two times. Every compiler does optimize things, why not sass?<

If you work modular, then the code from the example is perfectly fine.

I read that is is a design decision, but isn't it lets say a not very beneficial one?
There is no advantage, only disadvantages if you have the same scss imported two times
therefore the compiler should optimize it
You'd never ever want that what sass and less is doing here even tough it is by design...
lets give another example:
iniatse
@iniatse

_slider.scss

.slider {
  margin:10px;
}

_fooSlider.scss

@import "./_slider.scss";

_barSlider.scss

@import "./_slider.scss";

stlyes.scss

@import "./_fooSlider.scss";
@import "./_barSlider.scss";
you would end up with 2 times the .slider css
It really makes no sense for the compiler to not optimize that
I guess it is because of possible variable imports?
iniatse
@iniatse
But it still could optimize and still take the variables into account
The Jared Wilcurt
@TheJaredWilcurt
@iniatse This is a side effect of the simplicity of the @import syntax. There is a new @use syntax (not in node-sass) that addresses this. http://sass.logdown.com/posts/7858341-the-module-system-is-launched
Instead of npm install node-sass you do npm install sass. The API is the same, but instead of using a C (SassC) LibSass Node Binding to execute the processing, it uses a Dart-Sass produced native JS file for the processing.
The Jared Wilcurt
@TheJaredWilcurt
Or if you don't want to upgrade tooling right now, as long as you are using GZip or Brotli on your server, any redundency you have will be compressed out of the file transfer. Though they would still be loaded in memory, and depending on project structure it is possible for this to effect the cascade (but removing the duplicates would also effect the cascade)
iniatse
@iniatse
@TheJaredWilcurt I think I will use postcss and the plugin postcss-discard-duplicates. Switching to the sass instead of node-sass is no option simply because it is damn slow
So I create a css file and then input that into postcss with that plugin active
Hopefully that works
The hello world of that works. I have to try more complicated scenarios
The Jared Wilcurt
@TheJaredWilcurt
you may just want to evaluate how your project is set up if you are having this issue also. It may be better to simplify the project so that you have a single file that imports the rest of the files in the proper order. Ultimately the files will all be concatenated into one anyway, and the order of code in CSS matters a great deal. So organizaing your project this way can really simplify things. I personally am a big fan of the ITCSS approach for organizing. You can see an example at the bottom of this page: https://GraphMyCSS.com
iniatse
@iniatse
Yes but you want to work in an understandable manner and just plugging things together isn't sustainable in a big application
Lets say you have 2 dozens of dependencies and they have dependencies which require some scss. You just plug the scss together in you main file? Where do you doc all that stuff? There is no consensus at all on how do do that. Modularity clearly solves that, because a component only depends on itself an not on something to add to the main scss file. Everybody can comprehend that _FooSlider.js just depends on _FooSlider.scss.
Simplicity is key
Plugging everything together in a main.scss file works, but it is an horrible approach IMO. In teams it's is important that you have a clear path and everybody knows how it works.
Modularity and self encapsulation is proven to work
iniatse
@iniatse
These are basically the two approaches that you can take. Put _Slider.scss in you main file and make _FooSlider.scss and _BarSlider.scss etc all work and to that for all kinds of dependencies. Or include _FooSlider.scss and _BarSlider.scss into you main scss file, but then you need to remove duplicates
It dosen't matter how you organize and name your whole scss, these are the two approches.
I mean yes you can also use inheritance from scss I don't like that at all especially how it works in sass/scss
iniatse
@iniatse
Do you think node-sass will ad @use anytime soon?
iniatse
@iniatse
I mean @use simply works. So sass is essentially a superset of node-sass atm or is there anything in node-sass which is not in sass?
The Jared Wilcurt
@TheJaredWilcurt
Node-Sass is being deprecated. It takes a lot of work to port the Dart Code to C and do all of the hundreds of LibSass Node Bindings based on it. But mainly it's just a lot of effort to port to C. Theoretically it was so that ANY programming language could have fast bindings. And there were Java, Ruby, .NET, etc. ones made........ buuuuuuut nobody used them. Literally only the Node-Sass binding was used by anyone. So it was a massive amount of work just to get Sass to run with Node. and since Dart-Sass can just auto-output a native JS file now that is completely up-to-date with the latest Dart code, it just doesn't make sense to keep maintaining the old pipeline.
So I would be VERY surprised if Node-Sass ever gets another update
Personally, I would be all for a crowd funding campaign to at least get a SassC > LibSass > Node-Sass release with @use. But I think people like use (that notice the Sass.js slowness) are a minority
The Jared Wilcurt
@TheJaredWilcurt
However if you can reproduce specific things that are causing sass to be slow, they are very eager to fix performance issues in it, as that is really the only complaint anyone has about it
iniatse
@iniatse
ok, thank for the information, that was pretty insightful
is there something like node-sass-tilde-importer for sass?
I really liked that one and I'd miss it if I switch to sass instead of node-sass
The Jared Wilcurt
@TheJaredWilcurt
no idea what that is, but the API's are the same, so it may just work
iniatse
@iniatse
you can reference the node_modules folder via ~ from anywhere with it
In less for example it is also possible to use ~ to reference the node_modules folder from anywhere
Instead of ../../../../../node_modules
The Jared Wilcurt
@TheJaredWilcurt
I'm not sure, there are no issues on its repo related to it, and it hasn't been updated in a few years. So either it works fine so no need to make an issue, or people that use it haven't switched from node-sass to sass yet to run into the issue and report it, or they have but rather than report it they switched to a similar library that is already compatible
iniatse
@iniatse
Maybe I can use the includePaths options
iniatse
@iniatse
Is there any community for sass like this one here? fitter or irc or?
The Jared Wilcurt
@TheJaredWilcurt
iniatse
@iniatse
thank you
Henri Toivar
@henritoivar
Hi Guys,
I wanted to share something me and my buddies created using sass and node-sass. It's an open-source, serverless, free, no-signup invoice management solution.
You can check it on ProductHunt: https://www.producthunt.com/posts/serverless-invoices and Github: https://github.com/mokuappio/serverless-invoices
Hopefully some of you can use it as a starter kit.
I would love to hear your feedback!
Thanks
Henri Toivar
@henritoivar
Thanks to everyone who checked it out! Serverless Invoices got #3 Product Of the Day :)
Jin Su Park
@jinsupark
Hi All!
Muzik Major Note
@muzik_note_twitter

Hey Sass developers. Why not stick to programmimg instead of sticking your asshats in politics and putting BLM support on your website.

What about all the other programmers who do not support this movement and want to keep programming out of politics.

Think before you support.
I am sure that at least 50% of programmers do not support this communist organization that passes itself off as caring.
If you want to support BLM do it on your own time without speaking for the whole community.
This is all I have to say about it. I hope I can get some satisfaction and see the "WE SUPPORT BLM" taken down from the site.
It just goes to show the ignorance that you have for other peoples feelings who do not support this movement.

AND YES, I am extremely offended that you mix development with virtue signalling, which does nobody any good except offending half you base