Skip to content

Instantly share code, notes, and snippets.

@nucliweb
Created May 15, 2014 18:29
Show Gist options
  • Save nucliweb/282b1976c335a0328aa8 to your computer and use it in GitHub Desktop.
Save nucliweb/282b1976c335a0328aa8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
// Mixin @each vendor
@mixin vendor($prop, $args) {
@each $vendor in webkit, moz, ms, o {
-#{$vendor}-#{$prop}: $args;
}
#{$prop}: $args;
}
.border-radius {
@include vendor(border-raius,5px);
}
//////////////////////////////////////////
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.icon-error {
@extend %icon;
color: red;
}
.icon-info {
@extend %icon;
color: blue;
}
//////////////////////////////////////////
@mixin media($type) {
@if $type == tablet {
@media only screen and (min-width:768px) and (max-width:991px) {
@content;
}
}
@else if $type == mobile {
@media only screen and (max-width:767px) {
@content;
}
}
}
.content {
width: 960px;
@include media(tablet) {
width: 720px;
}
@include media(mobile) {
width: 90%;
}
}
//////////////////////////////////////////
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: 479px) { @content; }
}
@else if $media == wide-handhelds {
@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
}
@else if $media == tablets {
@media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
}
}
#sidebar {
float: left;
width: 300px;
@include respond-to(handhelds) { float: none; }
@include respond-to(wide-handhelds) { float: none; }
@include respond-to(tablets) { width: 240px; }
}
//////////////////////////////////////////
/**
* cross multiplication percentages
*/
@function cross-multiplication( $value1, $value2 ) {
@return ($value1 * $value2) / 100;
}
/**
* Turn numbers with units into unitless numbers
*/
@function clear-units($value){
@return ($value / ($value * 0 + 1));
}
.border-radius {
-webkit-border-raius: 5px;
-moz-border-raius: 5px;
-ms-border-raius: 5px;
-o-border-raius: 5px;
border-raius: 5px;
}
.icon-error, .icon-info {
transition: background-color ease .2s;
margin: 0 .5em;
}
.icon-error {
color: red;
}
.icon-info {
color: blue;
}
.content {
width: 960px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.content {
width: 720px;
}
}
@media only screen and (max-width: 767px) {
.content {
width: 90%;
}
}
#sidebar {
float: left;
width: 300px;
}
@media only screen and (max-width: 479px) {
#sidebar {
float: none;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#sidebar {
float: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#sidebar {
width: 240px;
}
}
/**
* cross multiplication percentages
*/
/**
* Turn numbers with units into unitless numbers
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment