Eu escolhi o implementador node-sass para libsass porque ele é baseado em node.js.
Instalando node-sass
- (Pré-requisito) Se você não tiver o npm, instale o Node.js primeiro.
$ npm install -g node-sass
instala o node-sass globalmente -g
.
Esperamos que isso instale tudo que você precisa, se não for ler libsass na parte inferior.
Como usar node-sass em scripts de linha de comando e npm
Formato geral:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Exemplos:
$ node-sass my-styles.scss my-styles.css
compila um único arquivo manualmente.
$ node-sass my-sass-folder/ -o my-css-folder/
compila todos os arquivos em uma pasta manualmente.
$ node-sass -w sass/ -o css/
compila todos os arquivos em uma pasta automaticamente sempre que os arquivos de origem são modificados. -w
adiciona uma observação para mudanças no (s) arquivo (s).
Mais opções úteis como 'compressão' @ aqui . A linha de comando é boa para uma solução rápida, no entanto, você pode usar executores de tarefas como Grunt.js ou Gulp.js para automatizar o processo de construção.
Você também pode adicionar os exemplos acima aos scripts npm. Para usar corretamente os scripts npm como alternativa ao gulp, leia este artigo abrangente @ css-tricks.com, especialmente sobre tarefas de agrupamento .
- Se não houver nenhum
package.json
arquivo no diretório do projeto, a execução $ npm init
criará um. Use-o com -y
para pular as perguntas.
- Adicionar
"sass": "node-sass -w sass/ -o css/"
a scripts
no package.json
arquivo. Deve ser parecido com isto:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass
irá compilar seus arquivos.
Como usar com gole
$ npm install -g gulp
instala o Gulp globalmente.
- Se não houver nenhum
package.json
arquivo no diretório do projeto, a execução $ npm init
criará um. Use-o com -y
para pular as perguntas.
$ npm install --save-dev gulp
instala o Gulp localmente. --save-dev
adiciona gulp
a devDependencies
em package.json
.
$ npm install gulp-sass --save-dev
instala o gulp-sass localmente.
- Configure o gulp para seu projeto criando um
gulpfile.js
arquivo na pasta raiz do projeto com este conteúdo:
'use strict';
var gulp = require('gulp');
Um exemplo básico para transpilar
Adicione este código ao seu 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
executa a tarefa acima que compila o (s) arquivo (s) .scss na sass
pasta e gera os arquivos .css na css
pasta.
Para facilitar a vida, vamos adicionar um relógio para que não tenhamos que compilá-lo manualmente. Adicione este código ao seu gulpfile.js
:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
Tudo está pronto agora! Basta executar a tarefa de observação:
$ gulp sass:watch
Como usar com Node.js
Como o nome de node-sass indica, você pode escrever seus próprios scripts node.js para transpilar. Se você estiver curioso, verifique a página do projeto node-sass.
E quanto ao libsass?
Libsass é uma biblioteca que precisa ser construída por um implementador como o sassC ou em nosso caso, node-sass. O Node-sass contém uma versão compilada do libsass que usa por padrão. Se o arquivo de construção não funcionar em sua máquina, ele tentará construir o libsass para sua máquina. Este processo requer Python 2.7.x (3.x não funciona a partir de hoje). Além do que, além do mais:
LibSass requer GCC 4.6+ ou Clang / LLVM. Se o seu sistema operacional for mais antigo, esta versão pode não ser compilada. No Windows, você precisa do MinGW com GCC 4.6+ ou VS 2013 Update 4+. Também é possível construir LibSass com Clang / LLVM no Windows.
node-sass
está nasgulp-sass
dependências de , portanto, não há necessidade de instalá-lo localmente.