Skip to content

Instantly share code, notes, and snippets.

@dylanburkey
Created March 2, 2015 22:34
Show Gist options
  • Save dylanburkey/58217d6e05db3236c861 to your computer and use it in GitHub Desktop.
Save dylanburkey/58217d6e05db3236c861 to your computer and use it in GitHub Desktop.
Mixins to use in 2015.
base-font-size: 16px !default;
$base-line-height: 24px !default;
$lincoln-red: #be1e2d;
$black: rgb(0,0,0);
$white: rgb(255,255,255);
$red: rgb(190,30,45);
$tan: rgb(228,227,207);
$dark-red: rgb(139,14,26);
$dark-black: #333;
$b75: rgb(102,102,102);
$b50: rgb(153,153,153);
$b25: rgb(204,204,204);
$b10: rgb(230,230,230);
/**
* Functions
*/
@function calculateRem($size) {
$remSize: $size / 16px;
@return #{$remSize}rem;
}
@mixin rem-size($size,$context) {
#{$context}: $size; //Fallback in px
#{$context}: calculateRem($size);
}
@function rem($size){
$remValue: $size / $base-font-size;
@return #{$remValue}rem;
}
@mixin box-sizing($type: border-box) {
&,&:before,&:after {
-moz-box-sizing: $type;
-webkit-box-sizing: $type;
box-sizing: $type;
}
}
@mixin font-size($font-size, $line-height:true){
font-size:$font-size;
font-size:($font-size / $base-font-size)*1rem;
@if $line-height == true{
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin large-desktop-style {
@media (min-width: $large-desktop-style){
@content;
}
}
@mixin desktop-style {
@media (min-width: $desktop-bp){
@content;
}
}
@mixin tablet-style {
@media (min-width: $tablet-bp){
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment