Skip to content

Instantly share code, notes, and snippets.

@electricg
Created October 4, 2012 14:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save electricg/3833734 to your computer and use it in GitHub Desktop.
Save electricg/3833734 to your computer and use it in GitHub Desktop.
My SCSS mixin
@mixin box-sizing ($box) {
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
}
@mixin border-radius ($val) {
-webkit-border-radius: $val;
-moz-border-radius: $val;
border-radius: $val;
}
@mixin box-shadow ($val) {
-webkit-box-shadow: $val;
-moz-box-shadow: $val;
box-shadow: $val;
}
@mixin transition ($val) {
-webkit-transition: $val;
-moz-transition: $val;
-ms-transition: $val;
-o-transition: $val;
transition: $val;
}
@mixin column-gap ($val) {
-webkit-column-gap: $val;
-moz-column-gap: $val;
-ms-column-gap: $val;
column-gap: $val;
}
@mixin column-width ($val) {
-webkit-column-width: $val;
-moz-column-width: $val;
-ms-column-width: $val;
column-width: $val;
}
@mixin clearfix {
&:before, &:after { content: ""; display: table; }
&:after { clear: both; }
*zoom: 1;
}
@mixin ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
// $val in px
@mixin font-size ($val) {
font-size: #{$val}px;
font-size: #{$val/16}rem;
}
@mixin bg-gradient ($val1, $val2, $val3) {
background: $val1;
background: $val3;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $val1), color-stop(100%,$val2));
background: -webkit-linear-gradient(top, $val1 0%, $val2 100%);
background: -moz-linear-gradient(top, $val1 0%, $val2 100%);
background: -ms-linear-gradient(top, $val1 0%, $val2 100%);
background: -o-linear-gradient(top, $val1 0%, $val2 100%);
background: linear-gradient(to bottom, $val1 0%, $val2 100%);
///*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$val1}', endColorstr='#{$val2}',GradientType=0 );*/
}
@mixin font-face($name, $url, $weight, $style, $original) {
@font-face {
/*font-family: '#{$original}';*/
font-family: $name;
src: url('#{$url}.eot');
src: url('#{$url}.eot?#iefix') format('embedded-opentype'),
url('#{$url}.woff') format('woff'),
url('#{$url}.ttf') format('truetype'),
url('#{$url}.svg##{$original}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
@mixin link ($par) {
#{$par}:link, #{$par}:visited, #{$par}:hover, #{$par}:focus, #{$par}:active {
@content;
}
}
@mixin link-hfa ($par) {
#{$par}:hover, #{$par}:focus, #{$par}:active {
@content;
}
}
@mixin link-hf ($par) {
#{$par}:hover, #{$par}:focus {
@content;
}
}
@mixin mq-min ($width, $ratio: 1) {
@if $ratio > 1 {
@if $width > 0 {
@include mq-comment($width, $ratio);
@media only screen and (min-width: $width) and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min-width: $width) and (min--moz-device-pixel-ratio: $ratio),
only screen and (min-width: $width) and (min-device-pixel-ratio: $ratio) {
@content;
}
}
@else {
@include mq-comment($width, $ratio);
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (min-device-pixel-ratio: $ratio) {
@content;
}
}
}
@else {
@include mq-comment($width, $ratio);
@media only screen and (min-width: $width) {
@content;
}
}
}
$fix-mqs: false !default;
@mixin mq-min-check ($width, $ratio: 1) {
@if $fix-mqs {
@if $fix-mqs >= $width and $ratio == 1 {
@content;
}
}
@else {
@include mq-min($width, $ratio) {
@content;
}
}
}
// iPhone landscape
@mixin mq-iphone-l {
@if $fix-mqs == false {
/* iPhone landscape
========================================================================== */
@media only screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
@content;
}
}
}
// iPhone portrait
@mixin mq-iphone-p {
@if $fix-mqs == false {
/* iPhone portrait
========================================================================== */
@media only screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
@content;
}
}
}
@mixin mq-comment ($width, $ratio) {
/* #{$width} #{$ratio}x
========================================================================== */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment