Skip to content

Instantly share code, notes, and snippets.

@WebbizAdmin

WebbizAdmin/_mixins.scss

Last active Mar 12, 2016
Embed
What would you like to do?
// Meida Queries
@mixin break($args...) {
@if length($args) == 1 {
@media (min-width: nth($args, 1)) {
@content;
}
} @else {
@media (min-width: nth($args, 1)) and (max-width: nth($args, 2)) {
@content;
}
}
}
/// Mixin printing a linear-gradient
// reference Hugo Giraudel | sitepoint
@mixin linear-gradient($direction, $color-stops...) {
// Direction has been omitted and happens to be a color-stop
@if is-direction($direction) == false {
$color-stops: $direction, $color-stops;
$direction: 180deg;
}
background: nth(nth($color-stops, 1), 1);
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
background: linear-gradient($direction, $color-stops);
}
// Border radius mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
// Box shadow
@mixin box-shadow($x, $y, $br, $sr, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $x $y $br $sr $color;
-moz-box-shadow:inset $x $y $br $sr $color;
box-shadow:inset $x $y $br $sr $color;
} @else {
-webkit-box-shadow: $x $y $br $sr $color;
-moz-box-shadow: $x $y $br $sr $color;
box-shadow: $x $y $br $sr $color;
}
}
// Placeholder Text
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment