I have two SCSS files that I want to make two css from each SCSS
I have this right now for one SCSS file:
"watch:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.css -w",
"compile:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.comp.css",
How can add one more to this?
May i know which editor are you using??????
If you are using something like VSCode then there is an extension named LiveSASS compiler which watches and then automatically compiles your SASS files to css files.
Related
I'm looking to setup a scenario where a sass file outputs css and that css file outputs back to the sass file. So, if I were to code in the css file it would update the sass file, and if I were to code in the sass file it would update the css file.
Basically, something like --watch input.sass output.css and --watch output.css input.sass combined.
How would I go about doing this?
In my package.json I have the following script:
"watch:sass": "node-sass -w sass/main.scss style/style.css "
It waits for changes in main.scss file and then changes style.css respectively. My main.scss file is basically a collection, which imports a bunch of other scss files.
#import "abstracts/variables"; //abstracts/_variables.scss
#import "abstracts/mixins"; // abstracts/_mixins.scss
#import "base/base"; //base/_base.scss
#import "base/typography"; //base/_typography.scss
The problem is that when I'm in other scss file, for example I edit _base.scss, when I change it and save - my style.css doesn't update itself automatically. Only when I go back to main.scss and save it, only then style.css gets refreshed.
How can I make changes in any of my sass files so that style.css will be updated too?
You can do it by using a Wildcard *:
"watch:sass": "node-sass -w sass/*.scss style/style.css"
But make sure all your SCSS files are inside sass folder.
Try this code
"scss": "node-sass --watch sass/main.scss:css/style.css"
this worked for me.
This is my first time working with Scss, although I have run the command in terminal to convert a simple input.sass to output.css in the case of other libraries, it seems a little bit difficult, since it's new to me.
I have a profile with index.html which should require a style.css, but I need this style.css to be generated from Bulma directory which is currently in this format:
index.html
vendors
bulma
css
bulma.css
bulma.css.map
sass
base
_all.sass
generic.sass
helpers.sass
minireset.sass
components
elements
grid
layout
utitlities
bulma.sass
The problem here is that, unlike the sass input.scss output.css example which converts Scss files to CSS, the above seems complicated.
I don't know which file to convert, or if I should alter the Sass file and modify them but do I save the output in individual CSS file or one master style...
in every sass directory such as base, components and so on, they all have _all.sass file. which include all of the files in that directory. So, all you need is to include one _all.sass file from every folder within sass folder.
So in your sass file, that you will watch with sass gem, make includes for all fo the _all.sass.
Something like this would work.
#import "utilities/_all"
#import "base/_all"
#import "elements/_all"
#import "components/_all"
#import "grid/_all"
#import "ayout/_all"
Also, I am not 100% sure, but I think it is a bad idea to mix sass with scss, so my advice would be to do something like this:
In your sass folder of your project create a sass file and name it styles.sass. In that file write imports to all the _all.sass files.
And then just go do this in the terminal: sass --watch sass:css
This question already has an answer here:
How to prevent SASS from merging files included via #import?
(1 answer)
Closed 7 years ago.
I have following directory structure
sass
modules
_header.scss
_footer.scss
styles.scss
css
styles.css
Whereas my styles.scss file has following code
#import "modules/header";
#import "modules/footer";
Now when I execute compass compile command, all of my styles in header and footer and merged into styles.css. What I want is that all scss files should compile separately and should be imported in styles.css file. How can I achieve this?
.sass/.scss files that start with an underscore don't get compiled unless they're imported; if you want those to compile separately, rename them to "header.scss" and "footer.scss".
Although I know CSS file is a valid SCSS
but there is some reason ，so I can't change some files subfix to SCSS
global_min.scss
#import url("global/reset.css")
#import url("global/frameset.css");
#import url("global/header.css");
....
....
Can sass or compass merge it (´･_･`)
You can try the Sass CSS importer plugin, by Chris Eppstein himself :)
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
#import takes a filename to import. By default, it looks for a Sass
file to import directly, but there are a few circumstances under which
it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
If none of the above conditions are met and the extension is .scss or
.sass, then the named Sass or SCSS file will be imported.
You can't do that with SASS without renaming the CSS files.
I suggest that you use some kind of CSS compressor to concatenate and minify your CSS code. Please have a look at Yeoman, currently the most solid approach to handling this kind of tasks.
If you want to merge all css files into a single compiled css file, you need to change their extension to sass or scss and make the changes to be compatible with that format.