Simple quantity queries mixins for Sass
CSS Ruby
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 Bump version 0.4.0 Mar 9, 2015
stylesheets
tests Merge branch 'mixin-exactly' of https://github.com/adjohnson916/quant… Mar 9, 2015
.gitignore Ignore Gemfile.lock Mar 7, 2015
.travis.yml Initial commit Mar 4, 2015
CHANGELOG.md Bump version 0.4.0 Mar 9, 2015
Gemfile Initial commit Mar 4, 2015
LICENSE Initial commit Mar 4, 2015
README.md Move build badge near title in README Mar 26, 2015
Rakefile Initial commit Mar 4, 2015
bower.json Bump version 0.4.0 Mar 9, 2015
compositor.json Update compositor.json Nov 12, 2017
package.json Add package.json for npm with eyeglass metadata. Jan 2, 2017
quantity-queries.gemspec Fix pessimistic dependency on Compass Mar 9, 2015
sache.json Initial commit Mar 4, 2015

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