Im using Codekit to compile my sass, and Im splitting parts of my website into individual sass files so when it comes to editing I can easily find the file I'm looking for, But I've noticed that when I edit an import I have to go back to the main.sass style sheet and re-save so that it recompiles my changes, my question is, is their a way to automatically compile my main.sass file upon edit of an import ?
Main.sass
#import 'scss_files/_styles.sass'
#import 'scss_files/_service.sass'
#import 'scss_files/_outsource.sass'
#import 'scss_files/_branding.sass'
#import 'scss_files/_wordsearch.sass'
Maybe there is an error. Try to remove the file extensions of your imports (.sass) because in sass there is no need to include the file extension if you are importing a file
Related
Here is my main.scss file with all my imports...
#import "abstracts/functions";
#import "abstracts/mixins";
#import "abstracts/variables";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/bg-video";
#import "components/button";
#import "components/cards";
#import "components/composition";
#import "components/feature-box";
#import "components/form";
#import "components/story";
#import "layout/footer";
#import "layout/grid";
#import "layout/header";
#import "layout/navigation";
#import "pages/home";
I started having this issue after creating the #import "layout/navigation" file in my layout folder. It seems nothing is reloading automatically unless i do a manual save in the main.scss which contains the #imports it only then updates. I downloaded the live sass compiler aswell as the sass extensions on vs code and closed out of the live server and terminal i had everything running on. i then started using those extensions and the integrated terminal in vs code.... I checked to see if node and npm was still installed and if i do node-v and npm-v to check that its installed i get node version v14.15.3 and npm version 6.14.9. i tried to reinstal node-sass using npm install -g node-sass command in the terminal and i get a permission denied error... The site is also now just totally unresponsive, nothing that was clickable can be clicked and nothing is changing on the page if i change it in a file. I have no idea how to fix this please help.
Add the '_' in front of scss files. and check in VS Code.
/scss
main.scss
layout/_header.scss
layout/_footer.scss
It seems to be auto reloading now. i deleted all the package.json, module files and reinstalled node-sass and set up a new live server in the terminal. The only other problem is that none of the animations for the buttons and pictures are working for some reason i had two css stylesheets that appeared to be identical one named style.css and one named main.css both located in the css folder heres my package.json script "scripts": { "compile:sass": "node-sass sass/main.scss css/style.css -w" }, So i deleted the main.css file and the one labeled main.css.map
According to this answer, I should be able to #import a .css file directly (as opposed to an import link).
However, I have the following situation:
If the file is named bootstrap.css
#import "../external_components/bootstrap/css/bootstrap";
Does not work, because sass can't find the file.
#import "../external_components/bootstrap/css/bootstrap.css";
Does work, but now I have the import link and an extra .css file hanging around.
Now, the answer I linked only mentions libsass and node but I would really like to be able to do something like that with ruby sass. Is there a way? Am I not understanding something basic?
My sass -v is 3.4 and apparently up-to-date.
I just started with materialize but now I'm faced with a problem.
When I want to use: #media #{$small-and-up} { media query in my own scss file I get the following error: Error: Undefined variable: "$medium-and-up". While I'm importing the materialize.css file which is compiled from /sass/materialized.scss.
So my question is how can I use the variables / media querys in my own scss file?
I compile the scss by the file watcher plug-in in PHPStorm or by sass compiler installed in command prompt windows.
I hope someone can help me.
SASS variables don't exist in compiled CSS files. If you want to use variables defined in materialized.scss in your own SCSS stylesheet, you need to insert #import "sass/materialized.scss" in your stylesheet.
Incidentally, if you do this, you probably won't need to compile materialized.scss any more. Just compile your SCSS stylesheet, which, because of the #import statement, will pull in materialized.scss.
UPDATE:
After reviewing code at https://github.com/SuperDJ/dsuper/blob/master/private/admin/css/sass/opening.scss, it seems the problem is with this line:
#import url(/private/admin/css/material/sass/materialize.scss);
This is not valid syntax in SCSS. It should be:
#import "../material/sass/materialize";
I just started with compass with scout for the GUI.
I'm trying to follow along with a demo and am a bit confused about #import. When I do
#import "compass" everything compiles fine. However when I try to import #import "scss/normalize" which is in compass/scss/_normalize.scss i get
Change detected at 14:59:07 to: screen.scss
error screen.scss (Line 2: Invalid CSS after "#import "compass"": expected selector or at-rule, was "#import "scss/n...")
overwrite screen.css
What exactly is #import "compass" doing? what file is that importing? Or is a folder from where I installed scout in program files?
figured it out. you need a ; after each import statement. duh.
I am using Compass to compile .scss files to .css files. I have a file called app.scss which I want to compile to foundation.css.
The problem is that I can't simply rename app.scss to foundation.scss because I end up with a circular import error (app.scss includes the following line: #import "foundation";).
Is there a way for Compass to rename app.scss to foundation.css during the compiling.
Thanks.
The easiest would be to change app.scss to _app.scss, and then have a foundation.scss that does nothing but import the _app.scss.