Is it possible to convert whole folder with convert-sass? (scss to sass)
Yes, sass-convert
accepts a recursive argument.
If you run sass-convert --help
, it will give you a list of available options. One of them is:
-R, --recursive Convert all the files in a directory. Requires --from and --to.
So, your command should look like this:
sass-convert -R my_sass_dir --from sass --to scss
How to convert directory SASS/SCSS to CSS via command line?
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.
Sass convert multiple scss files to css
When you start the filename of a Sass-file with undescore this means that it is not to be compiled to a CSS-file. To duplicate the structure you need to remove the underscore from the filenames.
You use underscore to structure your sass-code and then include it in a non-underscored file which is then compiled to CSS.
If you want to use sass this way you could add a file like this:
scss/main.scss:
@import "base";
@import "reset";
@import "themes/light";
@import "themes/dark";
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 watch changes in whole directory/folder containing many sass files
Simply use the command sass --watch <input folder>:<output folder>
, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder>
contains the Sass files and <output folder>
that hosts the generated CSS files.
Related Topics
How to Get The Cursor to Change to The Hand When Hovering a <Button> Tag
Defining Keyframe Animations Inside Media Queries
How to Use Nth-Child in CSS to Select All Elements After The 3Rd One
How to Use Absolute Path to Import Custom SCSS, When Using React + Webpack
Change Input Placeholder Color Darker
Make Div Max-Height Equal to 'Window Height - 100Px'
Regression Testing for Styling and Layout of Web Applications
How to Make a Text Go onto The Next Line If It Overflows
Chrome Devtools Converts All Hex Colors to Rgb
Make an Element's Width Relative to Its Height
CSS3 Flexbox Full-Height App and Overflow
Ionic 4: Changing Ion-Content Background Does Not Work
CSS Text-Align: Center; Is Not Centering Things
Point One Style Class to Another