quantity-queries 0.2 → 0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +6 -5
- data/lib/quantity-queries.rb +1 -1
- data/stylesheets/_quantity-queries.scss +14 -7
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 27af58380f1095ba6712bdee07903c8cbfa16e8a
|
4
|
+
data.tar.gz: 093e7c311fb519136ba5de27313d981d78048498
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 64ce70879377bc8ffcebee73fb86654d6e1e60bfc9cef825e7c15ffa83af9f693289dc8796dbb0920ce42815705982ead37ea1de14ed36ac02820549c2163230
|
7
|
+
data.tar.gz: 3c2e04017c8979fd4e0a22224756d06a5494e4593b210e6c45cac1500560311733434e496cc05f227a86e88a619a9c0229dee52820964cc890ac0337a9571407
|
data/README.md
CHANGED
@@ -1,8 +1,6 @@
|
|
1
1
|
# Quantity Queries mixins
|
2
2
|
|
3
|
-
Simple quantity queries mixins for Sass. Use quantity as a condition. Learn more about quantity queries in this [http://alistapart.com/article/quantity-queries-for-css
|
4
|
-
|
5
|
-
[](https://travis-ci.org/danielguillan/quantity-queries)
|
3
|
+
Simple quantity queries mixins for Sass. Use quantity as a condition. Learn more about quantity queries in this [A List Apart article](http://alistapart.com/article/quantity-queries-for-css).
|
6
4
|
|
7
5
|
## Install
|
8
6
|
|
@@ -83,6 +81,9 @@ you just need to pass it in the mixin:
|
|
83
81
|
```scss
|
84
82
|
|
85
83
|
nav div {
|
86
|
-
@include at-leat(4, '*'); // selector agnostic
|
87
|
-
@include between(4, 8, 'span'); // use span instead of div
|
84
|
+
@include at-leat(4, '*') { ... }; // selector agnostic
|
85
|
+
@include between(4, 8, 'span') { ... }; // use span instead of div
|
88
86
|
}
|
87
|
+
```
|
88
|
+
|
89
|
+
### Demo on [CodePen](http://codepen.io/danielguillan/pen/GgBOxm)
|
data/lib/quantity-queries.rb
CHANGED
@@ -18,8 +18,7 @@
|
|
18
18
|
/// @param {list | string} $selector - A single selector
|
19
19
|
/// @return {string} - The last simple selector in $selector
|
20
20
|
/// @example scss
|
21
|
-
/// $result: _last-simple-selector(ul > li); //
|
22
|
-
/// @todo: check that $selector is a valid list with a single selector
|
21
|
+
/// $result: _last-simple-selector(ul > li); // li
|
23
22
|
|
24
23
|
@function _last-simple-selector($selector) {
|
25
24
|
$parsed: selector-parse($selector);
|
@@ -39,9 +38,9 @@
|
|
39
38
|
|
40
39
|
/// Builds the selector for the quantity query
|
41
40
|
/// @access private
|
42
|
-
/// @param {string} $selector-append - The selector to
|
43
|
-
/// @param {string} $last-selector - The
|
44
|
-
/// @return {list} - The
|
41
|
+
/// @param {string} $selector-append - The selector to be appended
|
42
|
+
/// @param {string} $last-selector - The item's selector
|
43
|
+
/// @return {list} - The final quantity query selector
|
45
44
|
|
46
45
|
@function _build-quantity-selector($selector-append, $last-selector) {
|
47
46
|
$quantity-selector: ();
|
@@ -76,7 +75,7 @@
|
|
76
75
|
@mixin at-least($count, $selector: null) {
|
77
76
|
$selector-append: ':nth-last-child(n+#{$count})';
|
78
77
|
|
79
|
-
@if type-of($count) != 'number' {
|
78
|
+
@if type-of($count) != 'number' or not unitless($count) or $count < 1 {
|
80
79
|
@error '`#{$count}` is not a valid number for `at-leat`';
|
81
80
|
}
|
82
81
|
|
@@ -111,7 +110,7 @@
|
|
111
110
|
@mixin at-most($count, $selector: null) {
|
112
111
|
$selector-append: ':nth-last-child(-n+#{$count}):first-child';
|
113
112
|
|
114
|
-
@if type-of($count) != 'number' {
|
113
|
+
@if type-of($count) != 'number' or not unitless($count) or $count < 1 {
|
115
114
|
@error '`#{$count}` is not a valid number for `at-most`.';
|
116
115
|
}
|
117
116
|
|
@@ -148,6 +147,14 @@
|
|
148
147
|
@mixin between($first, $last, $selector: null) {
|
149
148
|
$selector-append: ':nth-last-child(n+#{$first}):nth-last-child(-n+#{$last}):first-child';
|
150
149
|
|
150
|
+
@if type-of($first) != 'number' or not unitless($first) or $first < 1 {
|
151
|
+
@error '`#{$first}` is not a valid number for `at-leat`';
|
152
|
+
}
|
153
|
+
|
154
|
+
@if type-of($last) != 'number' or not unitless($last) or $last < 1 {
|
155
|
+
@error '`#{$last}` is not a valid number for `at-leat`';
|
156
|
+
}
|
157
|
+
|
151
158
|
@if $first > $last {
|
152
159
|
@error '#{$first} can´t be larger that #{$last} for `between`';
|
153
160
|
}
|