SASS SystemStack Error: stack level too deep - wordpress

I've been stuck with this error since yesterday. Whenever I use --watch or when manually compiling my scss. I'm currently using it for the custom theme development of a WordPress site. Tried uninstalling/reinstalling SASS but it's not helping. Here's what it returned to me when I used --trace as recommended:
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/exec/base.rb:28: stack level too deep (SystemStackError)
My suspicion is that I nest the elements too much. Is there a limit when nesting on SASS? Do you have any other fixes that I can try? I'll really appreciate it. I don't really wanna go back to manually writing my CSS for this project.

Related

SCSS Syntax Error When Using Include-media

I am using include-media in a project and getting the syntax error
[scss] ) expected
when viewing this mixin in my vscode editor. I have had a look at this question, but it is not about the same syntax I am experiencing.
Here is a screenshot of the section with a problem in this file
I have not made not made any changes to this mixin, I simply downloaded and included it in the project it as outlined here
Questions:
What is causing this error?
How come I am still able to use this mixin even though it has an error?
How can I solve this?
1. What is causing this error?
This issue is occuring because vscode editor does not support css preprocessors completely.
2. How come I am still able to use this mixin even though it has an error?
You will get your output as the include-media scss is completely fine.
3. How can I solve this?
You need to add vscode service for css which will help to detect css pre-processors syntax and your error will be resolved. Include this vscode script in your vscode editor. As mention here.
https://github.com/Microsoft/vscode-css-languageservice
Thanks

How to use SCSS with existing site

I have a question about SCSS. I am new at this, so if I'm not providing enough information please let me know so that I can update my question.
I am currently working on a Wordpress installation that has an SCSS directory, with all of the various .scss files.
I tried editing the files directly, and came across a lot of issues. I did some research, and it looks like the scss needs to be compiled into css so that the site can read it. Issue is, no matter how I try, it just simply doesn't work. The site styles break, and the updated code won't work. I know I can change the css directly, but I understand that if the scss is recompiled it will remove my direct css changes.
Any help would be so appreciated.
If you don't have any way to compile the SASS to CSS then an easy way to translate your code is by using sassmeister.

ExtJS 6 - Missing CSS Statements after compilation

Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!

edit sass-rails config options

I am getting really confused about configuring Sass config options. Basically I want to disable the line comments in the compiled css file. So I went in and created a sass.rb in the Initializers folder with the following line:
Rails.application.config.sass.line_comments = true
I then restart my apache server and check in Safari web developer, my css file still contains the comments like /* line## /path/to/css/file */ above every css statement. I then test it in Firefox and open Firebug, and I don't see those line comments there, which suggest inconsistent browser behavior.
So I go back to my initializer sass.rb file and turn on line_comments, restart the web server and try again, this time I get the exact same result as before, nothing's changed, that basically tells me either that's specific to the browsers, there's a problem with the setting scope/syntax, or there's a caching issue (I'm working in development, so there shouldn't be any caching, right?). I'd really appreciate if someone can provide some insight on this. Thanks.
EDIT: The proposed solution to make a change to the sass file(s) didn't solve anything so I doubt it is the same problem.
Note: I am using sass with rails and I am getting separate css files for each of my sass files, which doesn't seem very right...
The problem was a combination of needing to set config.assets.debug to false for development, setting config.assets.compress to true, and probably a better understanding of sass compilation.

Why does Meteor only load one CSS file after deployment?

I have half a dozen CSS files inside the folder "client/CSS". In the local server it works fine but after deployment the website only seem to load the bootstrap.min.css file. Has anyone come across this? Thanks!
Meteor tries to compile all the css files it finds into one file. If you have css missing, meteor is probably failing on one of your files and giving up. When this has happened to me the issues were around unmatched brackets.
Try putting your css text into CSSLint or something like it, one at a time, and see if they have errors.
Some other discussion here that says #media and #imports lines might also be cause some issues depending on their use.

Resources