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
Related
Is it possible to use singularitygs in sass format rather than SCSS format?
Both singularitygs and breakpoint seems to come with only SCSS format files. If I manually convert the provided files to sass format, will that work?
I tried setting default format to sass in the config.rb file but that just seems to cause errors when starting to watch.
In Compass projects, you can interchange .sass and .scss files in the same project. Import them normally and you'll be OK.
That being said, as of this writing, both require custom Ruby functionality so in order to actually use either Breakpoint or Singularity, you need to be using them as Compass extensions as prescribed in their respective README files.
I used a switch --syntax sass to format a project in sass rather than SCSS:
compass create {project name} -r singularitygs --using singularitygs --syntax sass
SCSS and sass format can be mixed in different files but the watch function will not automatically compile the other format. For instance, if you set the default format to sass then any save to SCSS files will not be automatically processed.
The main reason I was getting the errors were from trying to install extension for compass.app. I am not sure what I am doing wrong but just copying singularitygs and breakpoint to the compass.app extension folder creates error on compass.app as well as the compass command line execution.
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
On the Susy Getting Started page, there's a section marked 'Manual Start', which says :
"You can use this method if you're not using Compass from Terminal and/or Rails".
It then explains how to copy Susy's Sass definitions and #import "susy", after which (it claims), "you're good to go".
I'm trying to use Susy as part of my own build system, which uses the 'sass' command-line command to compile my stylesheets. Obviously, the Susy Sass mixins and includes depend on Compass, so I extracted the Compass Sass definitions from the Compass distribution, and put them where they could be accessed by Susy. I then tried to compile my stylesheets with:
sass -I scss/compass scss/foobar.scss ${CSSDIR}/foobar.css
When I do this, Susy throws a warning:
"You need to provide either a valid layout (number of columns) or a valid media-query min-width breakpoint (length)".
Digging into the code, it appears that the issue is that Susy calls the 'compact' function provided by Compass. The actual call is something like:
compact(false,false,false,...)
which - I presume - should evaluate to:
false
But 'compact' isn't a Sass feature; it's a Compass function, implemented in Ruby as part of Compass. If Compass's Ruby extensions aren't available, that call is left unchanged, so the Susy mixin is getting handed:
compact(false,false,false,...)
which is not 'false' ... and so things go pear-shaped. (The trouble happens at line 93 of susy/_grid.scss).
It looks to me as if using Susy without Compass is not actually possible. What's my best solution to this issue? Do I just use 'compass compile ...'instead of 'sass' to compile my stylesheet? Or can I somehow provide the 'compact' function to 'sass' in some other way?
You can add this function yourself, though I really recommend using Compass. All it requires is a config.rb file so that Compass knows where files are supposed to live for various helper functions. The command for compiling with Compass is more compact since the output location is already defined in the config file: compass watch or compass compile
If you don't want to use Compass, you can add the function yourself. First you'll need the custom function, which comes from here: https://github.com/chriseppstein/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb#L18
def compact(*args)
sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List)
list = args.first
args = list.value
sep = list.separator
end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end
Place it in a ruby file wherever makes sense.
Your sass command now just needs to add this flag: -r ./path/to/functions.rb
I'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
If you use the 'Run a custom command after processing changes' option rather than the standard compilation option, then you can use the commands as detailed on the readme.
# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
I wrote a blog post covering this.
If you install the latest version (3.0.0) of Bourbon and install bourbon into your compass sass directory:
bourbon install --path ./sass
You can then use LiveReload with one small tweak. You will need to replace LiveReload's version of SASS with at least 3.2.3, since Bourbon requires this.
Instructions on how to replace LiveReload's default SASS version can be found here: http://carl-topham.com/theblog/post/changing-version-sass-livereload/
This seems to work for me.
I've been told you can get it to work by passing the lib/bourbon.rb file into the "Run a custom command" option in LiveReload. See attached image.
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`