I had to rewrite this every time I want to see a live preview.
sass stylesheet.scss stylesheet.css
I use sass --watch stylesheet.scss:stylesheet.css. When saving your .scss file, it'll automatically update the .css file.
You might also consider sass --watch stylesheet.scss:stylesheet.css --style expanded --sourcemap=none to keep the .css file readable.
I'd recommend the Sass Workflow class on Udemy.
Try out Grunt or Gulp with Sass: A great tutorial: https://www.taniarascia.com/getting-started-with-grunt-and-sass/
You need something to compile it automatically. As an example, there are solutions that use node.js to automatically compile for you on your computer. One tool is Foundation for Websites by Zurb.
You can install the application which will automatically compile sass for you.
For more information, check out: http://foundation.zurb.com/sites/download.html/
you can use this code
sass --watch file.sass:file.css
or
sass --watch foldersass:foldercss
Sass can be compiled automatically using below command:
sass --watch SASS_SOURCE_PATH:CSS_BUILD_PATH --style=expanded --no-source-map
Where:
SASS_SOURCE_PATH: Path of sass file
CSS_BUILD_PATH: Path of build CSS file. Where do you want to save CSS file
--no-source-map: will not output a map file, which is not readable.
--style=expanded: will expand CSS to human readable.
Related
Is it possible to use webpack to compile a directory of scss files to a directory of css files?
I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build
e.g.
- src
- themes
- theme-dark.scss
- theme-light.scss
to
- dist
- themes
- theme-light.css
- theme-dark.css
Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.
Is that what I want even possible with webpack or do I need another tool?
You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.
sass --watch src/themes:dist/themes
watch will compile on a file change (optional)
Is there a way to force sass to overwrite css files already generated. I already know compass does this but I really don't want to install compass for this simple setup.
What I'm trying to do is minify all my files in one go.
I was using this before. But with the watch command I would have to go into all 40 sass files and make a change in each one for it to update and compress. I'm hoping there is a command to update all or overwrite all. Can't find it in the sass docs.
sass --watch sass:../web-app/css --style compressed
You simply want to use 'update' with 'force'
sass --update --force path/to/sass:path/to/css
I just started using SASS in my project and I want a script to compile them and convert them to CSS files. Im planning to run this script only when I build.
I installed SASS in my system and SASS --watch doesn't seem to be the right approach here; as I told, I want a script that runs only when I build. I used to have one such script for LESS compiling, but couldn't find any for SASS.
Does anyone know of any such scripts?
Looking at the documentation, just run sass from the command line as part of your build script. An example for a one time use on a single file:
sass input.scss output.css
link:
From the command line, you can just do sass --update for a one-time compile from Sass to CSS. This will use whatever settings already exist in config.rb.
I just started working with scss a few days ago (with Webstorm), and it seem to auto generate/update the css file after saving the scss file. Unfortunately, when I save the scss file now, no changes are made to the css file. I was working on these files from a different location, so I am guessing that the Webstorm settings might be different. I thought file watchers might have something to do with it, but I am not sure what goes in the program field. I really have no idea why this is happening.
No, saving a .SCSS file does not automatically compile the final stylesheet file. What you need to do is set up a watch. There are a number of ways to do this (and a number of programs that'll do it for you).
The most straight forward is through the command line. Assuming you have the SASS gem installed (and you're in a ruby environment), do the following in the command line:
Navigate to the folder in which your .scss file/s are kept.
Run the following command: sass --watch style.scss:style.css
Note: The above assumes that both your .scss and .css files are named style, adjust accordingly if they are not. Also, if your .css and .scss files are in different directories you'll have to adjust the paths accordingly.
Remember, sass --watch then yourScssFile.scss : yourCssFile.css
Alternatively you can use an app, like LiveReload to watch the files for you. this'll take a bit of configuration, but it may be a little easier for you if you're only just getting started in the wornderful world of SCSS/SASS
Yopu can use File Watchers in WebStorm to auto-update the CSS file on changing SCSS; but this would also require installing the external SCSS compiler (SASS gem). Please refer to http://www.jetbrains.com/webstorm/webhelp/transpiling-sass-less-and-scss-to-css.html#d104715e458 for more information
I have scss and css files in ASP.NET project.
If I change scss, should be css be regenerated? If yes, then how? VS can do this or should I have some other tool?
There are extensions that allow you to regenerate from inside Visual Studio, but I personally prefer the command line way.
sass --watch [folder holding .scss files]:[folder holding .css files]
If you use Compass, you can use this command instead:
compass watch
Both of these commands will tell Sass to watch the folder with the .scss files, and any time they're changed and saved, regenerate the CSS files.
If you created the project, then you likely already have Sass (and, by extension, Ruby) installed. If you don't, you'll need to install Ruby and Sass. Windows has a nice little installer that installs both Ruby and RubyGems. Once it's installed, you'll need to run the following to install Sass:
gem install sass
Once Sass is installed, you can either run the sass --watch command, or use a VS extension of your choice to watch and recompile the CSS files.