andyjansson / postcss-sassy-mixins Goto Github PK

Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Node#removeSelf is deprecated. Use Node#remove.

@mixin hover($color: null) {
    &:hover {
        text-decoration: underline
        color: $color;
        @content;
    }
}
label {
    @include hover(blue);        // no `@content` (i.e. {}) defined`
}

@mixin paint($color){
    color: $color;
}
.icon {@include paint(  var(--color-primary) )}

=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

@mixin rem($px) {
    ($px/16) * 1rem;
}

.header {
  font-size: @include rem(75)
}

var webpack         = require('webpack');
var precss          = require('precss');
var autoprefixer    = require('autoprefixer');
var mixins          = require('postcss-sassy-mixins');

module.exports = {

  module: {
    loaders: [
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [precss, mixins, autoprefixer];
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        CLIENT: JSON.stringify(true)
      }
    })
  ],
};