I know that I can watch a single file in a folder and have it compressed like so:
sass --watch HealthyArticles.scss:HealthyArticles.min.css --style compressed
What I'd like to be able to do is:
sass --watch *.scss:*.min.css --style compressed
The problem with this is that I get the error:
Errno::EINVAL: Invalid argument - *.scss
The main point is controlling the output filename. Is this possible with sass?
I think you're probably looking for Compass. All this stuff is just baked into Rails, so I'm not sure exactly how everything links together, but I believe if you're using SCSS without a framework around it, then Compass is what you're after.
Download from http://compass-style.org/ and run something like this:
gem install compass
$ compass create asd --bare --sass-dir "input_directory" --css-dir "output_directory"
You can set this in a config file:
output_style = :compressed
Alternatively, you could just run a script that does something like (this is Ruby):
files = Dir["/path/to/scss/folder/*.scss"].map do |file|
"#{file}:#{file.gsub(".scss", ".min.css")}"
end
`sass --watch #{files} --style compressed`
Related
I am trying to compile my Sass on the Cloud9 (http://c9.io) IDE. I have a Compass config.rb file, which I'd like to be adhered to.
The output of sass -h within the terminal states that a --compass option exists:
mikemike#x:~/workspace/resources/assets/sass (master) $ sass -h compass
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
Common Options:
-I, --load-path PATH Specify a Sass import path.
-r, --require LIB Require a Ruby library before running Sass.
--compass Make Compass imports available and load project configuration.
-t, --style NAME Output style. Can be nested (default), compact, compressed, or expanded.
-?, -h, --help Show this help message.
-v, --version Print the Sass version.
I'm unsure how to get this working. There is no additional information on it and simply running sass --compass or sass --compass config.rb just seems to put sass in interactive mode.
The command you just ran is giving you a hint as to how you're supposed to use it. It expects an input and an output. Since you're providing neither, it goes into interactive mode.
You can't specify the location of the config.rb, this is by design. Use the compass command instead (eg. compass watch).
sass --compass is intended to be a quick-and-dirty way to get access to the Compass libraries that don't require any configuration. If you want anything more complicated, you should use the compass executable.
https://github.com/sass/sass/issues/858
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 but I got some issue with it, is not compiling anything. I tried different things to troubleshoot, is still not working.
Ruby 2.0.0-p576
Sass 3.4.5
Wind 7
sass --watch sass/scss.css:css/style.css
OR
sass --watch scss.css:css.css
result:
sass is watching for change .press Ctr-C to stop.
write sass/scss.css
write sass/scss.css.map
config.rb
# Set this to the root of your project when deployed:
css_dir = 'css'
sass_dir = 'sass'
images_dir = './img'
javascript_dir = 'js'
output_style = :expanded
relative_assets = true
line_comments = false
Thanks
Based on the information you've provided, there are a couple of things to fix.
First, you'll want your .scss files to have the same name as your compiled .css files, just with a different extension. In this case, you'd name your .scss file style.scss, and sass will save the compiled result to style.css.
The second thing I notice is that you're using compass, with a config.rb file. This suggests that you probably don't want to use the sass --watch command to start Sass, since going this route will not actually enable Compass to be used in your Sass files. The way to invoke compass here is to run compass watch from the directory that encloses your /sass and /css directories (since those are specified in your config.rb file.
Fixing those two items will probably get your Sass compiler running the way you want. Here's what the resulting structure should look like:
/enclosing_folder
config.rb
/css
style.css (this will be added by the sass compiler)
/sass
style.scss
In this example, run compass watch from enclosing_folder.
this is my dir structure
css/
sprites/_sprite.scss
scss/important.scss
scss/file1.scss
...
scss/file5.scss
scss/file6.scss
scss/file7.scss
scss/file8.scss
scss/file9.scss
scss/file10.scss
I want to be able to use
compass watch
to monitor changes to scss/important.scss file ONLY.
I know about
compass watch scss/important.scss
But I want to achieve the same just using a config file conf.rb so I can use compass like that
compass watch
Why I want to do this? Because I want to run compass via Guard. I know that in Guard I can watch certain files but it doesn't help me as compass always rebuilds all the scss files regardless of what Guard watches.
The reason I want to build only one scss file is because I use compass to generate PNG sprite and it takes 5 seconds for each scss where that sprite is imported. Way too long to use Guard with LiveReload (11 x 5s !!!).
prefixing the other SCSS files with "_" is not an option.
I just want compass to watch one file without having to specify this file as a command line argument
OK, I have two ideas maybe can help you.
move your sass files to another directory except for main.scss, name that directory whatever you want, for example: includes. Then put additional_import_paths = 'path/to/includes', leave sass_dir as it used to be. Finally in your main.scss import other files. Now, compass knows the dependencies for main.scss but won't compile those files because they stay in an independent directory.
But there's a littler issue left: how to compile them in production environment? Well, compass allows us to specify environment variable like environment = :production (and its default value is :development). With this help, you can write your sass_dir as sass_dir = (environment == :production) ? 'path/includes/main' : ['path/includes/main', 'path/includes/others'], and execute command: compass compile -e production at the final stage.
Write a bash alias like: alias mycompass="compass watch scss/main.scss", and you know it. use mycompass for your own work, leave compass as it should be.
What I eventually did was:
I run
compass watch scss/important.scss
in one console and
guard -i
in another console. I set up Guard to watch on CSS file cachanges and do LiveReload. I removed compass from my guard configuration. Now it all works as I expected except I have to keep two terminals open.
I tried:
sass-convert --from scss --to css --recursive app/assets/stylesheets temp
But this only converts css to SASS, and I want the other way around.
Then I looked at the sass command, but it doesn't look like I can pass it a directory.
To do a one-time Sass compile instead of a watch, you can do this from the command line:
sass --update scss:css
To have Sass import one file (usually a partial, with a _ starting the filename), you can do this inside a Sass file:
#import "_base.scss";
This way, Sass knows where you want the include to occur.
By default, Sass can't import an entire directory. The Sass Globbing gem, however, can. You can install it from the command line:
gem install sass-globbing
And then watch with it:
sass -r sass-globbing --watch sass_dir:css_dir
Note that globbing will import files alphabetically, so be sure your CSS will cascade appropriately if this occurs.
Use the sass command followed by the input file name and path, a colon (:) and the desired output file name and path. If the output file does not already exist Sass will generate it. For example,
sass sass/main.scss:css/main.css
However, this is a one-off command that would require being run every time you want to generate a new CSS file. A simpler and handier method is to use Sass's built-in --watch flag. This watches for changes to your Sass file and automatically runs the compile command each time you save changes.
sass --watch sass/main.scss:css/main.css
If you have multiple Sass files within a directory you can watch for changes to any file within that directory:
sass --watch sass:css
Sass also has four CSS output styles available: nested, expanded, compact and compressed. These can be used thus:
sass --watch sass:css --style compressed
Refer to the Sass documentation for more.
to that, simply go your project directory and do this :
sass --update sass-dir:assets/css
with sass-dir the directory containing your actual sass files and assets/css the desired output directory.
Hope this could help.
You can use compass to convert Sass files into CSS.
To initialize the config.rb, try:
compass init --syntax=sass --css-dir=css --javascripts-dir=js
Once you've the configuration file, try:
compass compile
or by specifying the file explicitly: compass compile sass/foo.scss.
To install it, try:
sudo gem update
sudo gem install sass compass
https://sass-lang.com/guide
you can use
sass --watch [input folder path]:[output folder path]
i tried running it in a new terminal and after that sass watches the folder and compiles upon any changes.
you can use this code
sass --watch file.sass:file.css
or
sass --watch folderSass:foldercss
if you want to create css.main you can use this code
sass --watch sass:css --style compressed