Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Mixins example.

  • Loading branch information...
commit 6300ed8d8fd91117d26b9ae1d5e745d635f4cf8d 1 parent 0d41174
@adarowski adarowski authored
Showing with 88 additions and 11 deletions.
  1. +43 −7 made_with_sass.sass
  2. +45 −4 made_with_scss.scss
View
50 made_with_sass.sass
@@ -1,10 +1,46 @@
-$company_color: #000064
+// Rounded Corners mixin
-a:link
- color: $company_color
+@mixin border_radius($radius: 10px)
+ -moz-border-radius: $radius
+ -webkit-border-radius: $radius
+ border-radius: $radius
-aside
- background-color: $company_color
+// Box Shadow mixin
+
+@mixin box_shadow($color: #AAA, $values: 0 0 5px)
+ -webkit-box-shadow: $color $values
+ -moz-box-shadow: $color $values
+ box-shadow: $color $values
+
+// Linear Gradient mixin
+
+@mixin linear_gradient($start, $end)
+ background-color: $start
+ background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end))
+ background-image: -webkit-linear-gradient(top, $start, $end)
+ background-image: -moz-linear-gradient(top, $start, $end)
+ background-image: -ms-linear-gradient(top, $start, $end)
+ background-image: -o-linear-gradient(top, $start, $end)
+ background-image: linear-gradient(top, $start, $end)
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}')
+
+// @font-face mixin
-nav ul li
- color: $company_color
+@mixin font-face
+ font-family: 'ChunkFiveRegular'
+ src: url('/fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/Chunkfive-webfont.woff') format('woff'), url('/fonts/Chunkfive-webfont.ttf') format('truetype'), url('/fonts/Chunkfive-webfont.svg#svgFontName') format('svg')
+ font-weight: normal
+ font-style: normal
+
+// In use
+
+header
+ @include border_radius
+ @include box_shadow
+ @include linear_gradient(black, orange)
+ h1
+ @include font_face
+
+aside
+ @include border_radius(5px)
+ @include box_shadow(#999, 2px 2px 2px)
View
49 made_with_scss.scss
@@ -1,7 +1,48 @@
-body {
+// Rounded Corners mixin
+
+@mixin border_radius($radius: 10px) {
+ -moz-border-radius: $radius;
+ -webkit-border-radius: $radius;
+ border-radius: $radius; }
+
+// Box Shadow mixin
+
+@mixin box_shadow($color: #AAA, $values: 0 0 5px) {
+ -webkit-box-shadow: $color $values;
+ -moz-box-shadow: $color $values;
+ box-shadow: $color $values; }
+
+// Linear Gradient mixin
+
+@mixin linear_gradient($start, $end) {
+ background-color: $start;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end));
+ background-image: -webkit-linear-gradient(top, $start, $end);
+ background-image: -moz-linear-gradient(top, $start, $end);
+ background-image: -ms-linear-gradient(top, $start, $end);
+ background-image: -o-linear-gradient(top, $start, $end);
+ background-image: linear-gradient(top, $start, $end);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}'); }
+
+// @font-face mixin
+
+@mixin font-face {
+ font-family: 'ChunkFiveRegular';
+ src: url('/fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/Chunkfive-webfont.woff') format('woff'), url('/fonts/Chunkfive-webfont.ttf') format('truetype'), url('/fonts/Chunkfive-webfont.svg#svgFontName') format('svg');
+ font-weight: normal;
+ font-style: normal; }
+
+// In use
+
+header {
+ @include border_radius;
+ @include box_shadow;
+ @include linear_gradient(black, orange);
h1 {
- border : solid 1px green;
- display : block;
- width : 100%;
+ @include font_face;
}
}
+
+aside {
+ @include border_radius(5px);
+ @include box_shadow(#999, 2px 2px 2px); }
Please sign in to comment.
Something went wrong with that request. Please try again.