Hello lovelies,
I’ve been using SASS for about a year now, and although I don’t get the chance to use it as much as I’d like – I’d thought I’d share with you my progress.
You can just download the code samples here – they are from a real life corporate website!
mixins.scss
main.scss
Using fake classes with @extend
I only just discovered @extend and at first I didn’t find it that useful until I made FAKE CLASSES!
$ff : 'Trebuchet MS', Garuda, sans-serif;
//font simple
@mixin fs($size, $col: inherit, $lh: $size) {
color: $col;
font: normal #{$size}/#{$lh} $ff;
}
//font simple bold
@mixin fsb($size, $col, $lh: $size) {
color: $col;
font: bold #{$size}/#{$lh} $ff;
}
.h1 {
@include fsb(28px, #333);
}
.h2 {
@include fsb(16px, #333, 21px);
}
.h2-larger {
@include fsb(18px, #414141, 21px);
}
.h3 {
@include fs(14px, #333, 24px);
}
h3, p, input, li {
@extend .h3;
}
/////
#main {
form {
header {
@extend .h2
padding-bottom: 2px;
////
}
}
}The reason we use fake classes rather than the actual selectors is becuase extend will extend EVERY version of say, an ‘a’ tag so if we use fake classes extend will only copy the classes for one context.
So you can basically have ALL of your site styles declared as fake classes at the top of your SASS stylesheet then extend away throughout the rest of it – This means your heading styles or whatever can be completely consistent in every context. Really loving this.
Many mixins make light work
When I first started with mixins I really over-complicated the whole process by trying to have as few mixins as possible. What happened in the end was that my SASS @include code was too complicated and I was actually having to look up my own syntax.
Of course there’s absolutely no benefit to trimming down your mixin code – the bloody CSS is pre-compliled anyway! It turns out you’re wayyy better off having lots of little small mixins rather than a few gigantic ones. LET ME ILLUSTRATE MY POINT.
My old ‘position’ mixin was a real beast that covered absolute, relative, top, left, right, bottom. You can see how I incorporated a pading/margin style shorthand.
//'i' is for 'inherit'
@mixin pos($p: relative, $t: 0, $b: i, $r: i, $l: 0) {
@if $b!=i { bottom: #{$b}px; }
@if $l!=i { left: #{$l}px; }
@if $p!=i {
@if $p==a {
position: absolute;
} @else {
position: relative;
}
}
@if $r!=i { left: #{$r}px; }
@if $t!=i { top: #{$t}px; }
}
#div1 {
@include pos;
border: 1px solid green;
height: 500;
width: 500;
div {
@include pos(a);
border: 1px solid red;
width: 100px;
height: 100px;
#div2 {
@include pos(i,100,i,i,500);
}
#div3 {
@include pos(i,i,50,50,i);
}
#div4 {
@include pos(i,i,i,200,200);
}
}
}
I’m kind of quite proud of it and it works well but it’s just a bit clunky somehow and you can’t really see what’s going on right away, you have to think about it. That’s when I decided to break it up in to 4 mixins:
//position top left
@mixin ptl($p: relative, $t: 0, $l: 0) {
@if $l!=i {left: #{$l}px;}
@if $p==a {
position: absolute;
} @elseif $p==i {
} @else {
position: relative;
}
@if $t!=i {top: #{$t}px;}
}
//position bottom right
@mixin pbr($p: relative, $b: 0, $r: 0) {
@if $b!=i {bottom: #{$b}px;}
@if $p==a {
position: absolute;
} @elseif $p==i {
} @else {
position: relative;
}
@if $r!=i {right: #{$r}px;}
}
//position top right
@mixin ptr($p: relative, $t: 0, $r: 0) {
@if $p==a {
position: absolute;
@elseif $p==i {
} @else {
position: relative;
}
@if $r!=i {right: #{$r}px;}
@if $t!=i {top: #{$t}px;}
}
//bottom left hasn't come up yet!
#div1 {
@include ptl;
border: 1px solid green;
height: 500;
width: 500;
div {
@include ptl(a);
border: 1px solid red;
width: 100px;
height: 100px;
#div2 {
@include ptl(i,100,500);
}
#div3 {
@include pbr(i,50,50);
}
#div4 {
@include pbl(i,200,200);
}
}
}
And although it only looks like a slight difference, it means I just have a much better grip of what is going on in my code & don’t have to think so much.
