I have installed SASS on Ubuntu as explained in the instructions, which means that I downloaded the source dart-sass-1.22.2-linux-x64.tar.gz, extracted it and added a path variable into my .bashrc.
Calling
sass input.scss output.css
will create the css file from scss source as explained in the guide.
However, when entering
sass --watch input.scss output.css
nothing happens. The file output.css is not updated when input.scss is saved. There is also no message like
Sass is watching for changes. Press Ctrl-C to stop.
as I have seen in various other posts. This is how my terminal looks:
Any ideas why sass is not watching?
I have the same issue like you and this config work. I create 2 folder scss and css like
this
Then I create 1 scss file inside scss folder then I run
sass --watch scss:css
Then result
I think you forgot the : my example is this: sass --watch assets/css/main.scss:assets/css/main.css
Related
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'm new to SASS and as such ran sass --watch dir on my /scss directory.
Then I discovered Compass and ran compass watch on the same directory.
Now when I edit style.scss, the compass watch updates the /css/style.css file as expected, and the sass watch creates a new style.css alongside the style.scss file (which is unwanted).
I managed to cancel the compass watch with Ctrl+C. However even after a full system restart the sass watch still seems to be active. I.E. it's still creating style.css in the /scss directory.
How can I stop it?
I've solved the problem.
Its turns out I had the Sublime Text SASS Build Package installed which was running all along.
I've uninstalled that and now everything is as it should be.
Doh!
Oh ! You don't have to use Sass and compass at the same time dude.
Compass is a SASS extension, so you can use it alone.
Personally i advice you to learn SASS first so forget Compass for few months.
For the directory problem it's simple. Open your terminal go into the folder youre working.
Image you have a folder named site1 with a sass and a css subfolder. Go into your the site1 folder and run :
sass --watch sass/style.scss:css/style.css
And normaly it should work :)
How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass
file:
sass --watch style.scss:style.css
But how to watch changes in whole directory/folder containing many sass files.
Simply use the command sass --watch <input folder>:<output folder>, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Expanding the answer by piouPiouM a little:
Output files will be created with the same names as input files except ending with .css.
<input folder> and <output folder> can be the same.
Both folders can be the present working directory, so the following is valid:
$ sass --watch .:.
Go to you terminal and get to you folder then wrote:
sass --watch .
this will watch all sass files and convert to css files with the same name.
also you can do it in this way:
sass --watch ~/user/youUser/workspace/project/styles/
I hope this can help you.
I ended up doing this without using Grunt or Sass-watch:
npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
if you are in your current folder then do the following to watch it.
F:\sass tutorial>sass --watch ./:./
Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated.
and as now (May 2018) if you install dart sass via npm , it does not support --watch command
What to do:
you need to install node-sass globaly , like:
npm install node-sass -g
and then restart the command line , then use this code:
node-sass --watch scss/styles.scss css/styles.css
to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.
and just in case you get an error like this at the first time that you save your .scss file:
{
"status": 3,
"message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
"formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}
what you need to do is save it again, it will work correctly!
According to the information, you can use the next command line:
sass --watch .
Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do
You can create one sass file which includes the rest of the files, and then just watch this file.
Alternately, look into Grunt and the very good grunt-contrib-compass plugin
You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:
npm i -g sass
then go to the project folder and type command below:
sass --watch $(pwd)/src/static
also you can wrap it in npm script in package.json, like
"scripts": {
"sass:watch": "sass --watch $(pwd)/src/static"
}
and run it by this command:
npm run sass:watch
I'm trying to use SASS for the first time with textmate. I seem to have installed it correctly by following the instructions on the git page - https://github.com/MarioRicalde/SCSS.tmbundle
but I can't find any information on how I can now use it.
When I make a .sass file the new Sass syntax is highlighted but when I save it is not compiled. Am I missing something?
Make sure to open up Terminal and in the command line, navigate to your project folder and run this command:
sass --watch style.scss:style.css
Name your working file style.scss, and it will compile and generate and update the style.css file that you reference in your document head.
Also make sure you have installed the Sass gem within your project directory :)
gem install sass
UPDATE
The bundle is only for installing syntax highlighting in Textmate. Sass is a precompiler for CSS, so it generates CSS from what you write in Sass. This is done through the sass --watch command above in the command line.
Read more on how to use and install Sass.