From 7e145dc9c3013c4e5128d336e8a6a89d32ec8bd4 Mon Sep 17 00:00:00 2001 From: mknadler Date: Sun, 7 Dec 2014 00:58:28 -0500 Subject: [PATCH 1/2] Minor changes, improvements, spellchecking MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Minor spelling fixes in description; adds -ms- prefix to @mixin scale for IE9 support; adds variables to @mixin shadow; adds default duration and standardizes capitalization of @mixins scaledown, scale up, fadein; moves functions black and white to directly under opacity; switches names of center-h and center-h—unk for accuracy --- andy.scss | 106 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 60 insertions(+), 46 deletions(-) diff --git a/andy.scss b/andy.scss index dea7b53..b0d5077 100644 --- a/andy.scss +++ b/andy.scss @@ -1,14 +1,14 @@ /* ----------------------------------------------- - + Andy.SCSS: Open-Source Collection of Useful SASS Mixins Library. URL: http://gillesbertaux.com/andy By: Gilles Bertaux | http://gillesbertaux.com | @gillesbertaux - -The purpose of Andy is to gather useful mixins and avoid enless researches or heavy framework use. Feel free to fork it on Github and add your own mixins: https://github.com/gillesbertaux/andy -Mixins availables: +The purpose of Andy is to gather useful mixins and avoid endless research or heavy framework use. Feel free to fork it on Github and add your own mixins: https://github.com/gillesbertaux/andy + +Mixins available: - Background Gradient - Background Size - Borders @@ -24,6 +24,7 @@ Mixins availables: - Image Retina - Line-Height - Media Queries + - Opacity - Opacity Black - Opacity White - Position @@ -31,7 +32,7 @@ Mixins availables: - Scale - Shadows - Size - - Text Shadow + - Text Shadow - TranslateX - TranslateY - Transitions @@ -40,7 +41,7 @@ Mixins availables: /* BACKGROUND GRADIENTS */ -// usage example: @include background-gradient(red, black, vertical) +// usage example: @include background-gradient(red, black, vertical) @mixin background-gradient($startcolor, $endcolor, $orientation) { background: $startcolor; @@ -80,7 +81,7 @@ Mixins availables: /* BACKGROUND SIZE */ -// usage example: @include background-size(100%, 100%); +// usage example: @include background-size(100%, 100%); @mixin background-size($width, $height) { -moz-background-size: $width $height; @@ -90,13 +91,13 @@ Mixins availables: /* BORDER */ -// usage example: @include border(2px, solid, #000); +// usage example: @include border(2px, solid, #000); @mixin border($thickness, $type, $color) { border: $thickness $type $color; } /* BORDER CORNERS */ -// usage example: @include border(100%, 100%, 0, 0); +// usage example: @include border(100%, 100%, 0, 0); @mixin border-radius-separate($topLeftRadius, $topRightRadius, $bottomLeftRadius, $bottomRightRadius) { -webkit-border-top-left-radius: $topLeftRadius; @@ -135,7 +136,7 @@ Mixins availables: /* CENTERING BLOCKS ELEMENTS, HORIZONTAL, VERTICAL, BOTH */ -// Important: you must have a parent element with position: relative. +// Important: you must have a parent element with position: relative. @mixin center-both { position: absolute; @@ -146,8 +147,16 @@ Mixins availables: transform: translate(-50%,-50%); } +// if height is defined. +@mixin center-h($height) { + position: absolute; + top: 50%; + height: $height; + margin-top: -$height/2; +} + // if height is unknown. -@mixin center-h { +@mixin center-h--unk { position: relative; top: 50%; -webkit-transform: translateY(-50%); @@ -155,14 +164,6 @@ Mixins availables: transform: translateY(-50%); } -// if height is defined. -@mixin center-h--unk($height) { - position: absolute; - top: 50%; - height: $height; - margin-top: -$height/2; -} - /* CLEARFIX */ %clearfix { @@ -256,7 +257,7 @@ Mixins availables: // usage example: @include mquery(350px, 2) { width: 100%; } @mixin mquery($width, $ratio) { - @media + @media only screen and (max-width: $width) and (min--moz-device-pixel-ratio: $ratio), only screen and (max-width: $width) and (-webkit-min-device-pixel-ratio: $ratio), only screen and (max-width: $width) and (min-device-pixel-ratio: $ratio) { @@ -271,7 +272,7 @@ Mixins availables: } @mixin mquery-r($ratio) { - @media + @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: $ratio), @@ -287,6 +288,18 @@ Mixins availables: filter: alpha(opacity=($opacity * 100)); } +/* BLACK / WHITE OPACITY */ + +// usage example: div { border: 1px solid black(.2); } + +@function black($opacity) { + @return rgba(0,0,0,$opacity); +} + +@function white($opacity) { + @return rgba(255,255,255,$opacity); +} + /* POSITION */ // usage example: @include position(absolute, 10px, null, 10px, 10px); @@ -299,40 +312,42 @@ Mixins availables: bottom: $bottom; } -/* BLACK / WHITE OPACITY */ - -@function black($opacity) { - @return rgba(0,0,0,$opacity) -} - -@function white($opacity) { - @return rgba(255,255,255,$opacity) -} - /* RADIUS */ -@mixin radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - border-radius: $radius; +@mixin radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; } /* SCALE */ // usage example: @include scale(2); -@mixin scale($value) { - -webkit-transform: scale($value) ; +@mixin scale($value) { + -ms-transform: scale($value); + -webkit-transform: scale($value); transform: scale($value); } /* SHADOWS */ -@mixin shadow($color) { - -moz-box-shadow: 10px 10px 30px 0px $color; - -webkit-box-shadow: 10px 10px 30px 0px $color; - -o-box-shadow: 10px 10px 30px 0px $color; - box-shadow: 10px 10px 30px 0px $color; +// usage examples: @include shadow(black, 5px 5px 0px 3px); +// or: @include shadow(blue, 2px 3px 2px 2px, inset); + +@mixin shadow($color, $x-y-blur-spread:10px 10px 30px 0px, $inset:false) { + @if ($inset == inset) { + -moz-box-shadow: inset $x-y-blur-spread $color; + -webkit-box-shadow: inset $x-y-blur-spread $color; + -o-box-shadow: inset $x-y-blur-spread $color; + box-shadow: inset $x-y-blur-spread $color; + } + @else { + -moz-box-shadow: $x-y-blur-spread $color; + -webkit-box-shadow: $x-y-blur-spread $color; + -o-box-shadow: $x-y-blur-spread $color; + box-shadow: $x-y-blur-spread $color; + } } /* SIZE */ @@ -370,7 +385,7 @@ Mixins availables: /* TRANSITION SCALEDOWN */ -@mixin scaledown($time) { +@mixin scaledown($time:1s) { -webkit-animation: scaledown $time ease-out 1; animation: scaledown $time ease-out 1; } @@ -389,7 +404,7 @@ Mixins availables: /* TRANSITION SCALE UP HOVER */ -@mixin ScaleUp($time) { +@mixin ScaleUp($time:1s) { -webkit-animation: ScaleUp $time ease-in-out 1; animation: ScaleUp $time ease-in-out 1; } @@ -408,7 +423,7 @@ Mixins availables: /* TRANSITION FADEIN */ -@mixin fadeIn($time) { +@mixin fadeIn($time:1s) { -webkit-animation: fadeIn $time ease-out 1; animation: fadeIn $time ease-out 1; } @@ -498,4 +513,3 @@ Mixins availables: animation: slideInRight $time ease-out backwards; -webkit-animation: slideInRight $time ease-out backwards; } - From 1a991be1f85145297696132e3f49b90341d902d6 Mon Sep 17 00:00:00 2001 From: mknadler Date: Sun, 7 Dec 2014 02:49:59 -0500 Subject: [PATCH 2/2] Mixin improvements Allows for unitless @include fontsize calls; adds variable to @mixin hover; combines @mixins mquery and mquery-w --- andy.scss | 60 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/andy.scss b/andy.scss index b0d5077..31c6199 100644 --- a/andy.scss +++ b/andy.scss @@ -200,9 +200,13 @@ Mixins available: /* FONT SIZE */ // usage example: @include fontsize(16px); +// or: @include fontsize(16); @mixin fontsize($size) { $base-font-size: 16px !default; + @if (unitless($size)){ + $size: $size * 1px; + } font-size: $size; font-size: ($size / $base-font-size) * 1rem; } @@ -220,11 +224,11 @@ Mixins available: // usage example: @include hover(.3s); -@mixin hover($time) { - -webkit-transition: all $time ease-in-out; - -o-transition: all $time ease-in-out; - -moz-transition: all $time ease-in-out; - transition: all $time ease-in-out; +@mixin hover($time, $timing-function: ease-in-out) { + -webkit-transition: all $time $timing-function; + -o-transition: all $time $timing-function; + -moz-transition: all $time $timing-function; + transition: all $time $timing-function; } /* IMAGE RETINA */ @@ -256,18 +260,18 @@ Mixins available: // usage example: @include mquery(350px, 2) { width: 100%; } -@mixin mquery($width, $ratio) { - @media - only screen and (max-width: $width) and (min--moz-device-pixel-ratio: $ratio), - only screen and (max-width: $width) and (-webkit-min-device-pixel-ratio: $ratio), - only screen and (max-width: $width) and (min-device-pixel-ratio: $ratio) { - @content; - } -} - -@mixin mquery-w($width) { - @media only screen and (max-width: $width) { - @content; +@@mixin mquery($width, $ratio: false) { + @if $ratio { + @media + only screen and (max-width: $width) and (min--moz-device-pixel-ratio: $ratio), + only screen and (max-width: $width) and (-webkit-min-device-pixel-ratio: $ratio), + only screen and (max-width: $width) and (min-device-pixel-ratio: $ratio) { + @content; + } + } @else { + @media only screen and (max-width: $width) { + @content; + } } } @@ -277,7 +281,7 @@ Mixins available: only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: $ratio), only screen and (min-device-pixel-ratio: $ratio) { - @content; + @content; } } @@ -385,18 +389,18 @@ Mixins available: /* TRANSITION SCALEDOWN */ -@mixin scaledown($time:1s) { - -webkit-animation: scaledown $time ease-out 1; - animation: scaledown $time ease-out 1; +@mixin scaleDown($time:1s) { + -webkit-animation: scaleDown $time ease-out 1; + animation: scaleDown $time ease-out 1; } -@keyframes scaledown { +@keyframes scaleDown { 0% { @include scale(1); } 50% { @include scale(.95); }; 100% { @include scale(1); }; } -@-webkit-keyframes scaledown { +@-webkit-keyframes scaleDown { 0% { @include scale(1); } 50% { @include scale(.95); }; 100% { @include scale(1); }; @@ -404,18 +408,18 @@ Mixins available: /* TRANSITION SCALE UP HOVER */ -@mixin ScaleUp($time:1s) { - -webkit-animation: ScaleUp $time ease-in-out 1; - animation: ScaleUp $time ease-in-out 1; +@mixin scaleUp($time:1s) { + -webkit-animation: scaleUp $time ease-in-out 1; + animation: scaleUp $time ease-in-out 1; } -@keyframes ScaleUp { +@keyframes scaleUp { 0% { @include scale(1); } 50% { @include scale(1.1); }; 100% { @include scale(1); }; } -@-webkit-keyframes ScaleUp { +@-webkit-keyframes scaleUp { 0% { @include scale(1); } 50% { @include scale(1.1); }; 100% { @include scale(1); };