Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    quantity-queries

    0.5.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    Quantity Queries mixins Build Status

    Simple quantity queries mixins for Sass. Use quantity as a condition to style your items. Learn more about quantity queries in this A List Apart article. See the mixins in action in this CodePen Demo

    Install

    There are 3 ways of installing the Quantity Queries mixins:

    Download

    Download _quantity-queries.scss and place it in your Sass directory.

    Bower

    Run the following command:

    bower install --save-dev quantity-queries
    

    Compass extension

    1. gem install quantity-queries
    2. Add require 'quantity-queries' to your config.rb

    Usage

    Import it into your main stylesheet:

    @import 'quantity-queries';
    

    at-least()

    Target the items inside elements that contain $count items or more:

    @include at-least($count) { ... }
    

    at-most()

    Target the items inside elements that contain $count items or less:

    @include at-most($count) { ... }
    

    between()

    Target the items inside elements that contain a range between $first and $last items:

    @include between($first, $last) { ... }
    

    exactly()

    Target the items inside elements that contain exactly $count items:

    @include exactly($count) { ... }
    

    Example

    Sass input:

    ul > li {
     
        // Color the `li` items red when there are 6 items or more 
        @include at-least(6) {
            color: red;
        }
     
        // Color the `li` items blue when there are 4 items or less 
        @include at-most(4) {
            color: blue;
        }
     
        // Add a green background to `li` items when there are between 5 and 8 items 
        @include between(5, 8) {
            background-color: green;
        }
     
        // Add a shadow to `li` items when there are exactly 8 items 
        @include exactly(8) {
            box-shadow: 0 1px 3px #000;
        }
    }

    Custom selector

    The quantity query mixins assume you want to use the current last simple selector for all the items by default (li in the above example). If you need a different selector or want the quantity query to be selector agnostic pass the desired selector to the mixin.

     
        nav div {
            @include at-least(4, '*') { ... }; // selector agnostic (universal selector) 
            @include between(4, 8, 'span') { ... }; // use span instead of div 
        }

    Demo on CodePen

    Other implementations

    LESS Quantity Queries by Anders D. Johnson

    PostCSS Quantity Queries by Pascal Duez

    Install

    npm i quantity-queries

    DownloadsWeekly Downloads

    5

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar