sassmagic 0.1.5 → 0.1.6

data/lib/sassmagic.rb

@@ -16,7 +16,7 @@ ENV['SASS_ENV'] ||= 'development'
 $:.unshift(load_path + '/')
 
 
-# require 'sass'
+require 'sass'
 
 require 'sassmagic/utils'
 require 'sassmagic/remote'

data/stylesheets/sassmagic/README.md

@@ -1,4 +1,4 @@
-##目录结构
+## 目录结构
 
 		sassmagic/
 		|
@@ -47,48 +47,48 @@
 		|
 		`– main.scss             # primary Sass file
 
-###目录结构描述
+### 目录结构描述
 
 目录结构采用的是常见的7-1模式的结构：7个文件夹，1个文件。基本上，你需要将所有的部件放进7个不同的文件夹和一个位于根目录的文件（通常命名为 main.scss）中——这个文件编译时会引用所有文件夹而形成一个CSS样式表。
 
-####base
+#### base
 
 `base/`文件夹存放项目中的模板文件。在这里，可以找到重置文件、排版规范文件或者一个样式表（我通常命名为`_base.scss`）——定义一些HTML元素公认的标准样式。
 
-####components
+#### components
 
 对于小型组件来说，有一个`components/`文件夹来存放。相对于`partials/`的宏观（定义全局线框结构），`components/`更专注于局部组件。该文件夹包含各类具体模块，基本上是所有的独立模块，比如一个滑块、一个加载块、一个部件……由于整个网站或应用程序主要由微型模块构成，`components/`中往往有大量文件。
 
-####partials
+#### partials
 
 `partials/`文件夹存放构建网站或者应用程序使用到的布局部分。该文件夹存放网站主体（头部、尾部、导航栏、侧边栏...）的样式表、栅格系统甚至是所有表单的CSS样式。(备注：常常也命名为`layout/`)。
 
-####pages
+#### pages
 
 如果页面有特定的样式，最好将该样式文件放进`pages/`文件夹并用页面名字。例如，主页通常具有独特的样式，因此可以在`pages/`下包含一个`_home.scss`以实现需求。
 
-####themes
+#### themes
 
 在大型网站和应用程序中，往往有多种主题。虽有多种方式管理这些主题，但是我个人更喜欢把它们存放在`themes/`文件夹中。
 
-####helpers
+#### helpers
 
 `helpers/`文件夹包含了整个项目中使用到的Sass辅助工具，这里存放着每一个全局变量、函数、混合宏和占位符。(备注，常常也命名为`utils/`)
 
 该文件夹的经验法则是，编译后这里不应该输出任何CSS，单纯的只是一些Sass辅助工具。
 
-####vendors
+#### vendors
 
 最后但并非最终的，大多数的项目都有一个`vendors/`文件夹，用来存放所有外部库和框架（Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……）的CSS文件。将这些文件放在同一个文件中是一个很好的说明方式:"嘿，这些不是我的代码，无关我的责任。"
 
 如果你重写了任何库或框架的部分，建议设置第8个文件夹`vendors-extensions/`来存放，并使用相同的名字命名。例如，`vendors-extensions/_boostrap.scss`文件存放所有重写Bootstrap默认CSS之后的CSS规则。这是为了避免在原库或者框架文件中进行二次编辑。
 
-####main.scss
+#### main.scss
 
 主文件（通常写作`main.scss`，也常常命名为`style.scss`）应该是整个代码库中唯一开头不用下划线命名的Sass文件。除 `@import`和注释外，该文件不应该包含任何其他代码。
 
 
-#####main.scss文件引入顺序
+##### main.scss文件引入顺序
 
 文件应该按照存在的位置顺序依次被引用进来：
 

data/stylesheets/sassmagic/base/_reset.scss

@@ -0,0 +1,285 @@
+// sanitize.scss: https://github.com/jonathantneal/sanitize.css/blob/master/sanitize.scss
+// normalize.scss: https://github.com/kristerkari/normalize.scss/blob/master/_normalize.scss
+
+// Define variables
+
+$root-box-sizing: border-box !default;
+$root-cursor: default !default;
+$root-font-family: sans-serif !default;
+$root-font-size: 16px !default;
+$root-line-height: 1.5 !default;
+$root-text-rendering: optimizeLegibility !default;
+
+$anchor-text-decoration: none !default;
+$form-element-background-color: transparent !default;
+$form-element-min-height: if(unitless($root-line-height), #{$root-line-height}em, if(unit($root-line-height) != '%', $root-line-height, null)) !default;
+$media-element-vertical-align: middle !default;
+$monospace-font-family: monospace !default;
+$nav-list-style: none !default;
+$small-font-size: 75% !default;
+$table-border-collapse: collapse !default;
+$table-border-spacing: 0 !default;
+$textarea-resize: vertical !default;
+
+:root {
+	-ms-overflow-style: -ms-autohiding-scrollbar; // IE11+
+	overflow-y: scroll; // All browsers without overlaying scrollbars
+	text-size-adjust: 100%; // iOS 8+
+}
+
+//details: // Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+
+//main:  Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+
+//summary: // Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+
+
+details,main,summary {
+	display: block; 
+}
+
+//template: Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+
+//[hidden]:Internet Explorer 10-
+
+template, [hidden] {
+	display: none;
+}
+audio:not([controls]){
+	display: none; //Chrome 40+, iOS 8+, Safari 8+
+	height: 0; //Remove excess height in iOS5 devices
+}
+
+input {
+	&[type="number"] {
+		width: auto; // Firefox 36+
+	}
+
+	&[type="search"] {
+		-webkit-appearance: textfield; // Safari 8+
+
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-decoration {
+			-webkit-appearance: none; // Safari 8+
+		}
+	}
+}
+
+
+
+pre {
+	overflow: auto; // Internet Explorer 11+
+}
+
+progress {
+	display: inline-block; // Internet Explorer 11+, Windows Phone 8.1+
+}
+
+small {
+	font-size: $small-font-size; // All browsers
+}
+
+
+textarea {
+	overflow: auto; // Internet Explorer 11+
+}
+
+
+[unselectable] {
+	user-select: none; // Android 4.4+, Chrome 40+, Firefox 36+, iOS 8+, Safari 8+
+}
+
+
+/*
+ * Universal inheritance
+ */
+
+*,
+::before,
+::after {
+	box-sizing: inherit;
+}
+
+* {
+	font-size: inherit;
+	line-height: inherit;
+}
+
+::before,
+::after {
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+
+
+//Opinionated defaults
+
+
+// specify solid border style of all elements
+
+*,
+::before,
+::after {
+	border-style: solid;
+	border-width: 0;
+}
+
+// remove margin and padding of all elements
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+// specify the root styles of the document
+
+:root {
+	box-sizing: $root-box-sizing;
+	cursor: $root-cursor;
+	font: #{$root-font-size}/#{$root-line-height} $root-font-family;
+	text-rendering: $root-text-rendering;
+}
+
+// specify the text decoration of anchors
+
+a {
+	text-decoration: $anchor-text-decoration;
+}
+
+// specify media element style
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+	vertical-align: $media-element-vertical-align;
+}
+
+// specify the background color of form elements
+
+button,
+input,
+select,
+textarea {
+	background-color: $form-element-background-color;
+}
+
+// specify inheritance of form elements
+
+button,
+input,
+select,
+textarea {
+	color: inherit;
+	font-family: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	min-height: $form-element-min-height; // specify the minimum height of form elements
+}
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls
+// 2. Corrects inability to style clickable 'input' types in iOS
+// 3. Improves usability and consistency of cursor style between image-type
+//    'input' and others
+//    Known issue: inner spacing remains in IE6
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; // 2
+    cursor: pointer; // 3
+}
+
+// Re-set default cursor for disabled elements
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+input {
+    // 1. Addresses appearance set to searchfield in S5, Chrome
+    // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
+    &[type="search"] {
+        -webkit-appearance: textfield; // 1
+        -webkit-box-sizing: content-box; // 2
+        box-sizing: content-box;
+        
+    	// Remove inner padding and search cancel button in Safari 5 and Chrome
+        // on OS X.
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-decoration {
+            -webkit-appearance: none;
+        }
+    }
+    
+    // 1. Address box sizing set to `content-box` in IE 8/9/10.
+    // 2. Remove excess padding in IE 8/9/10.
+    &[type="checkbox"],
+    &[type="radio"] {
+    	box-sizing: border-box; // 1
+    	padding: 0; // 2
+    }
+}
+
+// specify the font family of code elements
+
+code,
+kbd,
+pre,
+samp {
+	font-family: $monospace-font-family, monospace;
+}
+
+// specify the list style of nav lists
+
+nav ol,
+nav ul {
+	list-style: $nav-list-style;
+}
+
+// style select like a standard input
+
+select {
+	-moz-appearance: none;    // Firefox 36+
+	-webkit-appearance: none; // Chrome 41+
+
+	&::-ms-expand {
+		display: none;        // Internet Explorer 11+
+	}
+
+	&::-ms-value {
+		color: currentColor;  // Internet Explorer 11+
+	}
+}
+
+// specify the border styles of tables
+
+table {
+	border-collapse: $table-border-collapse;
+	border-spacing: $table-border-spacing;
+}
+
+// specify textarea resizability
+
+textarea {
+	resize: $textarea-resize;
+}
+
+img {
+	border: 0;
+}
+
+// hide content from screens but not screenreaders
+
+@media screen {
+	[hidden~="screen"] {
+		display: inherit;
+	}
+
+	[hidden~="screen"]:not(:active):not(:focus):not(:target) {
+		clip: rect(0 0 0 0) !important;
+		position: absolute !important;
+	}
+}

data/stylesheets/sassmagic/helpers/_helpers.scss

@@ -1,24 +1,22 @@
 //pull-left
 %pull-left {
-	@include float(left);
+    @include float(left);
 }
 
 //pull-right
-
 %pull-right {
-	@include float(right);
+    @include float(right);
 }
 
 //clearfix
-
 %clearfix {
-	&:before,
-	&:after {
-		content:"";
-		display: table;
-	}
-	&:after {
-		overflow: hidden;
-		clear: both;
-	}
+    &:before,
+    &:after {
+        content:"";
+        display: table;
+    }
+    &:after {
+        overflow: hidden;
+        clear: both;
+    }
 }

data/stylesheets/sassmagic/helpers/_mixins.scss

@@ -1,4 +1,5 @@
 @import "mixins/backgroundTransparent";
 @import "mixins/ellipsis-overflow";
 @import "mixins/float";
+@import "mixins/triangle";
 @import "mixins/px2rem";

data/stylesheets/sassmagic/helpers/mixins/README.md

@@ -1,28 +1,29 @@
-#Mixins使用方法
+# Mixins使用方法
 
 Sass中的mixins默认情况下可以不调用任何参数，此时调用的参数为定义mixins是设置的参数；第二种情形是调用是指定参数。Sass调用mixins都是通过`@include`关键词。
 
-###1. ellipsis-overflow
+### 1. ellipsis-overflow
 
-####功能
+#### 功能
 
 字符截取，末尾出现三个`...`。
 
-####参数
+#### 参数
 
-定义`$substract`参数,默认值为`0`。指定元素需要去掉的宽度。
+- `$line`，行数，默认值为`1`。
+- `$substract`，指定元素需要去掉的宽度，默认值为`0`。
 
-####调用
+#### 调用
 
-调用默认参数值，也就是`$substract`值为0;
+调用默认参数值，也就是`$line`值为1，`$substract`值为0;
 
 		@include ellipsis-overflow;
 
 指定能数值调用：
 
-		@include ellipsis-overflow(20);
+		@include ellipsis-overflow(2); // 显示两行文字之后加省略号
 
-####示例
+#### 示例
 
 SCSS
 
@@ -39,18 +40,18 @@ CSS
 		  width: 80%;
 		}
 
-###2. float
+### 2. float
 
-####功能
+#### 功能
 
 设置元素浮动方向。
 
-####参数
+#### 参数
 
 - `$direction`: 定义浮动方向，默认值为`left`。可选值为`left`、`right`和`none`。
 - `$support-for-ie`:布尔值，默认值为`true`。可选值为`true`和`flase`。（如果不需要考虑兼容IE6,可以去掉这个参数）。
 
-####调用
+#### 调用
 
 默认调用方法：
 
@@ -60,7 +61,7 @@ CSS
 
 	@include float(right, false);
 
-####示例
+#### 示例
 
 SCSS
 
@@ -83,19 +84,19 @@ CSS
 		  float: right;
 		}
 
-###3.backgroundTransparent
+### 3.backgroundTransparent
 
-####功能
+#### 功能
 
 设置带有透明度的背景颜色。
 
-####参数
+#### 参数
 
 - `$color`: 背景颜色
 - `$opacity`: 透明度
 - `$support-for-ie`: 布尔值，默认`false`,如果需要兼容低版本浏览器，只需要将其设置为`true`
 
-####调用
+#### 调用
 
 默认调用方法：
 
@@ -105,7 +106,7 @@ CSS
 
 		@include backgroundTransparent(#000,.5,true);
 
-####示例
+#### 示例
 
 SCSS
 
@@ -117,4 +118,4 @@ CSS
 
 		.box {
 		  background-color: rgba(0, 0, 0, 0.5);
-		}
+		}

data/stylesheets/sassmagic/helpers/mixins/_backgroundTransparent.scss

@@ -1,12 +1,13 @@
 //Author：Janking　（https://github.com/Janking）
-
-//eg: https://gist.github.com/airen/040f6f06bcc8b3176d8a
-
+/// 设置背景透明
+/// @param  {[string]} $color         -       背景颜色
+/// @param  {[string]} $opacity       -       透明度
+/// @param  {[boolen]} $support-for-ie [false] 是否支持IE
+/// @link https://gist.github.com/airen/040f6f06bcc8b3176d8a
 @mixin backgroundTransparent($color,$opacity,$support-for-ie:false){
 	background-color:rgba($color,$opacity);
 	@if $support-for-ie{
 		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($color,$opacity))},endColorstr=#{ie-hex-str(rgba($color,$opacity))});
-		
 		:root & {
 			filter:none;
 		}

data/stylesheets/sassmagic/helpers/mixins/_content.scss

@@ -1,15 +1,18 @@
-//eg: https://gist.github.com/08bce58e9af2fa223118
-@mixin content($attr,$content:null){
-  @if $attr {
-    display: inline-block;
-    content: $attr;
-  }
-  @else if $content != null {
-    content: quote($content);
-    display: inline-block;
-  }
-  @else {
-    content: "";
-    display: table;
-  }
+/// 设置元素的content内容
+/// @param  {[string]} $attr         -       元素属性
+/// @param  {[string]} $content      [null]   内容值
+/// @link https://gist.github.com/08bce58e9af2fa223118
+@mixin content($attr, $content:null) {
+    @if $attr {
+        display: inline-block;
+        content: $attr;
+    }
+    @else if $content ! null {
+        content: quote($content);
+        display: inline-block;
+    }
+    @else {
+        content: "";
+        display: table;
+    }
 }

data/stylesheets/sassmagic/helpers/mixins/_ellipsis-overflow.scss

@@ -1,9 +1,9 @@
-//eg:https://gist.github.com/airen/caf49ca5c5e7743f9996
-
+/// 文字溢出省略号
+/// @param  {[string]} $substract         [0]     预留区域百分比%
+/// @link https://gist.github.com/airen/caf49ca5c5e7743f9996
 @mixin ellipsis-overflow($substract:0) {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100% - $substract;
-}
-
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100% - $substract;
+}

data/stylesheets/sassmagic/helpers/mixins/_float.scss

@@ -1,9 +1,10 @@
-//https://gist.github.com/airen/d7f8ad25c982750dcb86
-
-@mixin float($direction: left,$support-for-ie:true){
-
-	float: unquote($direction);
-	@if $support-for-ie{
-		_display: inline;
-	}
+/// 设置元素的float属性
+/// @param  {[string]} $direction      [left] float方向
+/// @param  {[boolen]} $support-for-ie [true] 是否支持IE
+/// @link https://gist.github.com/airen/d7f8ad25c982750dcb86
+@mixin float($direction: left, $support-for-ie:true) {
+    float: unquote($direction);
+    @if $support-for-ie {
+        _display: inline;
+    }
 }

data/stylesheets/sassmagic/helpers/mixins/_px2rem.scss

@@ -1,6 +1,11 @@
 //Thanks: https://github.com/bitmanic/rem/blob/master/stylesheets/_rem.scss by @benfrain (https://github.com/benfrain)
 
-//eg: https://gist.github.com/airen/cdf85f2a704fbca00dec
+/// px转rem,需要sass>=3.4,libsass推荐用pxToremCalc
+/// @param  {[string]} $property    - 属性值
+/// @param  {[string]} $px-values -   像素值 如10px
+/// @param  {[string]} $px-values [16px] 基础字号像素值 
+/// @param  {[boolen]} $support-for-ie [true] 是否支持IE
+/// @link https://gist.github.com/airen/cdf85f2a704fbca00dec
 
 @mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
 	//Conver the baseline into rems
@@ -25,4 +30,41 @@
 		// Return the property and its list of converted values
 		#{$property}: $rem-values;
 	}
+}
+
+
+
+
+/// 去掉单位，比如100px => 100
+/// @param  {[string]} $number      - 带单位或者不带单位的数值
+@function strip-units($number) {
+    @return $number / ($number * 0 + 1);
+}
+
+/// px转rem 默认字号16px，可以全局设置$browser-default-font-size，eg: @include pxToremCalc(padding,10,20,10);
+/// @param  {[string]} $property      - 属性值
+/// @param  {[string]} $values... -   像素值 如10px,支持传入多值
+@mixin remCalc($property, $values...) {
+  $browser-default-font-size:16px !default;
+  $max: length($values);//返回$values列表的长度值
+  $pxValues: '';
+  $remValues: '';
+  @for $i from 1 through $max {
+    $value: strip-units(nth($values, $i));//返回$values列表中的第$i个值，并将单位值去掉
+    $browser-default-font-size: strip-units($browser-default-font-size);
+    $remValues: #{$remValues + $value / $browser-default-font-size}rem;
+    @if $i < $max {
+      $remValues: #{$remValues + " "};
+    }
+  }
+  @for $i from 1 through $max {
+    $value: strip-units(nth($values, $i));
+    $pxValues: #{$pxValues + $value}px;
+    @if $i < $max {
+      $pxValues: #{$pxValues + " "};
+    }
+  }
+
+//   #{$property}: $pxValues; //不支持rem的输出px
+  #{$property}: $remValues;
 }

data/stylesheets/sassmagic/helpers/mixins/_quantity-queries.scss

@@ -0,0 +1,212 @@
+// 教程：http://alistapart.com/article/quantity-queries-for-css
+// quantity-queries SCSS:https://github.com/danielguillan/quantity-queries/blob/master/stylesheets/_quantity-queries.scss
+// Demo: http://codepen.io/danielguillan/pen/GgBOxm
+
+// -----------------------------------------------------------------------------
+// Quantity queries
+// -----------------------------------------------------------------------------
+// Table of contents:
+// 1. Last Simple Selector
+// 2. Build Quantity Selector
+// 3. At least
+// 4. At most
+// 5. Between
+// 6. Exactly
+
+
+// -----------------------------------------------------------------------------
+// 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); // li
+
+@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 be appended
+/// @param  {string} $last-selector        - The item's selector
+/// @return {list}                         - The final 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' or not unitless($count) or $count < 1 {
+        @error '`#{$count}` is not a valid number for `at-least`';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for `at-least`';
+    }
+
+    $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' or not unitless($count) or $count < 1 {
+        @error '`#{$count}` is not a valid number for `at-most`.';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for `at-most`';
+    }
+
+    $at-most-selector: _build-quantity-selector($selector-append, $selector);
+
+
+    @at-root #{$at-most-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 type-of($first) != 'number' or not unitless($first) or $first < 1 {
+        @error '`#{$first}` is not a valid number for `between`';
+    }
+
+    @if type-of($last) != 'number' or not unitless($last) or $last < 1 {
+        @error '`#{$last}` is not a valid number for `between`';
+    }
+
+    @if $first > $last {
+        @error '#{$first} can´t be larger that #{$last} for `between`';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for `between`';
+    }
+
+    $between-selector: _build-quantity-selector($selector-append, $selector);
+
+
+    @at-root #{$between-selector} {
+        @content;
+    }
+}
+
+
+// -----------------------------------------------------------------------------
+// 6. Exactly
+// -----------------------------------------------------------------------------
+
+/// Query when total items is exactly N items
+/// @param  {number} $count - Quantity to match (equal)
+/// @example scss - Make the items color red when there are exactly 4 items
+///   ul li {
+///     @include exactly(4) { color: red; }
+///   }
+/// @example scss - Make the items color blue when there are exactly 6 items and use '*' (element agnostic) as the item selector
+///   ul li {
+///     @include exactly(6, '*') { color: blue; }
+///   }
+
+@mixin exactly($count, $selector: null) {
+    $selector-append: ':nth-last-child(#{$count}):first-child';
+
+    @if type-of($count) != 'number' or not unitless($count) or $count < 1 {
+        @error '`#{$count}` is not a valid number for `exactly`';
+    }
+
+    @if $selector != null and (type-of($selector) != 'string' or length($selector) > 1) {
+        @error '`#{$selector}` is not a valid selector for `exactly`';
+    }
+
+    $exactly-selector: _build-quantity-selector($selector-append, $selector);
+
+
+    @at-root #{$exactly-selector} {
+        @content;
+    }
+}

data/stylesheets/sassmagic/helpers/mixins/_resizable.scss

@@ -1,4 +1,6 @@
+/// 设置元素是否可以resize
+/// @param  {[string]} $direction      - 方向 horizontal, vertical, both
 @mixin resizable($direction) {
-  resize: $direction; // Options: horizontal, vertical, both
-  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+    resize: $direction; // Options: horizontal, vertical, both
+    overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
 }

data/stylesheets/sassmagic/helpers/mixins/_stickyFooter.scss

@@ -1,7 +1,6 @@
 //From: http://compass-style.org/reference/compass/layout/sticky_footer/
 
-//html
-
+// html
 // <body>
 //   <div id="wrapper">
 //     <div id="wrapper-inner"></div>
@@ -12,8 +11,12 @@
 //   </div>
 // </body>
 
-
-//eg: https://gist.github.com/airen/2f7211d7819dddaf6003
+/// 设置底部元素sticky
+/// @param  {[string]} $footer-height      - 底部元素高度
+/// @param  {[string]} $root-selector [unquote("#wrapper")] 页面root主元素选择器
+/// @param  {[string]} $root-footer-selector [unquote("#push")] 页面root底部元素选择器
+/// @param  {[string]} $footer-selector [unquote("#footer")] 底部元素选择器
+/// @link https://gist.github.com/airen/2f7211d7819dddaf6003
 
 @mixin stickyFooter($footer-height, $root-selector: unquote("#wrapper"), $root-footer-selector: unquote("#push"), $footer-selector: unquote("#footer")) {
   html, body {

data/stylesheets/sassmagic/helpers/mixins/_triangle.scss

@@ -0,0 +1,25 @@
+//http://www.w3cplus.com/preprocessor/sass-triangle-mixin.html
+@mixin triangle($width, $height, $color, $direction) {
+    $width: $width/2;
+    $color-border-style: $height solid $color;
+    $transparent-border-style: $width solid transparent;
+    height: 0;
+    width: 0;
+    @if $direction == up {
+        border-bottom: $color-border-style;
+        border-left: $transparent-border-style;
+        border-right: $transparent-border-style;
+    } @else if $direction == right {
+        border-left: $color-border-style;
+        border-top: $transparent-border-style;
+        border-bottom: $transparent-border-style;
+    } @else if $direction == down {
+        border-top: $color-border-style;
+        border-left: $transparent-border-style;
+        border-right: $transparent-border-style;
+    } @else if $direction == left {
+        border-right: $color-border-style;
+        border-top: $transparent-border-style;
+        border-bottom: $transparent-border-style;
+    }
+}

data/stylesheets/sassmagic/helpers/mixins/_visuallyHidden.scss

@@ -1,25 +1,25 @@
 //@include visuallyHidden;
-
+/// 设置元素隐藏，最常用来隐藏一个元素的方法是使用display:none，可这并不是一个完美的方法，这样会让屏幕阅读器无法读到这个元素。为了解决这个问题，使用另外一种方法来实现元素的隐藏，而这种方法仅在浏览器中隐藏了元素，而屏幕阅读器却能读到这个元素。
+/// @param  {[boolen]} $support-for-ie [true] 是否支持IE
+/// @link http://www.w3cplus.com/preprocessor/ten-best-common-mixins.html
 @mixin visuallyHidden($support-for-ie:true) {
-	@if $support-for-ie {
-		clip: rect(0,0,0,0);
-	}
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	
-	&.focusable:active,
-	&.focusable:focus {
-		clip: auto;
-		height: auto;
-		margin: 0;
-		overflow: visible;
-		position: static;
-		width: auto;
-	}
+    @if $support-for-ie {
+        clip: rect(0, 0, 0, 0);
+    }
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    &.focusable:active, &.focusable:focus {
+        clip: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        position: static;
+        width: auto;
+    }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sassmagic
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.6
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-31 00:00:00.000000000 Z
+date: 2015-04-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -48,6 +48,7 @@ files:
 - lib/sassmagic/reset.rb
 - lib/sassmagic/utils.rb
 - lib/sassmagic.rb
+- stylesheets/sassmagic/base/_reset.scss
 - stylesheets/sassmagic/helpers/_helpers.scss
 - stylesheets/sassmagic/helpers/_mixins.scss
 - stylesheets/sassmagic/helpers/_variables.scss
@@ -56,8 +57,10 @@ files:
 - stylesheets/sassmagic/helpers/mixins/_ellipsis-overflow.scss
 - stylesheets/sassmagic/helpers/mixins/_float.scss
 - stylesheets/sassmagic/helpers/mixins/_px2rem.scss
+- stylesheets/sassmagic/helpers/mixins/_quantity-queries.scss
 - stylesheets/sassmagic/helpers/mixins/_resizable.scss
 - stylesheets/sassmagic/helpers/mixins/_stickyFooter.scss
+- stylesheets/sassmagic/helpers/mixins/_triangle.scss
 - stylesheets/sassmagic/helpers/mixins/_visuallyHidden.scss
 - stylesheets/sassmagic/helpers/mixins/README.md
 - stylesheets/sassmagic/main.scss