I am using Foundation 6 with SASS and have a question.
I would like to make a copy of the _panels.scss file and make some changes, but also keep the formatting of the standard _panels.scss.
I made a direct copy, titled it _panels-foo.scss and added the #import in the foundation.scss file.
I see that my bundle watcher created the new entry in the CSS file, but any changes to the _panels-foo.scss file don't get updated. Only changes to the _panels.scss modify the CSS
What did I do incorrectly?
Related
I use live sass compiler extension. so uptade css file when save scss file but every time I should resave main scss to apply changes. How can I apply changes after saving imported scss files at once.
one more question. is there any solution for automatically start "watch-sass" when opening workspace.
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
When I use an #import statement that imports from a node modules folder, the import works perfectly.
#import "../../node_modules/bulma-scss/scss/utilities/functions";
However once a user goes to edit the theme via the backoffice theme editor and saves the changes, there is an error basically saying that that node_modules folder does not exist.
Expected Result
Editing a .scss file via the backoffice editor and 'save and apply' would successfully update the corresponding .css file used in the theme
Actual Result - https://www.screencast.com/t/RluUCmMq7Iqa
A string of 'file doesn't exist' errors occurs as the "#import" statements reference files used in the node modules folder
Video of issue explained: 1min 40s https://www.screencast.com/t/D4CvGQkk0cl
node_modules are available in the theme, but are not available when editing in the browser. The reason for this is that during "bundling", the contents of node_modules is converted into a different format and placed inside the /parsed directory.
When editing a theme in the control panel of a store, the contents of the /parsed directory/node_modules is not available to edit and not otherwise accessible.
I would recommend including the file through a non-package manage method in order to address this.
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.
I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.