Skip to content

Instantly share code, notes, and snippets.

@renz45
Created September 23, 2011 21:47
Show Gist options
  • Save renz45/1238523 to your computer and use it in GitHub Desktop.
Save renz45/1238523 to your computer and use it in GitHub Desktop.
Sass mixins I use for responsive design to calculate width percents quickly
//responsive Design mixins, it's recommended that if you need a different
//pageWidth than the default of 960px that proxy functions be made to change the default ex:
// =rwidth1($width)
// +rwidth($width, 800px)
//
//this makes it faster to use
//calculates a percentage based width based on the pageWidth constant and the given width
=rwidth($width,$pageWidth : 960px)
/*! #{$width}/#{$pageWidth}*/
width: percentage($width/$pageWidth)
=rmargin($top,$right,$bottom,$left, $pageWidth : 960px)
@if $top == 0
$top: 0px
@if $right == 0
$right: 0px
@if $bottom == 0
$bottom: 0px
@if $left == 0
$left: 0px
/*! #{$top}, #{$right}/#{$pageWidth}, #{$bottom}, #{$left}/#{$pageWidth} */
margin: $top percentage($right/$pageWidth) $bottom percentage($left/$pageWidth)
=rpadding($top,$right,$bottom,$left, $pageWidth : 960px)
@if $top == 0
$top: 0px
@if $right == 0
$right: 0px
@if $bottom == 0
$bottom: 0px
@if $left == 0
$left: 0px
/*! #{$top}, #{$right}/#{$pageWidth}, #{$bottom}, #{$left}/#{$pageWidth} */
padding: $top percentage($right/$pageWidth) $bottom percentage($left/$pageWidth)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment