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++]
Related
While I was learning SASS, I have learned how to install SASS and dev-dependencies using npm package.
Now I want to work on my own project, so how should I work with SASS ?
Do I have to install SASS again ?
If not then how to use existing sass in my project and also the other dependencies like concatenation, auto pre-fixer. Especially when they are updated.
how to configure WebStorm to start with Sass? The best is to not install Ruby, so I should use Gulp as I know. But what to do with it? Have anybody WebStorm and may give me step by step instructions?
I am beginner front-end dev, fresh with Sass and I need your help. Thanks!
Please see http://ryanchristiani.com/getting-started-with-gulp-and-sass/ - you may find this post helpful. But note that gulp-sass is a wrapper around libsass, there are lots of known issues installing it... So installing Ruby might be a better option. See also https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
Install Ruby
https://rubyinstaller.org/downloads/
2.instal sass: please type in cmd => gem install sass
Instructions: https://sass-lang.com/ruby-sass
3.set in webstorm
Setting -> Tools -> File Watcher -> Add SCSS
Program: C:\Ruby25-x64\bin\scss
if you want to be compressed css, write " --style compressed " Continue to write the command Arguments.
Example: $FileName$:$FileNameWithoutExtension$.css --style compressed
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.
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.