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
Related
I wanted to start a project with Sass / Compass and for grid I want to use susy.
Installed sass -v 3.4.24
Compass 1.0.3
All good and working. After I installed susy 3.0.6 and not working then I tried 2.2.12, and use the simple code body { #include container(80em); }
I get the Undefined mixin 'container' all the time.
What do i do wrong?
I don't recommend using Compass, since it is no longer maintained and Susy 3 no longer supports it. With Susy 2, it should work, but you will have to require and import Susy before it will work. Installing is not enough.
There are some brief instructions in the Susy docs.
Specifically, those commands add a require 'susy' line to the compass config, and an import 'susy' line in the Sass/Scss.
Since Compass is no longer maintained, I'm a bit fuzzy on exactly how the config/require is supposed to look.
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
I'm trying to use Twitter Bootstrap for SASS, but at the moment it's not integrated into a Rails project, and I don't I need the stuff I'd get from Compass. I (think I) want a Ruby script that will generate my CSS, JS and Font files and put them in the right places, but having spent a couple of hours going round in circles with the docs, I can't figure this out.
I have a directory like:
site/
css/
bootstrap_variables.scss
application.scss
site.scss
fonts/
index.html
js/
css/bootstrap_variables.scss contains my custom variations on Bootstrap's default variables.
css/site.scss contains the site-specific, non-Bootstrap, CSS.
css/application.scss looks something like this:
#import "bootstrap_variables.scss";
// Import Bootstrap modules I need, but not others.
#import "bootstrap/variables";
#import "bootstrap/mixins";
// ... etc
#import "site.scss"
I've installed the bootstrap-sass gem. And now I want a script that does:
Process css/application.scss with SASS and outputs css/application.css.
Put the Bootstrap JavaScript I need into a single file in js/. (How do I specify which JS modules I need?)
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
If this sounds like madness, and I'm going about this entirely wrong, feel free to tell me that too!
And now I want a script that does:
I'm not sure why you need this script at all. Cause if you can run the script you also can install sass and run sass css/application.scss css/application.css. You can install all bootstrap's file in your site folder by running bower install bootstrap-sass and then run the sass command with --load-path option which should point to your bower_components folder. You can also copy / or link the required javascripts and font from the bower_components folder.
Or consider to use Gulp or Grunt to set up your build chain.
But you can use Sass programmatically indeed.
Process css/application.scss with SASS and outputs css/application.css.
Your script.rb should look something like that shown below:
/usr/bin/env ruby
require 'sass'
require 'bootstrap-sass'
sass_engine = Sass::Engine.for_file('css/application.scss',{
:style => :compact,
:syntax => :scss
})
output = sass_engine.render
File.open("css/application.css", 'w+') {|f| f.write(output) }
Notice that you also should have to integrate the autoprefixer.
Put the Bootstrap JavaScript I need into a single file in js/
After installing the bootstrap-sass gem you can read the javascript files from the gem (see: How to find the path a Ruby Gem is installed at (i.e. Gem.lib_path c.f. Gem.bin_path)).
So the get the content of the affix plugin you can use:
file = File.new(Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/javascripts/bootstrap/affix.js", "r")
You you can read the required script, concatenate their content, minify and copy
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
As above, copy them from Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/fonts
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 created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.