Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added readme. More vendor support for border-radius

  • Loading branch information...
commit 9fb3b81a2f7bab5dd4fb3f958f06d7409afdf188 1 parent e20eb3d
Phil LaPier authored
Showing with 59 additions and 2 deletions.
  1. +4 −2 _border-radius.scss
  2. +55 −0
6 _border-radius.scss
@@ -1,5 +1,7 @@
@mixin border-radius ($radii) {
- -moz-border-radius: $radii;
-webkit-border-radius: $radii;
- border-radius: $radii;
+ -moz-border-radius: $radii;
+ -ms-border-radius: $radii;
+ -o-border-radius: $radii;
+ border-radius: $radii;
@@ -0,0 +1,55 @@
+#Vanilla Sass Mixins
+The purpose of these mixin is to provide a framework for writing vanilla scss
+Sass 3.1+
+**Clone the Repo**
+`git clone`
+**Import the mixins at the beginning of your stylesheet**
+`@import 'sass-mixins/mixins';`
+Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+`@include linear-gradient(#1e5799, #2989d8);
+ @include linear-gradient(top, #1e5799 0%, #2989d8 100%);
+ @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);`
+**Border Radius**
+Border-radius will also take short-hand notation.
+`@include border-radius(10px);
+ @include border-radius(5px 5px 2px 2px);
+The three following properties support a comma separated list of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. animation-name | animation-duration | animation-timing-function
+`@include animation-name(slideup, fadein);
+ @include animation-duration(1.0s, 1.2s);
+ @include animation-timing-function(ease-in-out, ease-out);`
+Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
+`@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);`
+ Shorthand mixin: Supports multiple parentheses-deliminated values for each variable.
+`@include transition (all, 2.0s, ease-in-out);
+ @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+ @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
+Currently the project is a work in progress. Feel free to help out.
Please sign in to comment.
Something went wrong with that request. Please try again.