Created
November 21, 2013 13:07
-
-
Save hatsch/7581258 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
@import "compass"; | |
$base-font-size: 12px; | |
@function em($value, $relative-font-size: $base-font-size) { | |
@return $value / $relative-font-size * 1em; | |
} | |
.h2 { | |
font-size:em(12px) | |
} | |
$button-default-color: grey !default; | |
//this comment is sass only | |
/* this comment is in the CSS */ | |
@mixin button($color: $button-default-color) { | |
/* render some background */ | |
backgorund-color: $color; | |
border: 1px solid shade($color, 50%); | |
} | |
@mixin button-wrapped($color: $button-default-color) { | |
@content; | |
$tinted: tint($color,20%); | |
.nested { | |
@include button($tinted); | |
} | |
} | |
.foo { | |
@include button(red); | |
} | |
.foo { | |
@include button-wrapped(blue); | |
content: 'this is rendered using @content'; | |
} | |
/*extends make fun! */ | |
%container { | |
color:blue; | |
background-color:red; | |
padding-left:1em; | |
padding-right:1em; | |
max-width:1000px; | |
margin:auto; | |
} | |
.l-header { | |
@extend %container; | |
} | |
.l-content { | |
@extend %container; | |
} | |
.l-footer { | |
@extend %container; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.h2 { | |
font-size: 1em; | |
} | |
/* this comment is in the CSS */ | |
.foo { | |
/* render some background */ | |
backgorund-color: red; | |
border: 1px solid #7f0000; | |
} | |
.foo { | |
content: 'this is rendered using @content'; | |
} | |
.foo .nested { | |
/* render some background */ | |
backgorund-color: #3333ff; | |
border: 1px solid #19197f; | |
} | |
/*extends make fun! */ | |
.l-header, .l-content, .l-footer { | |
color: blue; | |
background-color: red; | |
padding-left: 1em; | |
padding-right: 1em; | |
max-width: 1000px; | |
margin: auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment