https://github.com/lightyrs/sprockets-postcss-essentials

Sprockets PostCSS extension with essential plugins (variables, nesting, mixins)
https://github.com/lightyrs/sprockets-postcss-essentials

Last synced: 14 days ago
JSON representation

Sprockets PostCSS extension with essential plugins (variables, nesting, mixins)

• Host: GitHub
• URL: https://github.com/lightyrs/sprockets-postcss-essentials
• Owner: lightyrs
• License: mit
• Created: 2015-04-25T04:51:27.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-03-01T20:53:10.000Z (over 9 years ago)
• Last Synced: 2024-04-15T12:17:28.185Z (7 months ago)
• Language: Ruby
• Size: 250 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sprockets PostCSS Essentials

Sprockets [PostCSS](https://github.com/postcss/postcss) extension with support for essential features:

* variables — [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars)

* `@import` — [postcss-import](https://github.com/postcss/postcss-import)

* SASS-like nesting — [postcss-nested](https://github.com/postcss/postcss-nested)

* mixins — [postcss-mixins](https://github.com/postcss/postcss-mixins)

* color functions — [postcss-color-function](https://github.com/postcss/postcss-color-function)

## Installation

### Rails

Add `sprockets_postcss_essentials` to your `Gemfile`:

```ruby

gem "sprockets_postcss_essentials", github: "vast/sprockets-postcss-essentials"

```

### Sprockets

If you use a non-Rails framework with Sprockets, connect Sprockets environment with `SprocketsPostcssEssentials`:

```ruby

assets = Sprockets::Environment.new do |env|

  # ...

end

require "sprockets_postcss_essentials"

SprocketsPostcssEssentials.install(assets)

```

## Usage

Write your styles in `.postcss` files:

```scss

/*

* Regular Sprockets directives still work in .postcss files.

*= require foo

*/

@import "core/typography";

@import "core/layout";

/* Define mixins with `@define-mixin` at-rule: */

@define-mixin clearfix {

  &:before, &:after {

    content: "";

    display: table;

  }

  &:after {

    clear: both;

  }

}

/* define $variables like any other CSS property */

$footer-color: color(#03709a, blackness(+20%))

.footer {

  @mixin clearfix; /* include mixin styles */

  color: $footer-color;

  &-logo {

    display: inline-block;

  }

}

```