Skip to content

Instantly share code, notes, and snippets.

@hatsch
Created November 21, 2013 13:07
Show Gist options
  • Save hatsch/7581258 to your computer and use it in GitHub Desktop.
Save hatsch/7581258 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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;
}
.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