I have recently started using SASS in my web development. Thus far, I've found it to be a very useful utility, however I have run into a minor usibility issue.
This website I am working on has SASS files in multiple locations, for example in /css as well as in /blog/css.
Currently, to keep sass watching both directories, I need to create two different terminal tabs and run sass --watch css/:css/ on one, and sass --watch blog/css/:blog/css/ on the other.
It would be awesome if I could make a file or something of the following format:
css/:css/
blog/css/:blog/css/
And then just pass this config file to sass and have it watch both locations. Is this possible?
You could use foreman to run multiple processes:
gem install foreman
Create a Procfile in the root directory and add something along these lines:
sass: sass --watch css/:css/
sass: sass --watch blog/css/:blog/css/
To start both use:
foreman start
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.
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.
Brand spanking new to foundation 4,
I've installed all dependancies, compass, sass, and zurb-foundation.
ran compass create testproject -r zurb-foundation --using foundation --syntax sass
... worked fine.
ran sass --watch sass:css in the testproject directory and I keep getting errors like so...
error /Users/figmints/Sites/testssss/sass/app.sass (Line 5: File to import not found or unreadable: normalize.
Load paths:
/Users/system/Sites/testproject
/Users/system/Sites/testproject/sass)
In the config.rb, the first line is require 'zurb-foundation'
Isn't this supposed to make the file normalize.scss visible to the project so that I do not have to copy each file located in my gems folder?
Could anyone direct me towards my mistake, please?
Thanks,
Seth
As far as I know, there's no sass watch. What you need to do is:
Navigate to your project's root folder (which is where your Compass project's config.rb should be) through your terminal
Type compass watch and hit Enter
See the magic happen (if you have nicely configured your config.rb, that is)
A Compass project should be watched by Compass. The watch function is why—IMO—Compass is so nice: it does something Sass naturally doesn't do.
Have you tried compiling using compass watch in your testproject root directory, instead of compiling with Sass? Because you created your project with Compass, so you should use Compass to compile.