我正在为设置libsass而苦苦挣扎,因为它不像基于Ruby的代码转换器那样简单.有人能解释一下如何:

  1. 安装libsass?
  2. 从命令行使用它?
  3. 将其用于任务 run 者,如gulp和grunt?

我几乎没有与包经理打交道的经验,对任务运行者的经验更是少之又少.

推荐答案

我为libsass Select 了node-sass实现器,因为它基于node.js.

安装 node 会话

  • (前提条件)如果您没有NPM,请先安装Node.js.
  • $ npm install -g node-sass全局安装Node-Sass -g.

如果没有阅读底部的libsass,这将有望安装您需要的所有内容.

如何从命令行和NPM脚本使用node-sass

一般格式:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

例如:

  1. $ node-sass my-styles.scss my-styles.css手动编译单个文件.
  2. $ node-sass my-sass-folder/ -o my-css-folder/手动编译文件夹中的所有文件.
  3. 无论何时修改源文件,$ node-sass -w sass/ -o css/都会自动编译文件夹中的所有文件.-w添加对文件的更改的监视.

更多有用的选项,如‘压缩’@ here.命令行有利于快速解决方案,但是,您可以使用Grunt.js或Gulp.js等任务运行器自动执行构建过程.

您还可以将上述示例添加到npm脚本中.要正确使用npm脚本作为alternative to gulp read this comprehensive article @ css-tricks.com,尤其是grouping tasks read about.

  • 如果您的项目目录中没有package.json个文件,则运行$ npm init将创建一个.与-y一起使用可跳过问题.
  • package.json文件中将"sass": "node-sass -w sass/ -o css/"scripts相加.它应该看起来像这样:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass将编译你的文件.

如何狼吞虎咽地使用

  • $ npm install -g gulp全局安装Gulp.
  • 如果您的项目目录中没有package.json个文件,则运行$ npm init将创建一个.与-y一起使用可跳过问题.
  • $ npm install --save-dev gulp在本地安装Gulp.--save-devpackage.json中的gulpdevDependencies相加.
  • $ npm install gulp-sass --save-dev在本地安装Group-sass.
  • 通过在项目根文件夹中创建包含以下内容的gulpfile.js文件,为项目设置GUGP:
'use strict';
var gulp = require('gulp');

A basic example to transpile

将此代码添加到您的gupfile.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运行上述任务,该任务编译sass文件夹中的.scss文件并在css文件夹中生成.css文件.

为了方便起见,让我们添加一块手表,这样我们就不必手动编译它了.将此代码添加到您的gulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

现在一切都安排好了!只需运行监视任务:

$ gulp sass:watch

如何与Node.js一起使用

正如 node sass的名称所暗示的,您可以编写自己的 node .用于传输的js脚本.如果您有兴趣,请查看 node sass项目页面.

那libsass呢?

Libsass是一个需要由实现者(如sassC或在我们的例子中为node-sass)构建的库.node-sass包含默认使用的构建版本的libsass.如果构建文件在您的机器上不起作用,它会try 为您的机器构建libsass.这个过程需要Python2.7.x(3.x目前还不能工作).此外,还包括:

LibSass需要GCC 4.6+或Clang/LLVM.如果您的操作系统较旧,此版本可能无法编译.在Windows上,您需要使用GCC 4.6+或VS 2013 Update 4+的MinGW.也可以在Windows上使用Clang/LLVM构建libsas.

Css相关问答推荐

下拉面板未与Angular中的下拉文本框垂直对齐

截断风景中的柔子或强制在其自己的线上,如果是肖像

Firefox中的解决方法:has(不使用JavaScript)

如何更改Swiper Navegation默认 colored颜色

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗?

这个 CSS :is() Select 器没有像我想象的那样工作

CSS:使用 Material Icon 作为 ::marker 或 ::before 使 li 元素不起作用

为什么所有选项卡都没有显示在 React 的 MUI 选项卡组件中?

SCSS - Lighten/Darken 不编译?

CSS Select 器在 rvest 中找到,在 RSelenium 中找不到

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

您如何设置 Google Places Autocomplete API 的下拉菜单样式?

如何强制 div 出现在下方而不是旁边?

在整个 DIV 周围添加 CSS 框阴影

Angular 动画的目的是什么?

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

如何在页面上居中 twitter bootstrap 选项卡?

仅针对使用的类优化 Font Awesome

从 textarea 中删除所有样式(边框、发光)

谷歌的无图像按钮