Does SASS render to an actual css file of my choosing or a newly generated style sheet?
in the case of an app with many style sheets , the most sensible thing is replace some css at a time and render to a style sheet that loads last -that would override all other style sheets until the updating is done and I would remove css.
The typical Sass workflow is to compile to a main style.css file from a style.scss file where you specify which files it should compile. You can set it to compile to a different file. If you're using the command line you can tell it what to watch and where to output a la
sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Most GUIs that handle Sass have simple settings that allow you to do the same for individual files.
It renders into an actual CSS file. All of the SASS is eventually compiled into vanilla CSS
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.
I have a huge site with a lot of sass partials getting processed in one single css file. We are also using sourcemap for debugging the styles.
Is it possible in the browser to get a list of the used sass partials files for a given html page ?
thanks!
I'm using gulp-ruby-sass to compile my css and generate source maps for a site built on Jekyll. The source maps are being generated. When I inspect a style, a Sass partial is identified as the source of that style. But when I click on the filename, I'm taken to an empty window. I need my entire scss directory copied into the _site directory when the site is generated. But Jekyll ignores all files prefixed with an underscore, so all Sass partials are automatically excluded. I've tried adding, scss, scss/_sass_partial.scss, and scss/**/*.scss to the include property of Jekyll's _config.yml. This property is supposed to force inclusion of files that would otherwise be automatically excluded such as .htaccess. But this does not work for my Sass partials. Jekyll includes the partials only if the underscore is removed. Does anyone know a way of dealing with this?
This will work :
include:
- _sass_partial.scss
But you can also add a gulp task :
gulp.task('copy_sass', function(){
gulp.src('./sass/*.scss')
.pipe(gulp.dest('./_site/sass'))
});
According to this website. It said that sass will generate css file which is css3
so,here is my concern,what if the browser is not compatible with css3 file.
can I generate css2 file?
SASS is simply an alternative syntax for writing CSS which is then compiled into the standard CSS syntax. This means that your output CSS file will only contain CSS3 properties if you decide to use those properties in your SASS file.