Created
December 18, 2012 17:22
-
-
Save laurakalbag/4329953 to your computer and use it in GitHub Desktop.
Example of rules based on design patterns in CSS made into a Sass mixin and applied to HTML elements
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
@mixin shadow-border { | |
border-bottom: 1px solid #a4a4a4; | |
-webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
padding-bottom: 20px; | |
margin-bottom: 40px; | |
} | |
article { | |
@include shadow-border; | |
} | |
header { | |
@include shadow-border; | |
} | |
p.intro { | |
@include shadow-border; | |
} |
Right, turns out I was wrong. I was getting confused between mixins and placeholder selectors. SO instead of that mixin you'd have this:
%shadow-border {
border-bottom: 1px solid #a4a4a4;
-webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
padding-bottom: 20px;
margin-bottom: 40px;
}
Note the % - wherever this appears in your document (and therefore the cascade) is where the extended styles will appear. The method of extending things is the same though - except you need to reference the placeholder:
article {
@extend %shadow-border;
}
That does what I said in the previous comment. Have a read of Chris Eppstein's post about the release of 3.2: http://chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released/ - the bit about placeholder selectors is the first heading after the intro :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
UPDATE: I was a bit off in this comment, so make sure you read the one after as well to get the full picture of what I'm on about.
Hello :)
As of SASS 3.2 (I think) we now have access to @extend, which is kind of like @include, but a little smarter than that. Whereas this example will result in three chunks of CSS with the mixin-included styles inside, using @extend instead of @include will combine the selectors to minimise repetition of generated styles.
Best of all, it can be combined with other styles, and SASS is smart enough to extract the @extend-ed mixins and create seperate chunks of CSS for those, so this:
will result in this:
Give it a go - I can see this being particularly handy with a clearfix mixin. Previously I'd have the same clearfix rules applied in tons of places in my generated CSS. @extend will create one bit of CSS with all the relevant selectors :)
Nifty, eh?
I don't think LESS has this functionality, so this is one very good reason to use SASS over LESS.