使用PostCSS和Sass

上传者：戈兰·科拉克（Goran Kolak）于 2017年3月7日

翻译：CHENJIAMIAN

原文：https://inchoo.net/magento/magento-frontend/using-postcss-sass/

我们到底要讨论什么？

基本设定

var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer');
 
gulp.task('css', function() {
  return gulp.src('src/style.css')
    .pipe(postcss(
      autoprefixer()
    ))
    .pipe(gulp.dest('dest/style.css'));
});

1. 首先，我们导入主要的PostCSS模块。
2. 接下来，我们添加我们要使用的PostCSS插件（在这个简短示例中，我们只用了Autoprefixer）。

npm install gulp-postcss autoprefixer --save-dev

选择插件

• Autoprefixer – 可能是最受欢迎的PostCSS插件，用于添加所需的浏览器供应商前缀。正如开始时已经提到的那样，您很有可能已经在使用此PostCSS插件。

.box {
  display: flex;
}
 
// 处理后的结果
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

• Stylelint – 一种 lint插件，可用于维护一致的格式约定并避免样式表中的错误。

• postcss-simple-vars
  

$blue: #056ef0;
$column: 200px;
 
.menu_link {
    background: $blue;
    width: $column;
}
 
// 处理后的结果
.menu_link {
    background: #056ef0;
    width: 200px;
}

• postcss-nested
  

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
    }
}
 
// 处理后的结果
.phone_title {
    width: 500px;
}
@media (max-width: 500px) {
    .phone_title {
        width: auto;
    }
}

• Postcss-mixins 用于mixins的PostCSS插件。

@define-mixin icon $network, $color: blue {
    .icon.is-$(network) {
        color: $color;
        @mixin-content;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}
 
@mixin icon twitter {
    background: url(twt.png);
}
@mixin icon youtube, red {
    background: url(youtube.png);
}
 
// 处理后的结果
.icon.is-twitter {
    color: blue;
    background: url(twt.png);
}
.icon.is-twitter:hover {
    color: white;
    background: blue;
}
.icon.is-youtube {
    color: red;
    background: url(youtube.png);
}
.icon.is-youtube:hover {
    color: white;
    background: red;
}

• 自定义属性设置： @apply
• 自定义属性： var（）
• 自定义选择器
• color() 函数
• :any-link伪类等

// 自定义属性设置：@apply
:root {
  --danger-theme: {
    color: white;
    background-color: red;
  };
}
 
.danger {
  @apply --danger-theme;
}

为什么要使用PostCSS？

• 速度– 尽管Sass的速度已经显著提高（例如LibSass），但PostCSS仍然是赢家
• 模块化– 减少臃肿；您只包括所需的功能
• 轻巧– 相比Sass
• 即刻实现– 如果您想要新功能，则不必等待Sass更新；您可以更新自己的Sass

• 复杂性增加– 需要更多规划（例如，必须按特定顺序调用插件）
• 要学习一种不同的语法（与Sass相比）
• PostCSS处理需要没有错误的CSS

下一步该学什么