Skip to content

Instantly share code, notes, and snippets.

@ravinggenius

ravinggenius/index.html

Created August 20, 2010 14:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ravinggenius/540450 to your computer and use it in GitHub Desktop.
Save ravinggenius/540450 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>compass-primary-plugin</title>
<meta content='application/xhtml+xml; charset=utf-8' http-equiv='Content-Type'>
<link href="./test.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<p>header</p>
</header>
<section class="area-1">
<p>.area-1</p>
</section>
<section class="area-2">
<p>.area-2</p>
</section>
<section class="area-3">
<p>.area-3</p>
</section>
<section class="area-4">
<p>.area-4</p>
</section>
<section class="area-5">
<p>.area-5</p>
</section>
</body>
</html>
Raw
primary.sass
$primary-header-background: #FFFF00 !default
$primary-area-1-background: #FF0000 !default
$primary-area-2-background: #00FF00 !default
$primary-area-3-background: #0000FF !default
$primary-area-4-background: #FF00FF !default
$primary-area-5-background: #00FFFF !default
// works, technically
@mixin layout-01($container: body)
#{$container} > header
background:
color: $primary-header-background
width: 100%
height: 100px
.area // i don't need this class to output, but it does anyway
float: left
height: 400px
width: 33.3%
#{$container} > .area-1
@extend .area
background:
color: $primary-area-1-background
#{$container} > .area-2
@extend .area
background:
color: $primary-area-2-background
#{$container} > .area-3
@extend .area
background:
color: $primary-area-3-background
// does not compile
@mixin layout-02
> header
background:
color: $primary-header-background
width: 100%
height: 100px
@mixin area // nested @mixin doesn't work, but would be ideal
float: left
height: 400px
> .area-1
@include area
background:
color: $primary-area-1-background
width: 30%
> .area-2
@include area
background:
color: $primary-area-2-background
width: 70%
// compiles wrong (the @extend-ed selector is incorrectly creating this selector: body .area, body body > .area-1, body body > .area-2)
@mixin layout-03
> header
background:
color: $primary-header-background
width: 100%
height: 100px
.area // this would also be ideal, except for the extra css for this unused rule
float: left
height: 400px
> .area-1
@extend area
background:
color: $primary-area-1-background
width: 30%
> .area-2
@extend area
background:
color: $primary-area-2-background
width: 70%
Raw
test.sass
@import primary
// this works, but feels wrong
@include layout-01
body
margin:
left: auto
right: auto
width: 960px
// this is how i would like to use the mixins
body
@include layout-02
// OR
@include layout-03
margin:
left: auto
right: auto
width: 960px
header,
section
display: block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment