[SASS] Mixins

sass_mixins.scss

# Retina Images

This mixin by Jason Zimdars is a breeze to use and offers a greater visual experience to those that are lucky enough to have a retina device.

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

Usage:

div.logo {
   background: url("logo.png") no-repeat;
   @include image-2x("logo2x.png", 100px, 25px);
}

//---------------------------------------------------
 
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

//---------------------------------------------------

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//---------------------------------------------------

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

//---------------------------------------------------

Font Size

This mixin sets the font size in rem's with a px fallback.

@mixin font-size($sizeValue: 12 ){
  font-size: $sizeValue + px; //fallback for old browsers
  font-size: (0.125 * $sizeValue) + rem;
}

//----------------------------------------------------

Line Height

This mixin sets the line height in rem's with a px fallback.

@mixin line-height($heightValue: 12 ){
	line-height: $heightValue + px; //fallback for old browsers
	line-height: (0.125 * $heightValue) + rem;
}

//-------------------------------------------------------

Visually hide an element

%visuallyhidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

//-------------------------------------------------------

@function black($opacity){
    @return rgba(0,0,0,$opacity)
}
@function white($opacity){
    @return rgba(255,255,255,$opacity)
}

//--------------------------------------------------------

@mixin navigation-list {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    > li{
        display:block;
        float:left;
        &:last-child{
            margin-right:0px;
        }
    }
}

//-----------------------------------------------------------

@mixin circle($size:40px) {
     width: $size;
     height: $size;
     border-radius: 100%;
}

//----------------------------------------------------------

Disables selection of content of a given element

@mixin x-user-select ($value: none) {
	-webkit-user-select: $value;
	   -moz-user-select: $value;
	    -ms-user-select: $value;
	        user-select: $value;
}