Public snipts » catcubed's snipts » Useful mixins for SASS

• // Bunch of useful mixin functions for sass
  
  =bgImg(!img,!x = 20px,!y = 10px,!attach = "scroll",!repeat = "no-repeat")
  	background-position = !x !y
  	background-repeat = !repeat
  	background-attachment = !attach
  	background-image: url(#{!img})
  
  =boxShadow(!x = 5px,!y = 5px,!blur = 5px,!color = #000)
  	-webkit-box-shadow = !x !y !blur !color
  	-moz-box-shadow = !x !y !blur !color
  	box-shadow = !x !y !blur !color
  
  =borderRadius(!radius = 5px)	
  	-moz-border-radius = !radius
  	-webkit-border-radius = !radius
  	-khtml-border-radius = !radius
  	border-radius = !radius
  
  =singleCornerRadius(!side,!vert,!width = 5px)
  	-moz-border-radius-#{!vert}#{!side} = !width
  	-webkit-border-#{!vert}-#{!side}-radius = !width
  	border-#{!vert}-#{!side}-radius = !width
  
  // set global borders. Border radius can also be set
  =border(!width = 1px,!style = "solid",!color = #000,!radius = 0)
  	border = !width !style !color
  	+borderRadius(!radius)
  
  // Use noSideBorder() to kill a side after setting the global border() mixin above.
  // This method results in smaller css once it is converted as the width/style/color is only set once.
  
  =noSideBorder(!side)
  	border-#{!side}: 0
  
  =noSideBorderRadius(!side)
  	+singleCornerRadius(!side,"top",0)
  	+singleCornerRadius(!side,"bottom",0)

  css

  1

  // Bunch of useful mixin functions for sass
  
  =bgImg(!img,!x = 20px,!y = 10px,!attach = "scroll",!repeat = "no-repeat")
  	background-position = !x !y
  	background-repeat = !repeat
  	background-attachment = !attach
  	background-image: url(#{!img})
  
  =boxShadow(!x = 5px,!y = 5px,!blur = 5px,!color = #000)
  	-webkit-box-shadow = !x !y !blur !color
  	-moz-box-shadow = !x !y !blur !color
  	box-shadow = !x !y !blur !color
  
  =borderRadius(!radius = 5px)	
  	-moz-border-radius = !radius
  	-webkit-border-radius = !radius
  	-khtml-border-radius = !radius
  	border-radius = !radius
  
  =singleCornerRadius(!side,!vert,!width = 5px)
  	-moz-border-radius-#{!vert}#{!side} = !width
  	-webkit-border-#{!vert}-#{!side}-radius = !width
  	border-#{!vert}-#{!side}-radius = !width
  
  // set global borders. Border radius can also be set
  =border(!width = 1px,!style = "solid",!color = #000,!radius = 0)
  	border = !width !style !color
  	+borderRadius(!radius)
  
  // Use noSideBorder() to kill a side after setting the global border() mixin above.
  // This method results in smaller css once it is converted as the width/style/color is only set once.
  
  =noSideBorder(!side)
  	border-#{!side}: 0
  
  =noSideBorderRadius(!side)
  	+singleCornerRadius(!side,"top",0)
  	+singleCornerRadius(!side,"bottom",0)
  

  copy | embed

0 Comments