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
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I keep trying to run sass --watch scss:css on a directory and unfortunately, the scss files are not compiling.
SASS does confirm that it's watching for changes, but I've noticed that it is looking in my Program Files directory.
My project with the actual SCSS and CSS files is in my C/username/documents/project/assets directory. If I try to enter that path explicitly in the sass --watch command, I get an error message.
How can I specify the correct directory so SASS will stop trying to compile my files in Program Files?
First make sure your sass is working well and you can try below option for compiling into different folder.
sass --watch input-dir:output-dir
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.
So I have been using SCSS and Compass on all my projects. Super happy with it. However, just now I got an existing site built by a different team that needs to be updated and uses LESS. (The project also uses .ftl files which is also new to me)
Less syntax seems pretty similar and straight forward so I don't have an issue updating .less files, however how do I get it to "compile" to css so I can see my updates on the browser?
[You] can invoke the compiler from the command-line, as such:
$ lessc styles.less
This will output the compiled CSS to stdout. To save the CSS result to a file of your choice use:
$ lessc styles.less styles.css
To output minified CSS you can use the clean-css plugin. When the plugin is installed, a minified CSS output is specified with --clean-css option:
$ lessc --clean-css styles.less styles.min.css
source: http://lesscss.org/#using-less-command-line-usage
This is assuming that you have less installed through node. Additionally, the previous developer could have been using a gulp file to compile it, so you will want to look at that as a possibility.
If you just want to quickly convert it without installing any tools: http://less2css.org/
Personally I use http://koala-app.com/ for less, sass, compass and coffeescript. I especially like the auto compile option, just working on less files and the css file will be updated in the same folder at the same time.
I have a pretty basic SASS setup running, which includes the following folder structure:
css
style.css
-modules
_all.scss
_globals.scss
partials
_base.scss
_normalize.scss
_styles.scss
vendor
-empty
I am telling SASS to watch the following sass --watch modules/_all.scss:style.css --style compact.
The issue is, that one one machine a change to ANY file included in _all.scss is recorded and output properly. On another machine, completely up to date, a change to a partial file thats included in _all.scss does not record a change, and therefore no styles are output. I have to reset SASS to watch the partial _all.scss once more for the change to be recorded.
Has anyone experienced these inconsistencies before? I'm not looking to watch an entire directory as I wish to have only a single stylesheet output...
Both builds have the same version of sass, ruby and command line tools running.
It seems like the sass-cache is not being busted when you make the change. You can try disabling the cache on the broken machine to see if the problem resolves. If it does, check manually delete the cache directory and try again.
Side note, you shouldn't have to use the watch command with rails (unless you're doing something unique). Sprockets is supposed to have plugins which do this automatically when serving assets.
In fact, I suspect that this may even be a conflict between sprocket's SASS engine configuration and the sass watcher binary configuration.
See the default cache configuration for the sass binary here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#cache_location-option