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?
Related
I'm using VSC with Live Sass Compiler from Glenn Marks.
I'm trying to import code from scss file where are written #media for my project. All seems to work almost perfect, but this #media code is injected at the very top of my main.css file, and I would love it to be at the very end. Is there any option to do this with #use and #forward?
EDIT: File structure.
I have one folder "scss/utilities" with 5 scss files + one file "_index.scss" with only forwards inside. main.scss is outside, in folder "scss"
Main scss file is called "main.scss", at the top I call this folder by "#use 'utilities' as *;"
As I said, code is pulled to the css file, but the only problem is that #media from files "01_small_", "02_medium", "03_large" are injected at the beginning of the css code.
FILE STRUCTURE SCREENSHOT
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.
So, I have a css.json with couple of css snippets and sass.json with some sass snippets. Is there any way to use both css and sass snippets when I'm working on with sass files? Maybe use some kind of import, or set filetype of the file something like .css.sass (like in vim)?
at right bottom click on sass and then select configure file association for scss and then select css,
-
then you can use css snippets in your sass file
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
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.