Neutrinos Peludos Magnéticos
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    postcss-conditionalspublic

    postcss-conditionals Build Status

    PostCSS plugin that enables @if statements in your CSS.

    Installation

    npm install postcss-conditionals

    Usage

    var fs = require('fs');
    var postcss = require('postcss');
    var conditionals = require('postcss-conditionals');
     
    var css = fs.readFileSync('input.css', 'utf8');
     
    var output = postcss()
      .use(conditionals)
      .process(css)
      .css;

    Using this input.css:

    .foo {
      @if 3 < 5 {
        background: green;
      }
      @else {
        background: blue;
      }
    }

    you will get:

    .foo {
      background: green;
    }

    Also works well with postcss-simple-vars:

    $type: monster;
    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
        color: green;
      } @else {
        color: black;
      }
    }

    and with postcss-for:

    @for $i from 1 to 3 {
      .b-$i {
        width: $i px;
        @if $i == 2 {
          color: green;
        }
      }
    }

    Development

    1. Clone repository
    2. Install dependencies npm install
    3. If parser.jison file has been changed, regenerate parser.js by running npm run gen-parser

    install

    npm i postcss-conditionals

    Downloadsweekly downloads

    9,232

    version

    2.1.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar