2 // @include px-rem(property, value, value, ecc);
3 // @include px-rem(margin, 20, auto);
4 @mixin px-rem($property, $values...) {
9 $base-font: strip-units($em-base);
11 @for $i from 1 through $max {
12 $value: strip-units(nth($values, $i));
14 @if $value == auto or $value == inherit or $value == 0 {
15 $pxValues: #{$pxValues + $value};
17 $pxValues: #{$pxValues + $value}px;
21 $pxValues: #{$pxValues + " "};
25 @for $i from 1 through $max {
26 $value: strip-units(nth($values, $i));
27 @if $value == auto or $value == inherit or $value == 0 {
28 $remValues: #{$remValues + $value};
30 $remValues: #{$remValues + $value / $base-font}rem;
33 $remValues: #{$remValues + " "};
37 #{$property}: $pxValues;
38 #{$property}: $remValues;
42 // @include headings([1, 6]){
45 @mixin headings($from: 1, $to: 6){
46 @for $i from $from through $to{
53 /// Given a font size in pixels, reproduces that font size in rems.
55 /// @param {Length} $size - Font size
56 /// @example scss - Usage
58 /// @include font-size(16px);
60 /// @example css - Result
65 @mixin font-size($size) {
71 font-size: ($size / $em-base) * 1rem;
74 /// Horizontally centers block elements
76 /// @example scss - Usage
78 /// @include center-block;
80 /// @example css - Result
83 /// margin-left: auto;
84 /// margin-right: auto;
92 /// Vertically centers block elements with known height.
94 /// @param {Length} $height - Element's height
95 /// @example scss - Usage
97 /// @include center-h(42px);
99 /// @example css - Result
101 /// position: absolute;
104 /// margin-top: -21px;
106 @mixin center-h($height) {
110 margin-top: -($height / 2);
114 // top and left are the anchor point from where to start moving the shadow
115 @mixin box-shadow($top, $left, $blur, $color, $inset: false) {
116 @if unitless($top) or unitless($left) or unitless($blur) {
122 -webkit-box-shadow:inset $top $left $blur $color;
123 -moz-box-shadow:inset $top $left $blur $color;
124 box-shadow:inset $top $left $blur $color;
126 -webkit-box-shadow: $top $left $blur $color;
127 -moz-box-shadow: $top $left $blur $color;
128 box-shadow: $top $left $blur $color;
134 /// @param {String} $rgb - rgb color
135 /// @param {Float} $opacity - opacity
136 /// @param {Int} $h - h-shadow
137 /// @param {Int} $v - v-shadow
138 /// @param {Float} $blur - blur-radius
139 /// @example scss - Usage
141 /// @include text-shadow("0,0,0", 0.5, 1, 1, 5 );
143 /// @example css - Result
145 /// text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px;
147 @mixin text-shadow($opacity, $h, $v, $blur, $rgb: #000000) {
148 @if unitless($h) or unitless($v) or unitless($blur) {
153 text-shadow: $h $v $blur rgba($rgb, $opacity);
156 // truncate text with an ellipsis
157 @mixin text-truncate {
159 text-overflow: ellipsis;
160 -o-text-overflow: ellipsis;
164 // create a circular "thing" out of any item
165 // needs to be originally square
166 @mixin circle($size, $color, $display) {
167 @if unitless($size) {
175 -webkit-border-radius: $size/2;
176 -moz-border-radius: $size/2;
177 border-radius: $size/2;
180 @mixin cover($w: inherit, $h: inherit) {
186 @-moz-document url-prefix() {
194 // border radius bourbon style
195 @mixin border-radius($value) {
196 border-radius: $value;
197 background-clip: padding-box;
199 // columns mixin to arrange stuff into columns
200 @mixin columns($colcount: 0, $colgap: 50px) {
201 -moz-column-count: $colcount;
202 -moz-column-gap: $colgap;
203 -webkit-column-count: $colcount;
204 -webkit-column-gap: $colgap;
205 column-count: $colcount;
208 // Vertical/Horizontal Menu Mixin
209 // Originally derived from http://sachagreif.com/useful-sass-mixins/
210 @mixin navigation-list ($horiz:false) {
213 $display: inline-block;
216 list-style-type:none;