Skip to content

Instantly share code, notes, and snippets.

@chriskoelle
Created December 2, 2013 20:20
Show Gist options
  • Save chriskoelle/7758078 to your computer and use it in GitHub Desktop.
Save chriskoelle/7758078 to your computer and use it in GitHub Desktop.
SASS Custom Mixins
// Cross browser opacity
@mixin opacity ( $value: 0.5 ) {
opacity: $value;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $value * 100 ")";
filter: alpha(opacity= $value * 100 );
zoom: 1;
}
// Media Queries
@mixin mq($query) {
@media #{$query} { @content; };
}
@mixin mqmax($size) {
@media only screen and (max-width: $size) { @content; }
}
@mixin mqmin($size) {
@media only screen and (min-width: $size) { @content; }
}
// Absolutely position elements
@mixin abs ($top: false, $right: false, $bottom: false, $left: false) {
position: absolute;
@if $top { top: $top; }
@if $right { right: $right; }
@if $bottom { bottom: $bottom; }
@if $left { left: $left; }
}
/**
* Returns a list of all text-based input types (excluding textarea)
* @pseudo {String} An optional pseudo selector (eg: :hover, :focus)
* @additional {List} An optional list of additional input types posible types include: color, date, datetime, datetime-local, month, time, week
*/
$text-inputs: "text",
"email",
"url",
"tel",
"number",
"search",
"password";
@mixin textfields($pseudo: '', $additional: ()) {
$types: ();
@each $type in $text-inputs {
$types: append($types, unquote('&[type="#{$type}"]#{$pseudo}'), comma);
}
@each $type in $additional {
$types: append($types, unquote('&[type="#{$type}"]#{$pseudo}'), comma);
}
input {
#{$types} {
@content
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment