Simple quantity queries mixins for Sass
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
stylesheets
tests
.gitignore
.travis.yml
CHANGELOG.md
Gemfile
LICENSE
README.md
Rakefile
bower.json
compositor.json
package.json
quantity-queries.gemspec
sache.json

README.md

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