sass postcss_将PostCSS与Sass，Stylus或LESS一起使用

最新推荐文章于 2025-11-25 15:24:07 发布

翻译最新推荐文章于 2025-11-25 15:24:07 发布 · 1.8k 阅读

文章标签：

本文介绍了如何在不放弃喜欢的预处理器（如 Sass, Stylus, 或 LESS）的情况下，利用 PostCSS 的强大功能。PostCSS 插件如 Autoprefixer、rtlcss、postcss-colorblind、postcss-svgo 和 postcss-font-magician 可以补充预处理器的功能，提供自动化前缀、左右对齐转换、色盲模拟、SVG 优化和自定义字体添加等服务。文章还提供了针对每个预处理器与 Gulp 或 Grunt 的设置指南，以帮助开发者将 PostCSS 平滑集成到工作流中。" 86608807,611929,Android P中的Wi-Fi启用流程详解,"['Android开发', 'Wi-Fi技术', '系统服务', '网络连接']

sass postcss

如果您对使用PostCSS感兴趣，但是仍然喜欢自己喜欢的预处理器，请不要担心。您无需在这两者之间做出选择，您可以将它们彼此直接使用。

有几个PostCSS插件可以很好地补充预处理器，因为它们将功能添加到您的工作流中，否则仅使用预处理器是不可能的，或者至少更加困难。

我们将介绍其中一些免费的插件，然后通过设置指南向您展示如何与Sass，Stylus或LESS一起使用PostCSS。

为什么要同时使用两者？

在探讨如何将预处理器与PostCSS一起使用之前，我们将先讨论一下您为什么要这么做。简短的答案是：获得对功能强大的预处理器的PostCSS插件的访问。为了向您展示为什么值得拥有这些东西，我们将介绍一些与预处理器非常有效的插件。

注意：通过在常规预处理程序代码中使用mixin和函数，可能有可能获得相似的最终结果，但是对于下面的每个示例，该过程都是自动处理的。您可以正常编写CSS，而插件则可以为您处理所有事情，无需调用函数，不包含mixins或传递参数。

自动前缀

编写了许多预处理程序混合器来处理供应商前缀的插入。例如，您可能使用了@include box-sizing(border-box); 从Compass库到输出供应商前缀的box-sizing规则。

依赖mixin作为供应商前缀的问题是：

您首先必须知道属性需要前缀，然后才能决定为其部署混合。
您必须知道关联的mixin的名称以及如何使用它。
您必须保持对何时不再需要每个属性的供应商前缀的标签（我知道我在给box-sizing添加前缀以获取较长时间...）

Autoprefixer通过自动处理供应商前缀过程消除了这些担忧。 Autoprefixer会扫描您CSS，并根据CanIUse.com的数据进行检查，然后添加所需的前缀。

在以下网址了解有关Autoprefixer的更多信息： https : //github.com/postcss/autoprefixer

rtlcss

从单一来源生成默认样式表和RTL（从右到左）样式表也是使用预处理器完成的工作，但是通常需要在多个位置使用多个mixins和/或将变量插值到代码中。例如，不要写margin-left: 1rem; 您可能需要写margin-#{dir}: 1rem; 或@include margin-left( 1rem ); 。

但是，使用Mohammad Younes的rtlcss插件，您不需要使用mixins或变量插值，只需像往常一样编写样式表，插件即可找到所有实例，无论是“右”还是“左”并交换它们。 margin-left: 1rem; 自动变为margin-right: 1rem; 无需编写任何特殊代码即可实现。

在以下网址了解有关rtlcss的更多信息： https : //github.com/MohammadYounes/rtlcss

postcss-色盲

使用Brian Holt开发的postcss-colorblind插件，您可以自动生成样式表的不同版本，从而使您第一手体验设计对于色盲人士的外观。它可以模拟八种不同类型的色盲，从而帮助您真正掌握配色方案的可用性。

这是您确实必须去PostCSS才能找到的功能示例，因为预处理器很难实现。

在以下网址了解有关postcss-colorblind的更多信息： https : //github.com/btholt/postcss-colorblind

postcss-svgo

Ben Briggs的postcss-svgo插件可以让您轻松地进行内联SVG代码的优化。例如：

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

可以归结为不到一半的代码：

background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

在以下网址阅读有关postcss-svgo的更多信息： https : //github.com/ben-eb/postcss-svgo

csnano

尽管预处理器可以去除空格和注释，但Ben Briggs的cssnano包可以执行上述两个步骤之外的所有优化。我们在“最小化和优化 ”教程中详细介绍了cssnano。

在以下网址了解有关cssnano的更多信息： https : //github.com/ben-eb/cssnano

postcss-font-魔术师

Jonathan Neal的postcss-font-magician插件使添加自定义字体与使用常规字体一样容易。您不需要使用任何混合，只需像通常那样添加font-family规则即可：

body {
   font-family: "Alice";
}

...并且该插件将为您处理完整的@font-face生成：

@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}

body {
  font-family: "Alice";
}

在以下网址了解有关postcss-font-magician的更多信息： https : //github.com/jonathantneal/postcss-font-magician

项目设置

下面有六个设置指南：每个主要预处理器的Gulp和Grunt指南。无需阅读全部六个内容，您可以直接跳至首选预处理器和构建工具的指南。如果不确定使用Gulp还是Grunt，则Gulp无疑是本教程更简单的选择。

无论您遵循哪种指南，都需要从一个空的Gulp或Grunt项目开始。您可以在之前的教程中了解如何为PostCSS设置Gulp或Grunt项目

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。然后在终端或命令提示符指向文件夹的情况下，运行命令npm install 。

将PostCSS插件安装到您的项目中

在为以下部分之一设置一个空项目之后，您还需要安装两个PostCSS插件：Autoprefixer和cssnano。您可以通过运行以下命令来执行此操作：

npm install autoprefixer cssnano --save-dev

我们将使用这两个插件来测试PostCSS和您的预处理器是否按预期工作。

在PostCSS之前进行预处理

在PostCSS中使用预处理器的第一条规则是，您应始终首先运行所述预处理器。这是因为您不想在代码中使用任何可能会使PostCSS插件阻塞的特定于预处理器的语法，而且也不想让PostCSS对代码进行更改以防止预处理器按预期运行。

PostCSS插件和“ PostCSS测试代码”

对于我们设置的每个预处理器，在预处理器完成编译后，我们将让它们运行autoprefixer和cssnano。在每种情况下，我们都需要为这两个插件添加一些测试代码才能运行。

为了避免在下面的每个部分中重复相同的代码，当您看到一条指令告诉您添加PostCSS测试代码时，请将其添加到您正在处理的预处理器源文件中：

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* cssnano will remove this comment */
	display: flex;
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

如果成功，则每种情况下您的编译代码都将显示为：

.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

注意：flexbox的使用已自动添加前缀，cssnano对代码进行了多次优化。我们使用的代码与前面的“最小化和优化”教程中所使用的代码相同，因此，请参阅其中的“ cssnano”部分以获取有关所执行的优化的详细信息。

1. Sass + PostCSS

因为您已经在使用Node.js来运行Gulp或Grunt和PostCSS，所以与它们一起使用Sass的最简单方法是通过LibSass进行操作。这也比Ruby Sass快得多。我们将通过gulp -sass或grunt-contrib-sass模块部署LibSass。

通过Gulp进行设置

使用npm install gulp-sass --save-dev将gulp-sass模块安装到项目中。

现在，您可以将Gulpfile更新为以下内容：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

让我们分解一下从默认启动器Gulpfile中更改的内容：

添加了变量以加载autoprefixer gulp-sass ， autoprefixer和cssnano
在processors数组中添加了autoprefixer和cssnano变量
将我们正在编译的源文件的文件扩展名编辑为“ .scss”，而不是“ .css”
添加了新的pipe()行.pipe(sass()... ）来处理Sass，请确保将其放置在处理PostCSS的行之前

现在我们可以运行一些测试，以确保Sass和PostCSS都能按预期进行编译。

测试预处理器

将现有的“ src / style.css”文件重命名为“ src / style.scss”，并在其中添加以下测试代码：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

运行gulp css ，您应该看到一个新的“ style.css”文件出现在“目标”文件夹中，其内容如下：

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

测试PostCSS

现在，将本教程前面提供的PostCSS测试代码添加到您的“ style.scss”文件中。

运行gulp css命令，您应该看到正确的代码出现在“ dest / style.css”文件中：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

通过Grunt进行设置

在新的Grunt项目中，使用npm install grunt-contrib-sass安装grunt-contrib-sass模块。

然后在现有的grunt.loadNpmTasks()添加grunt.loadNpmTasks()函数：

grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-contrib-sass');

现在，您需要设置一个新任务来处理Sass。在此行之后：

grunt.initConfig({

...但是在现有的postcss任务之前，添加以下代码：

sass: {
      dist: {
        files: {
          'src/style.css': 'src/style.scss'
        }
      }
    },

现在，我们将注册一个任务，该任务将先运行Sass，然后运行PostCSS。在您刚刚插入的grunt.loadNpmTasks()函数之后，添加：

grunt.registerTask('css', ['sass', 'postcss']);

测试预处理器

要测试设置，请将现有的“ src / style.css”文件重命名为“ style.scss”。将以下Sass代码添加到其中：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

运行命令grunt css ，您应该在名为“ style.css”的“目的地”文件夹中看到一个包含以下代码的新文件：

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

设置PostCSS

现在，我们将运行Autoprefixer和cssnano插件。将您的Gruntfile的processors数组更新为以下内容：

processors: [
          require('autoprefixer')(),
          require('cssnano')()
        ]

测试PostCSS

将PostCSS测试代码添加到您的“ style.scss”文件中，再次运行命令grunt css ，您应该会发现重新编译的“ dest / style.css”文件现在包含正确的自动前缀和优化代码。

2.触控笔+ PostCSS

由于Sean King创建了PostStylus软件包，它结合了Stylus和PostCSS的处理功能，因此Stylus和PostCSS可以很好地协同工作。如果您是Stylus开发人员，则只需将PostStylus添加到编译过程中，即可立即将PostCSS插件作为工作流程的一部分使用。

PostStylus： https ： //github.com/seaneking/poststylus

通过Gulp进行设置

如果您使用的是入门项目中的预制Gulpfile，则应注意使用的是gulp-postcss插件。实际上，这仅是Sass和LESS设置过程所需要的，但是对于Stylus，则不需要它，因为我们改用PostStylus作为编译器。

您可以使用npm uninstall gulp-postcss --save-dev将其从项目中删除，然后从Gulpfile中删除此行：

var postcss = require('gulp-postcss');

现在，我们可以通过运行以下命令来安装手写笔和PostCSS编译所需的两个插件：

npm install gulp-stylus poststylus --save-dev

更新您的Gulpfile使其成为：

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var poststylus = require('poststylus');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.styl')
		.pipe(stylus({
			use: [
				poststylus(processors)
			]
		}))
		.pipe(gulp.dest('./dest'));
});

这是我们上面所做的：

新增变量负载gulp-stylus ， poststylus ， autoprefixer和cssnano
在processors数组中添加了autoprefixer和cssnano变量
将我们正在编译的源文件的文件扩展名编辑为“ .styl”而不是“ .css”
删除了读取.pipe(postcss(processors))的.pipe()行
将其替换为.pipe(stylus({... ，以设置.pipe(stylus({... -stylus和posttylus模块来处理我们的编译

测试预处理器

现在我们准备测试编译。在“ src”文件夹中，将“ style.css”重命名为“ style.styl”，然后添加以下测试笔代码：

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

运行gulp css命令，您应该看到“ style.css”文件出现在“目标”文件夹中，其中包含以下内容：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

测试PostCSS

将之前提供的PostCSS测试代码添加到“ style.styl”文件中，确保粘贴的代码中只有制表符缩进，而不是空格。

重新编译，并检查“ dest / style.css”文件中是否具有适当的输出。

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

通过Grunt进行设置

与用于Stylus的Gulp项目一样，不需要Starter项目随附的默认PostCSS编译器，仅用于Sass和LESS设置过程。您可以使用npm uninstall grunt-postcss --save-dev将其从项目中删除。

现在我们可以使用以下命令安装grunt-contrib-stylus和posttylus：

npm install grunt-contrib-stylus poststylus --save-dev

我们将不再使用grunt-postcss，因此请找到以下行：

grunt.loadNpmTasks('grunt-postcss');

并替换为：

grunt.loadNpmTasks('grunt-contrib-stylus');

鉴于我们不使用grunt-postcss，这意味着我们将不再需要在grunt.initConfig({...});定义的postcss任务grunt.initConfig({...}); 。删除该任务配置，并将其替换为新的stylus任务：

stylus: {
      compile: {
        options: {
        },
        files: {
          'dest/style.css': 'src/style.styl'
        }
      }
    }

测试预处理器

现在我们准备测试编译。在“ src”文件夹中，将“ style.css”重命名为“ style.styl”，然后添加以下测试笔代码：

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

运行命令grunt stylus ，您应该看到“ style.css”文件出现在“目标”文件夹中，其中包含以下内容：

body{font:100% Helvetica,sans-serif;color:#333}

设置PostCSS

要将PostCSS插件添加到编译过程中，我们首先需要将此代码添加到Gruntfile的最顶部，在module.exports...行上方：

var poststylus = function() {
  return require('poststylus')(['autoprefixer', 'cssnano'])
};

在这里，您可以在要使用的任何PostCSS插件中加载，而不必像在其他教程中那样习惯在processors数组中加载。

然后在手写笔任务中找到options对象，并将其更新为以下内容：

options: {
          use: [poststylus]
        },

这告诉grunt-contrib-stylus在编译过程中使用posttylus及其插件。

测试PostCSS

将“ PostCSS测试代码”添加到“ src / style.styl”文件中，运行grunt stylus ，您应该看到以下内容写入“ dest / style.css”文件中：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

3. LESS + PostCSS

通过Gulp进行设置

使用npm install gulp-less --save-dev将无gulp的模块安装到项目中。

现在，您可以将Gulpfile更新为以下内容：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var less = require('gulp-less');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.less')
		.pipe(less())
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

让我们分解一下从默认启动器Gulpfile中更改的内容：

添加了变量以加载gulp-less autoprefixer ， autoprefixer和cssnano
在processors数组中添加了autoprefixer和cssnano变量
将我们正在编译的源文件的文件扩展名编辑为“ .less”而不是“ .css”
添加了.pipe(less())来处理LESS，请确保将其放置在处理PostCSS的行之前

测试预处理器

现在，我们可以运行一些测试，以确保LESS和PostCSS均按预期进行编译。

将现有的“ src / style.css”文件重命名为“ src / style.less”，并添加以下测试代码：

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

运行gulp css ，您应该看到一个新的“ style.css”文件出现在“目标”文件夹中，其内容如下：

body{font:100% Helvetica,sans-serif;color:#333}

测试PostCSS

现在，在您的“ style.less”文件中，添加本教程前面提供的PostCSS测试代码。

运行gulp css命令，您应该会在“ dest / style.css”文件中看到正确的代码。

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

通过Grunt进行设置

进入新的Grunt项目，使用npm install grunt-contrib-less安装grunt-contrib-less模块，然后在现有的grunt.loadNpmTasks()添加grunt.loadNpmTasks()函数：

grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-contrib-less');

现在，您需要设置一个新任务来处理LESS。在此行之后：

grunt.initConfig({

...但是在现有的postcss任务之前，添加以下代码：

less: {
      production: {
        files: {
          'src/style.css': 'src/style.less'
        }
      }
    },

现在，我们将注册一个任务，先运行LESS，然后运行PostCSS。在您刚刚插入的grunt.loadNpmTasks()函数之后，添加：

grunt.registerTask('css', ['less', 'postcss']);

测试预处理器

要测试设置，请将“ src / style.css”文件重命名为“ style.less”。添加以下代码：

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

运行命令grunt css ，您应该在名为“ style.css”的“目的地”文件夹中看到一个包含以下代码的新文件：

body {
  font: 100% Helvetica, sans-serif;
  color: #333333;
}

设置PostCSS

现在，我们将PostCSS插件添加到编译流程中。将您的Gruntfile的processors数组更新为以下内容：

processors: [
          require('autoprefixer')(),
          require('cssnano')()
        ]

测试PostCSS

将PostCSS测试代码添加到您的“ style.less”文件中，再次运行命令grunt css ，您应该发现重新编译的“ dest / style.css”文件现在包含正确的自动前缀和优化代码：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}