Sass
Jump to navigation
Jump to search
Container
wrapping the entire doc with a class .page or whatever, then in the scss add below .page{ @include container; // you can use @include container(70%) also when you want to take up only a certain amount of the set container }
- The container size is set in the Suzy Grid
Create a mixin where you can pass content
@mixin nameofmixin($width: 420px){ @content; } // usefull if you use it as a media query shell // whatever content you pass the mixin, it will go between the{} // as opposed to just passing arguments @include nameofmixin(){ height: 300px; Color: white; } // you can also pass it a parameter
Creating Mixins
@mixin lgtext{ border: 3px solid black; // below is a compass function @include border-radius(12px); font-size: 2.5em; padding:10px; }
Using Mixins
h1, h2 { @include lgtext; }
Mixins with arguments and default values
@mixin customBorder($width: 1px, $color: black, $style:solid){ border:{ width: $width; color:$color; style:$style; } }
Using mixins with arguments
h2{ @include customBorder(4px, red, solid); }
Importing external Files
@import "_file.scss";
Styling All heading tags
#{headings()} { font-family: $font-secondary; font-weight: normal ; color: $darkgray; @include text-shadow($paleryellow 1px 1px) ; }
Adjust Colors
color:lighten($darkblue, 25); color:darken($darkblue, 25);
Text Shadow
@include text-shadow(blue 1px 1px)
Extend a class
.someclass { text-align: center; color: white; border: 3px solid black; } // another Classs .anotherclass{ @extend .someclass; padding: 10px; }
Place Holders
%nameofplaceholder{ transition: all .3s eas-in; } // call transition @extend %nameofplaceholder;
Using List
$rainbow: red, orange, yellow, green, blue, indego, violet; @each $color in $rainbow{ .#{color}{ background-color: $color; } }
---------------------HTML ------------------ <div class='color red"></div> <div class='color orange"></div> <div class='color yellow"></div> <div class='color green"></div> <div class='color blue"></div> <div class='color indego"></div>
List Example
$categories:(ball, ballet, bosu, cardio, circuit, kettlebell, kickbox, pilates, spinning, step, strength, yoga); @each $category in $categories { .#{$category}{ background: $accent url(../images/icon/#{$category}.png) no-repeat; @include rounded(8px); } }
------------- HTML ------------- <ul id="type"> <li><a href="#" class="ball">Ball Workouts</a></li> <li><a href="#" class="ballet">Ballet Barre</a></li> <li><a href="#" class="bosu">Bosa</a></li> <li><a href="#" class="cardio">Cardio</a></li> <li><a href="#" class="circuit">Circuit</a></li> <li><a href="#" class="kettlebell">Kettlebell</a></li> <li><a href="#" class="kickbox">Kickboxing</a></li> <li><a href="#" class="pilates">Pilates</a></li> <li><a href="#" class="spinning">Spinning</a></li> <li><a href="#" class="step">Step</a></li> <li><a href="#" class="strength">Strength</a></li> <li><a href="#" class="yoga">Yoga</a></li> </ul>
Importing Fonts
http://fonts.google.com Import font
@import url('https://fonts.googleapis.com/css?family=Nunito'); @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); @import url('https://fonts.googleapis.com/css?family=Raleway');
use fonts
$headingfont: 'Nunito',sans-serif; $bodyfont: 'Raleway',sans-serif; $bodyfont2: 'Slabo 27px',serif;
Border Box Sizing
Include this in your css file and it will take care of all the border box sizing
@include border-box-sizing;