I have a very simple gulp based test environment using only sass and the susy2 gem - no compass because compass is no longer a dependency of susy 2
The error i'm getting is
...sass/susy/language/susy/settings:8:error: error reading values after container
line 8 of the problem file, susy's settings is as follows:
#include susy-defaults((
container: auto, <- line 8
math: fluid,
output: float,
container-position: center,
gutter-position: after,
global-box-sizing: content-box,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
inspect: false,
),
));
I'm using sass version 3.4, which should support the sass maps syntax, and gulp-sass version 0.7.3. along with susy 2.1.3.
Any idea why im getting this error?
You must update SASS to later than 3.3. Current version of SASS as of this writing is 3.4.1 Selective Steve. Type sass -v in your terminal (assuming OSX) to see what version of SASS you are currently on.
gulp-sass is actually a wrapper around Node-sass, which again is a library
that provides binding for Node.js to libsass, the C version of the popular
stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and
automatically via a connect middleware.
As this node-sass page says:
"..The libsass library is not currently at feature parity with the 3.2 Ruby Gem
that most Sass users will use, and has little-to-no support for 3.3 syntax.
While we try our best to maintain feature parity with libsass, we can not
enable features that have not been implemented in libsass yet."
So it does not matter which version of sass you have installed,
because gulp-sass is not using it.
The problem that arises with susy2 is that of, libsass currently not
supporting some of features susy2 exposes.
The way I resolved this issue, was using
gulp-ruby-sass instead of
gulp-sass, which is slower but more feature-rich. And will work with Susy2.
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'm trying to compile Animate.scss (by Geoff Graham) but all that's appearing in "style.css" is a tiny portion of the CSS.
I'm using Ruby "sass --watch scss/dir.scss:style.css" to compile and it works correctly for other partials (e.g. Bootstrap 4, whch is commented out in the first column in "dir.scss") but I can't figure out why the Animate library is having this issue. Ruby command terminal is not showing any errors.
Used the latest release on github (3.2.2) and now it's working.
I just started using gulp-sass, is there a "easy" way to find out what version of Sass, that is being used?
Not that I think it matters too much but I'm using gulp-sass in Visual Studio 2015 (CTP6).
I need to know because I want to use a Sass mixin which requires a certain minimum version of Sass.
At the moment, if I want to find out what version of Sass is being used, I try to follow the trail like this, gulp-sass is a wrapper for node-sass which in its turn is providing Node bindings for libsass, which is a C compiler for Sass.
So to find out the version of Sass being used in my environment, I have to follow the chain and try to work out which version is used in each step and what version it then uses of the next step.
Surely there must be an easier way?
We can agree that, from node-sass you can get the versions using :
var sass = require('node-sass');
console.log(sass.info);
From gulp-sass, you can send data which will be executed by node-sass. So something like this should do the trick :
var gulp = require('gulp');
var sass = require('gulp-sass');
console.log(sass.info);
It's going to be the .info() from node-sass who get's called in the end, giving you both it's version and libsass's version.
Look in your node_modules/grunt-sass/node_modules/node-sass/package.json
"libsass": "version"
You may find out Sass version in Node-sass right from the terminal by the next line
node -e 'console.log(require("node-sass").info)'
At a cmd prompt, you can try node-sass -version
cmd: node-sass -version
node-sass 4.14.1 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]
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 wanted to use SASS on our company's web app but I can't install any programs on production machines. Everything I searched about SASS required you to run an installation program like gem and also required HAML.
I was hoping to find just a script that processes scss files without needing to install anything else.
Well... if you have Ruby available, you could checkout the Git repository of Sass (https://github.com/nex3/sass). Do so by either typing git clone https://github.com/nex3/sass.git or just downloading it.
Then you could use the interactive Ruby console by typing irb. Try to require 'sass/lib/sass' (this one here) and run Sass.compile_file 'my_styles.css'.
Otherwise... why are you trying to do that? You can also install sass locally, run sass --watch on your sass folder and it compiles your scss files automatically into css files - which you can deploy on your production environment.
If you can run java program in your build system, you could use JRuby for compiling sass. See this answer for more details
Here's a solution for using Sass without using the command line or installing dependencies. It works with Windows, OS X, and Linux. It has a graphical interface, and no installer, just unzip and double-click.
http://scout-app.io
You can also use the java library https://github.com/scireum/server-sass which can be embedded into any java based web-app. It will compile sass on the fly and return the resulting css. This is especially useful if the Sass sources change (i.e. for customizing reasons) and an ahead of time compilation is not possible. (Note: I'm the author of the project - and it is also not yet a complete implementation of the Sass standard).
Alternatively, what you could do is:
Install Ruby
Download the Sass Gem
Navigate to download location
Run: gem install sass-3.3.4.gem
Voila! Sass is installed.
Use the online Sass compiler SassMeister. You just have to paste your sass code on the left panel and get the css code on the right.