Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does a save to a scss file automatically update the css file?

Tags:

css

sass

webstorm

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.

like image 777
Randomishlying Avatar asked Jan 27 '14 04:01

Randomishlying


People also ask

Which command automatically compiles SCSS to CSS anytime changes are saved?

ctrl-shift-c : Compile SASS file to a CSS file.

How does CSS work with SCSS?

Sass works by writing your styles in . scss (or . sass) files, which will then get compiled into a regular CSS file. The newly compiled CSS file is what gets loaded to your browser to style your web application.

Does SCSS replace CSS?

SCSS is a superset of CSS. Most developers find it more convenient to use it over CSS due to its advanced features and clearer syntax. In this article, I want to explore the SCSS features and improvements in CSS over the years.

Is SCSS compiled to CSS?

scss. The example below shows how Page. scss is compiled into CSS when you save your project manually or automatically and how the changes to _grid. scss are reflected in the generated CSS file.


1 Answers

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:

  1. Navigate to the folder in which your .scss file/s are kept.

  2. 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

like image 115
monners Avatar answered Oct 24 '22 05:10

monners