Demos and Tutorials
Social Media CSS Buttons
CSS Table Styles
SASS Mixins and CSS Examples
Center Vertical
Center Horizontal
Gradients
Reset
Fix Margin Collapsing
// Method 1:
#inner
{
display:inline-block
}
// Method 2:
#inner
{
position: absolute;
}
// Method 3
#outer
{
border: solid 0 transparent;
}
Border Radius
Example mixin definition:
@mixin border_radius( $tl, $tr, $br, $bl )
{
-webkit-border-top-left-radius: $tl;
-webkit-border-top-right-radius: $tr;
-webkit-border-bottom-right-radius: $br;
-webkit-border-bottom-left-radius: $bl;
-moz-border-radius-topleft: $tl;
-moz-border-radius-topright: $tr;
-moz-border-radius-bottomright: $br;
-moz-border-radius-bottomleft: $bl;
border-top-left-radius: $tl;
border-top-right-radius: $tr;
border-bottom-right-radius: $br;
border-bottom-left-radius: $bl;
}Font Size
Example mixin definition:
@mixin font-size($size: 1, $line: $size * 1.5)
{
font-size : ($size * 16) + px;
line-height : ($line * 16) + px;
font-size : $size + rem;
line-height : $line + rem;
}Example use:
@include font-size(1); @include font-size(1, 2.1);
Transitions
Example mixin definition:
@mixin transition
{
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}Rotate
Example mixin definition:
@mixin rotate( $degree ){
behavior:url(-ms-transform.htc);
-webkit-transform: rotate(#{$degree}deg);
-moz-transform: rotate(#{$degree}deg);
-ms-transform: rotate(#{$degree}deg);
-o-transform: rotate(#{$degree}deg);
transform: rotate(#{$degree}deg);
}
Example use:
@include rotate( 5 );
@include rotate( -5 );
Breakpoints
Example mixin definition:
@mixin breakpoint( $name )
{
// If the key exists in the map
@if map-has-key( $breakpoints, $name )
{
// Prints a media query based on the value
@media
#{
inspect( map-get( $breakpoints, $name ) )
}
{
@content;
}
}
// If the key doesn't exist in the map, throw an error.
@else
{
@warn "No value found from '#{$breakpoint}'. Please make sure it is defined in the '$breakpoints' map.";
}
}
Example map definition:
$breakpoints: (
'small': 'min-width: 599px', // small-tablet
'medium': 'min-width: 767px', // tablet
'large': 'min-width: 1023px', // small screen
'larger': 'min-width: 1280px', // widescreen
'largest': 'min-width: 1920px', // HDTV
);
Example use:
@include breakpoint( small ){ ... }
Box Sizing Border Box
Example mixin definition:
@mixin box-sizing
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
&:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
&:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
Example use:
@include box-sizing;
Box Shadow
Example SASS mixin definition:
@mixin box-shadow( $values )
{
-webkit-box-shadow: $values; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: $values; /* Firefox 3.5 - 3.6 */
box-shadow: $values; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
Example use:
@include box-shadow( 1px 1px 1px 1px rgba(0,0,0,0.5) );
Border Radius
Example SASS mixin definition:
@mixin border-radius ( $tl, $tr, $br, $bl )
{
-webkit-border-top-left-radius: $tl;
-moz-border-radius-topleft: $tl;
border-top-left-radius: $tl;
-webkit-border-top-right-radius: $tr;
-moz-border-radius-topright: $tr;
border-top-right-radius: $tr;
-webkit-border-bottom-right-radius: $br;
-moz-border-radius-bottomright: $br;
border-bottom-right-radius: $br;
-webkit-border-bottom-left-radius: $bl;
-moz-border-radius-bottomleft: $bl;
border-bottom-left-radius: $bl;
}
Example use:
@include border-radius ( 5px, 10px, 5px, 0 );
Check For a SASS Variable
$some_variable: 5;
@if variable-exists(some_variable) {
/* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
/* But I don't */
}
String Interpolation
$color: "red";
$content: "This color is #{$color}";
// Using the variable:
p {
content: $content;
}
If Else
@mixin backgroundTheme( $theme )
{
$color: #000000;
@if $theme == 'light'
{
$color: #DDDDDD;
}
@else if $theme == 'darker'
{
$color: #BBBBBB;
}
background-color: $color;
}
@mixin backgroundTest( $level: 0, $flag: 0 )
{
background-color: #FFFFFF;
@if $level == 0
{
background-color: #000000;
}
@else if $level == 1
{
background-color: #BBBBBB;
}
@else if $level == 2 and $flag == 1
{
background-color: #DDDDDD;
}
@else if $level == 3 or ($level == 4 and $flag == 1)
{
background-color: #E0E0E0;
}
}
unquote
The SASS unquote method removes quotes from a string value. This allows (among other things) for a single mixin parameter to represent a dynamic list of property values.
For example, the following mixin builds a declaration of vendor-prefixed box-shadow properties by using unquote to convert a string variable into a dynamic list of property values.
@mixin box_shadow( $settings )
{
-webkit-box-shadow: unquote( $settings );
-moz-box-shadow: unquote( $settings );
box-shadow: unquote( $settings );
}
/* Example use cases: */
.box-shadow-a { @include box_shadow( '0px 1px 1px #000000' ); }
.box-shadow-b { @include box_shadow( 'inset 0px 1px 1px -1px rgba(0, 0, 0, 0.1)' ); }
.box-shadow-c { @include box_shadow( '0px -1px 1px rgba(255, 255, 255, 0.3)' ); }
Detect Your SASS Version
sass -v
Get The Latest SASS Version
sudo gem update sass
Compass
Get Compass with Xcode Command Line Tools
On Apple machines the developer package Xcode Command Line Tools should be installed. It is part of the core apple SDK and comes with a number of useful tools.
Open Terminal.
Check for an existing Xcode install by attempting to run the gcc compiler command line tool included with Xcode:
gcc --version