sass-windmill

    2.0.1 • Public • Published

    Sass Windmill Build Status MIT licensed

    A Sass mixin that helps you define utility classes such as .mb-10 flexibly and quickly.

    Example:

    @import 'windmill';
     
    $wm-breakpoints: (
      all: 0,
      sm: 576px
    );
     
    $grid-columns: (
      4: 33%,
      8: 66%,
      12: 100% 
    );
     
    .BR-col-VAL {
      @include windmill((
        flex: 0 0 $grid-columns, 
        max-width: $grid-columns 
      )) {
        min-width: 0;
        word-break: break-word;
      }
    }

    Compiles to:

    .col-4.col-8.col-12 {
      min-width: 0;
      word-break: break-word;
    }
    .col-4 {
      flex: 0 0 33%;
      max-width: 33%;
    }
    .col-8 {
      flex: 0 0 66%;
      max-width: 66%;
    }
    .col-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
     
    @media (min-width: 576px) {
      .sm-col-4.sm-col-8.sm-col-12 {
        min-width: 0;
        word-break: break-word;
      }
      .sm-col-4 {
        flex: 0 0 33%;
        max-width: 33%;
      }
      .sm-col-8 {
        flex: 0 0 66%;
        max-width: 66%;
      }
      .sm-col-12 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

    Table of Contents

    How to get started

    Immediately play with it on CodePen.

    OR:

    1. Install:

      • with npm: npm i sass-windmill
      • with yarn: yarn add sass-windmill
    2. Import the partial in your Sass files:

      @import 'node_modules/sass-windmill/sass/windmill';
    3. Override default settings with your own preferences.
      Default settings:

      // A map of (name: screen width), 
      // if screen width <= 0, CSS rules are output outside @media blocks 
      $wm-breakpoints: (
        all: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
      !default;
       
      // Placeholder to include in the selector, 
      // replaced by the breakpoint name 
      $wm-breakpoint-placeholder: 'BR' !default;
       
      // Placeholder to include in the selector, 
      // replaced by the value name 
      $wm-val-placeholder: 'VAL' !default;
       
      // For minimum screen width, the number of strings to be removed 
      // from the selector with `$wm-breakpoint-placeholder` 
      //  0: .foo-BR-bar => .foo--bar 
      //  1: .foo-BR-bar => .foo-bar 
      // -1: .foo-BR-bar => .foo-bar 
      $wm-min-breakpoint-addition: 1 !default;
       
      // If you want output error messages into CSS files 
      // instead of the terminal, set `true` 
      $wm-error-to-css: false !default;
       
      // If you want to display error messages in the your site, set `true` 
      $wm-show-error: false !default;
    4. Use windmill() (see below)

    Usage

    $wm-breakpoints is a map of (name: screen width).
    If you set the breakpoints, windmill() replaces BR placeholder in the selector with key names and outputs CSS rules to each breakpoints:

    $wm-breakpoints: (
      all: 0,
      sm: 576px
    );
     
    .BR-foo {
      @include windmill() {
        display: block;
      }
    }

    Compiles to:

    .foo {
      display: block;
    }
     
    @media (min-width: 576px) {
      .sm-foo {
        display: block;
      }
    }

    If you want to change Media Query mixin:

    @mixin wm-override-mq($from) {
      @include your-mq($from) {
        @content;
      }
    }

    $style parameter of windmill($style, $selector, $breakpoints) is general CSS declarations block. The only difference is that the value accepts map such as margin: (1: 10px, 2: 20px).
    If map is included, windmill() replaces VAL placeholder in the selector with key names, embeds the value in $style, and outputs CSS rules:

    .foo-VAL {
      @include windmill((
        margin: 0 (1: 10px, 2: 20px) auto
      ));
    }

    Compiles to:

    .foo-1 {
      margin: 0 10px auto;
    }
    .foo-2 {
      margin: 0 20px auto;
    }

    Parameters

    windmill() takes up 3 parameters:

    1. $style: general CSS declarations block

    2. $selector: the selector to use instead of .foo { @include ... }

      @include windmill($selector: '.BR-foo') {
        display: block;
      }
    3. $breakpoints: the breakpoints to use instead of $wm-breakpoints

      $wm-breakpoints: (
        all: 0,
        sm: 576px
      );
       
      .BR-foo {
        @include windmill($breakpoints: (
          all: 0,  
          sm: 600px 
        )) {
          display: block;
        }
      }

      Compiles to:

      .foo {
        display: block;
      }
       
      @media (min-width: 600px) {
        .sm-foo {
          display: block;
        }
      }

    Running tests

    npm test

    License

    This software is released under the MIT License, see LICENSE.

    Install

    npm i sass-windmill

    DownloadsWeekly Downloads

    0

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • rikuota