0.0.2 • Published 9 years ago
postcss-sassy v0.0.2
PostCSS Sassy
PostCSS Sassy is a PostCSS plugin pack that allows you to use Sass-like markup in your CSS files.
The Sass syntax allows you to use variables, mixins, conditionals, and other goodies.
Variables
/* before */
$blue: #056ef0;
$column: 200px;
.menu {
width: calc(4 * $column);
}
.menu_link {
background: $blue;
width: $column;
}
/* after */
.menu {
width: calc(4 * 200px);
}
.menu_link {
background: #056ef0;
width: 200px;
}
Conditionals
/* before */
.foo {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}
/* after */
.foo {
background: green;
}
/* before */
@for $i from 1 to 3 {
.b-$i { width: $(i)px; }
}
/* after */
.b-1 {
width: 1px
}
.b-2 {
width: 2px
}
.b-3 {
width: 3px
}
/* before */
@each $icon in (foo, bar, baz) {
.icon-$(icon) {
background: url('icons/$(icon).png');
}
}
/* after */
.icon-foo {
background: url('icons/foo.png');
}
.icon-bar {
background: url('icons/bar.png');
}
.icon-baz {
background: url('icons/baz.png');
}
Mixins
/* before */
@define-mixin icon $name {
padding-left: 16px;
&::after {
content: "";
background-url: url(/icons/$(name).png);
}
}
.search {
@mixin icon search;
}
/* after */
magic {}
Imports
/* Before */
@import "partials/_base.css"; /* Contents of _base: `body { background: black; }` */
/* After */
body { background: black; }
Usage
You just need to follow these two steps to use PostCSS Sassy:
- Add PostCSS to your build tool.
- Add PostCSS Sassy as a PostCSS process.
npm install postcss-sassy --save-dev
Node
postcss([ require('postcss-sassy')({ /* options */ }) ])
Grunt
Add Grunt PostCSS to your build tool:
npm install postcss-sassy --save-dev
Enable PostCSS Sassy within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-sassy')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});
Differences between Sassy and Sass
...
Options
...