How to compile or convert sass / scss to css with node-sass (no Ruby)?
I picked node-sass implementer for libsass because it is based on node.js.
Installing node-sass
- (Prerequisite) If you don't have npm, install Node.js first.
$ npm install -g node-sass
installs node-sass globally-g
.
This will hopefully install all you need, if not read libsass at the bottom.
How to use node-sass from Command line and npm scripts
General format:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Examples:
$ node-sass my-styles.scss my-styles.css
compiles a single file manually.$ node-sass my-sass-folder/ -o my-css-folder/
compiles all the files in a folder manually.$ node-sass -w sass/ -o css/
compiles all the files in a folder automatically whenever the source file(s) are modified.-w
adds a watch for changes to the file(s).
More usefull options like 'compression' @ here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.
You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article @ css-tricks.com especially read about grouping tasks.
- If there is no
package.json
file in your project directory running$ npm init
will create one. Use it with-y
to skip the questions. - Add
"sass": "node-sass -w sass/ -o css/"
toscripts
inpackage.json
file. It should look something like this:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass
will compile your files.
How to use with gulp
$ npm install -g gulp
installs Gulp globally.- If there is no
package.json
file in your project directory running$ npm init
will create one. Use it with-y
to skip the questions. $ npm install --save-dev gulp
installs Gulp locally.--save-dev
addsgulp
todevDependencies
inpackage.json
.$ npm install gulp-sass --save-dev
installs gulp-sass locally.- Setup gulp for your project by creating a
gulpfile.js
file in your project root folder with this content:
'use strict';
var gulp = require('gulp');
A basic example to transpile
Add this code to your gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
$ gulp sass
runs the above task which compiles .scss file(s) in the sass
folder and generates .css file(s) in the css
folder.
To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js
:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
All is set now! Just run the watch task:
$ gulp sass:watch
How to use with Node.js
As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.
What about libsass?
Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:
LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.
How to compile scss to css with node-sass
Maybe this covers your question:
How to compile or convert sass / scss to css with node-sass (no Ruby)?
If it's an option for you I would recommend using grunt, it will make things a lot simpler and faster. This grunt plugin is probably the best option: https://www.npmjs.com/package/grunt-contrib-sass
// UPDATE
I followed the tutorial you sent and it's very straightforward.
You create a file in your root folder called "package.json" containing the following:
{
"watches": {
"sass": "sass/**"
},
"scripts": {
"sass": "node-sass sass/ -o build/css/",
"dev": "rerun-script"
}
}
You then open the command line in the root folder and run the following:
npm install --save-dev node-sass
The above installs node-sass
You then run:
npm install --save-dev rerun-script
The above creates a watch task so you don't have to rerun node-sass everytime you make changes
And last you run
npm run dev
Done!
Is there a way to compile SASS to CSS without NodeJS?
Yes, you can compile SASS without NodeJS.
First you have to install Ruby
then have you use Sublime.? install SASS builder Plugin
then you can compile SASS to css.! with using cntrl + B for build
Below youtube link will explain clearly
https://youtu.be/ZDuQwzPgeMA
Sass or Compass without ruby?
Sass was originally written for Ruby, but now they've created libSass which is a C/C++
port of the Sass engine, which makes it easier to integrate the engine into an IDE or another language. At this point, you can use the Sass engine in Ruby, Node.js, Python, PHP, Java, .NET and others. For more information, visit libSass. Also, your IDE might have a plugin which would support Sass, without the need of ruby by using the libSass.
The original answer below may or may not apply to your situation (depends on whether or not your language has implemented support for libSass or not). I decided to leave it the way it is for archive reasons.
Sass (requires Ruby)
Sass is written in Ruby, so you’ll need Ruby installed as well.
Taken from sass's site
Compass (requires Ruby, as it's based on SASS)
Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.
Taken from compass's site
Less (written in js, requires node.js or less.js included in the page)
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. Taken from Less's site
These are the main processors out there that I know of.
You may write your own parser/port for any another language of choice.
In other words, no you can't use sass/compass without having Ruby because the program itself (sass & compass) IS written in Ruby. So you'll definitely need it in order to run it.
SCSS: node-sass replacement for old Compass image-width function
sprite-magic-importer replaces most of the features of COMPASS.
Related Topics
How to Stick a Footer to Bottom in CSS
Custom CSS File for Readme.Md in a Github Repo
Allowed Characters for CSS Identifiers
Order of Prioritization When Using Multiple Contradictory CSS Files
How to Use a CSS Wildcard in the Middle of an Attribute Selector
Bootstrap Modal Sitting Behind Backdrop
Cross Browser Way to Rotate Image Using CSS
Equal Height of Elements Inside Grid Item with CSS Grid Layout
Change Outline for Outlinedinput with React Material-Ui
Google Warning: Resource Interpreted as Font But Transferred with Mime Type Application/Octet-Stream
Is There Any Pros and Cons If I Use Always CSS Class Instead CSS Id for Everything
How to Reference a .CSS File on a Razor View
How to Reverse the Order of Columns in Bootstrap 4
Why Does Enabling Hardware-Acceleration in CSS3 Slow Down Performance