quantity-queries 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 45871b8e3e5fb9423cd4442fc864fcce8862089f
+  data.tar.gz: f9f539ba2312ac0a423a0e66e8e38549aef3379a
+SHA512:
+  metadata.gz: 8a7d72153c37f092a500831ea079db6ba52c736b3a0cf346e4a75e458f9cf9c7e4061766983a046c9753502f3c3e3d13fd2bb72bcbb4e17b15b67a2c220d8b0b
+  data.tar.gz: 517b3c53fde2508e30387f8482ad31f4964e5bbfe4ed7cd58d0d18a597cea91484cb5111b2fe0a86650dc3c71741c183f441a34b9d8b22964318cc140aa1e687

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0
+
+* Initial release

data/README.md

@@ -0,0 +1,88 @@
+# Quantity Queries mixins
+
+Simple item quantity queries mixins for Sass.
+
+[![Build Status](https://travis-ci.org/danielguillan/quantity-queries.svg?branch=master)](https://travis-ci.org/danielguillan/quantity-queries)
+
+## Install
+
+There are 3 ways of installing the Quantity Queries mixins:
+
+### Download
+
+Download [_quantity-queries.scss](/stylesheets/_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 N items or more:
+
+	@include at-least($count) { ... }
+
+
+### at-most
+
+Target the items inside elements that contain N items or less:
+
+	@include nope($count) { ... }
+
+
+### between
+
+Target the items inside elements that contain between X and Y items:
+
+	@include between($at-least, $at-most) { ... }
+
+### Example
+
+Sass input:
+
+```scss
+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;
+	}
+}
+```
+
+### Custom selector
+
+The quantity query mixins assume you want to use the current simple selector for
+all your items by default. `li` in the previous example. If you need a diffrent
+selector or want it to be selector agnostic (a.k.a. the universal selector: `*`)
+you just need to pass it in the mixin:
+
+```scss
+
+	nav div {
+		@include at-leat(4, '*'); // selector agnostic
+		@include between(4, 8, 'span'); // use span instead of div
+	}

data/lib/quantity-queries.rb

@@ -0,0 +1,8 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('quantity-queries', :path => extension_path)
+
+module QuantityQueries
+  VERSION = "0.1.0"
+  DATE = "2015-03-04"
+end

data/stylesheets/_quantity-queries.scss

@@ -0,0 +1,187 @@
+// -----------------------------------------------------------------------------
+// Quantity queries
+// -----------------------------------------------------------------------------
+// Table of contents:
+// 1. Last Simple Selector
+// 2. Build Quantity Selector
+// 3. At least
+// 4. At most
+// 5. Between
+
+
+// -----------------------------------------------------------------------------
+// 1. Last Simple Selector
+// -----------------------------------------------------------------------------
+
+/// Find the last simple selector in a given selector
+/// @access private
+/// @param  {list | string} $selector - A single selector
+/// @return {string}                  - The last simple selector in $selector
+/// @example scss
+///   $result: _last-simple-selector(ul > li); // returns 'li'
+/// @todo: check that $selector is a valid list with a single selector
+
+@function _last-simple-selector($selector) {
+    $parsed: selector-parse($selector);
+
+    @if length($parsed) > 1 {
+      @error '`#{$selector}` contains #{length($parsed)} selectors and the `_last-simple-selector()`function accepts only 1.';
+    }
+    $last-simple-selector: nth(nth($parsed, 1), -1);
+
+    @return $last-simple-selector;
+}
+
+
+// -----------------------------------------------------------------------------
+// 2. Build Quantity Selector
+// -----------------------------------------------------------------------------
+
+/// Builds the selector for the quantity query
+/// @access private
+/// @param  {string} $selector-append      - The selector to append
+/// @param  {string} $last-selector        - The last selector to use (item)
+/// @return {list}                         - The complete quantity query selector
+
+@function _build-quantity-selector($selector-append, $last-selector) {
+    $quantity-selector: ();
+
+    @each $s in & {
+        $last-simple-selector: '~' + if($last-selector, $last-selector, _last-simple-selector($s));
+        $sel: selector-append($s, $selector-append);
+        $sel2: selector-nest($sel, $last-simple-selector);
+        $quantity-selector: append($quantity-selector, $sel, 'comma');
+        $quantity-selector: append($quantity-selector, $sel2 , 'comma');
+    }
+
+    @return $quantity-selector;
+}
+
+
+// -----------------------------------------------------------------------------
+// 3. At least
+// -----------------------------------------------------------------------------
+
+/// Query when total items is at least N items
+/// @param  {number} $count - Quantity to match (equal or more)
+/// @example scss - Make the items color red when there are 4 items or more
+///   ul li {
+///     @include at-least(4) { color: red; }
+///   }
+/// @example scss - Make the items color blue when there are 6 items or more and use '*' (element agnostic) as the item selector
+///   ul li {
+///     @include at-least(6, '*') { color: blue; }
+///   }
+
+@mixin at-least($count, $selector: null) {
+    $selector-append: ':nth-last-child(n+#{$count})';
+
+    @if type-of($count) != 'number' {
+        @error '`#{$count}` is not a valid number for at-least() mixin.';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for at-least($count, $selector)';
+    }
+
+    $at-least-selector: _build-quantity-selector($selector-append, $selector);
+
+
+    @at-root #{$at-least-selector} {
+        @content;
+    }
+}
+
+
+// -----------------------------------------------------------------------------
+// 4. At most
+// -----------------------------------------------------------------------------
+
+/// Query when total items is at most N items
+/// @param  {number} $count - Quantity to match (equal or less)
+/// @example scss - Make the items color red when there are 4 items or less
+///   ul li {
+///     @include at-most(4) { color: red; }
+///   }
+/// @example scss - Make the items color blue when there are 6 items or less and use '*' (element agnostic) as the item selector
+///   ul li {
+///     @include at-most(6, '*') { color: blue; }
+///   }
+
+@mixin at-most($count, $selector: null) {
+    $selector-append: ':nth-last-child(-n+#{$count}):first-child';
+
+    @if type-of($count) != 'number' {
+        @error '`#{$count}` is not a valid number for at-least() mixin.';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for at-least($count, $selector)';
+    }
+
+    $at-least-selector: _build-quantity-selector($selector-append, $selector);
+
+
+    @at-root #{$at-least-selector} {
+        @content;
+    }
+}
+
+
+// -----------------------------------------------------------------------------
+// 5. Between
+// -----------------------------------------------------------------------------
+
+/// Query when total items is at least X items and at most Y items
+/// @param  {number} $at-least - Lower quantity of items to match
+/// @param  {number} $at-most - Higher quantity of items to match
+/// @example scss - Make the items color red when there are at least 2 and at most 4 items
+///   ul li {
+///     @include between(4, 8) { color: red; }
+///   }
+/// @example scss - Make the items color blue when there are at least 6 items and at most 10 items and use '*' (element agnostic) as the item selector
+///   ul li {
+///     @include between(6, 10, '*') { color: blue; }
+///   }
+
+
+@mixin between($first, $last, $selector: null) {
+    $selector-append: ':nth-last-child(n+#{$first}):nth-last-child(-n+#{$last}):first-child';
+
+    @if $first > $last {
+        @error '#{$first} can´t be larger that #{$last} for in-between() mixin';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for at-least($count, $selector)';
+    }
+
+    $at-least-selector: _build-quantity-selector($selector-append, $selector);
+
+
+    @at-root #{$at-least-selector} {
+        @content;
+    }
+}
+
+
+// -----------------------------------------------------------------------------
+// Test
+// -----------------------------------------------------------------------------
+
+.nav > li,
+.nav > div {
+
+    @include at-most(3) {
+        color: green;
+    }
+
+    @include at-least(6) {
+        color: red;
+    }
+
+
+    @include between(4, 6) {
+        background-color: rgba(blue, .1);
+    }
+}

metadata

@@ -0,0 +1,76 @@
+--- !ruby/object:Gem::Specification
+name: quantity-queries
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Daniel Guillan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-03-04 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.4'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.0.0
+description: Simple item quantity queries mixins for Sass
+email:
+- daniel.guillan@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- README.md
+- lib/quantity-queries.rb
+- stylesheets/_quantity-queries.scss
+homepage: https://github.com/danielguillan/quantity-queries
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: quantity-queries
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Simple item quantity queries mixins for Sass
+test_files: []