Skip to content

Instantly share code, notes, and snippets.

@mispa

mispa/SassMeister-input.scss

Last active February 2, 2017 12:32
Show Gist options
  • Save mispa/9206589 to your computer and use it in GitHub Desktop.
Save mispa/9206589 to your computer and use it in GitHub Desktop.
Download ZIP
Obsolete Sass Mixins and Functions. Generated by SassMeister.com.
Raw
browserslist
> 1%
last 4 versions
Firefox ESR
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.6)
// ----
/*
* ******************************************************************************************
* ******************************************************************************************
* Obsolete Mixins and Functions
* ******************************************************************************************
* ******************************************************************************************
*/
/**
* Link Colour
* @example
*
*/
@mixin link-color($color) {
color: $color;
&:hover,
&:active,
&:focus { color: scale-color($color, $lightness: -20%); }
}
a { @include link-color(#3cf); }
/**
* Vendor Prefixing, simple
*/
@mixin vendor-prefix($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
.element { @include vendor-prefix(transition, all 0.5s ease-in-out); }
/**
* Opacity + Fallback IE <= 8
*/
@mixin opacity($opacity) {
opacity: $opacity;
$opacityIE: round($opacity * 100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacityIE})";
filter: alpha(opacity=$opacityIE);
}
.element { @include opacity(0.5); }
/**
* Font Size with rem, Fallback IE <= 8
*/
@mixin font-size($size: 24, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}
.element { @include font-size(12); }
/*!
* @author Schepp
* @link https://github.com/Schepp/SASS-Mixins
*/
@function fn-linear-gradient($args) {
$gradient: ();
$pos: nth($args, 1);
@if ($pos != 'top')
and ($pos != 'right')
and ($pos != 'bottom')
and ($pos != 'left')
and ($pos != 'to top')
and ($pos != 'to right')
and ($pos != 'to bottom')
and ($pos != 'to left') {
$pos: top;
}
@each $g in $args {
@if ($g != 'top')
and ($g != 'right')
and ($g != 'bottom')
and ($g != 'left')
and ($g != 'to top')
and ($g != 'to right')
and ($g != 'to bottom')
and ($g != 'to left') {
$gradient: append($gradient, $g, comma);
}
}
$collection: (
-webkit-linear-gradient($pos, $gradient),
-moz-linear-gradient($pos, $gradient),
-ms-linear-gradient($pos, $gradient),
-o-linear-gradient($pos, $gradient),
unquote('linear-gradient(#{$pos}, #{$gradient})')
);
@return $collection;
}
@mixin background($args) {
$webkit: ();
$moz: ();
$o: ();
$ms: ();
$official: ();
@each $bg in $args {
$g-webkit: '';
$g-moz: '';
$g-o: '';
$g-ms: '';
$g-official: '';
$isgradient: false;
@each $g in $bg {
$type: type-of($g);
@if($type == list) {
$isgradient: true;
}
}
@if ($isgradient != true) {
@each $g in $bg {
$g-webkit: $g-webkit + ' ' + $g;
$g-moz: $g-moz + ' ' + $g;
$g-o: $g-o + ' ' + $g;
$g-ms: $g-ms + ' ' + $g;
$g-official: $g-official + ' ' + $g;
}
}
@else {
$g-webkit: $g-webkit + nth(fn-linear-gradient($bg),1);
$g-moz: $g-moz + nth(fn-linear-gradient($bg),2);
$g-o: $g-o + nth(fn-linear-gradient($bg),3);
$g-ms: $g-ms + nth(fn-linear-gradient($bg),4);
$g-official: $g-official + nth(fn-linear-gradient($bg),5);
}
$webkit: append($webkit, unquote($g-webkit), comma);
$moz: append($moz, unquote($g-moz), comma);
$o: append($o, unquote($g-o), comma);
$ms: append($ms, unquote($g-ms), comma);
$official: append($official, unquote($g-official), comma);
}
background:unquote($webkit);
background:unquote($moz);
background:unquote($o);
background:unquote($ms);
background:unquote($official);
}
.element {
@include background((
#dfd url(../images/dummy.jpg) no-repeat left top,
(top, #fdd 0%, #f00 100%),
(#F00 20%, transparent 100%)
));
}
@mixin transition($expression) {
-webkit-transition: $expression;
-moz-transition: $expression;
-o-transition: $expression;
transition: $expression;
}
@function linear() { @return cubic-bezier(0.250, 0.250, 0.750, 0.750); }
@function ease() { @return cubic-bezier(0.250, 0.100, 0.250, 1.000); }
@function ease-in() { @return cubic-bezier(0.420, 0.000, 1.000, 1.000); }
@function ease-in-quad() { @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
@function ease-in-cubic() { @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
@function ease-in-quart() { @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
@function ease-in-quint() { @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
@function ease-in-sine() { @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
@function ease-in-expo() { @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
@function ease-in-circ() { @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }
@function ease-out() { @return cubic-bezier(0.000, 0.000, 0.580, 1.000); }
@function ease-out-quad() { @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
@function ease-out-cubic() { @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
@function ease-out-quart() { @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
@function ease-out-quint() { @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
@function ease-out-sine() { @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
@function ease-out-expo() { @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
@function ease-out-circ() { @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }
@function ease-in-out() { @return cubic-bezier(0.420, 0.000, 0.580, 1.000); }
@function ease-in-out-quad() { @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
@function ease-in-out-cubic() { @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
@function ease-in-out-quart() { @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
@function ease-in-out-quint() { @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
@function ease-in-out-sine() { @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
@function ease-in-out-expo() { @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
@function ease-in-out-circ() { @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }
.element { @include transition(background-color 500ms ease-in-out-expo()); }
/*! sass-mixins - v0.7.1 - 2014-02-07 */
/**
* @description
* Generates keyframe animations
*
* @author drublic
*
* @link caniuse http://caniuse.com/#feat=css-animation
* @link spec http://www.w3.org/TR/css3-animations/
*
* @param values
* @returns
* -webkit-animation: <values>;
* animation: <values>;
*
* @example
* .selector {
* @include x-animation(jump 1s ease-out);
* }
*/
@mixin x-animation ($values) {
-webkit-animation: $values;
animation: $values;
}
/*
* @example
* @include x-keyframes(jump) {
* from { top: 0; }
* to { top: -10px; }
* }
*/
@mixin x-keyframes ($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
/**
* @description
* Generates `appearance` for a given element
*
* @author romamatusevich
*
* @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
* @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/
* @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance
*
* @param value
* @returns
* -webkit-appearance: <value>;
* -moz-appearance: <value>;
* appearance: <value>;
*
* @example
* .selector {
* @include x-appearance(button);
* }
*/
@mixin x-appearance ($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
appearance: $value;
}
/**
* @description
* Generates cross-browser-compatible `box-sizing` output for a given element.
*
* @author drublic
*
* @link caniuse
* @link spec
*
* @param type
* @returns
* -webkit-box-sizing: <type>;
* -moz-box-sizing: <type>;
* box-sizing: <type>;
*
* @example
* .selector {
* @include x-box-sizing;
* }
*/
@mixin x-box-sizing ($type: border-box) {
-webkit-box-sizing: $type; // Safari <= 5.0, Chrome <= 9.0, iOS Safari 3.2 - 4.3 and Android 2.1 - 3.0
-moz-box-sizing: $type; // FF 2.0+
box-sizing: $type; // IE 8, Opera 9.5+
}
/**
* @description
* These mixins generates Media Queries
*
* @author drublic
*
* @link caniuse http://caniuse.com/#feat=css-mediaqueries
* @link spec http://www.w3.org/TR/css3-mediaqueries/
*
* Note: Please use the CSS unit `em` for device-width in order to stay
* responsive.
*/
/**
* @param device-width {number}
* @content
* @returns
* @media screen and (min-width: <device-width>) {
* <content>
* }
*
* @example
* .selector {
* x-at-least(40em) { width: 60%; }
* }
*/
@mixin x-at-least ($device-width) {
@media screen and (min-width: $device-width) {
@content;
}
}
/**
* @param device-width {number}
* @content
* @returns
* @media screen and (max-width: <device-width - 0.01>) {
* <content>
* }
*
* @example
* .selector {
* x-until(40em) { width: 100%; }
* }
*/
@mixin x-until ($device-width) {
@media screen and (max-width: $device-width - 0.01) {
@content;
}
}
/**
* @author romamatusevich
*
* @param point{string}, bp-mobile-width{number}, bp-tablet-width{number}
* @content
* @returns
* @media (max-width: <bp-mobile-width>) {
* <content>
* }
*
* @example
* .selector {
* x-breakpoints(mobile, 320px) { width: 100%; }
* }
*/
@mixin x-breakpoints($point, $bp-mobile-width: 640px, $bp-tablet-width: 1024px) {
$bp-mobile: '(max-width: #{$bp-mobile-width})';
$bp-tablet: '(min-width: #{$bp-mobile-width}) and (max-width: #{$bp-tablet-width})';
$bp-desktop: '(min-width: #{$bp-tablet-width})';
@if $point == mobile {
@media #{$bp-mobile} {
@content;
}
}
@else if $point == tablet {
@media #{$bp-tablet} {
@content;
}
}
@else if $point == desktop {
@media #{$bp-desktop} {
@content;
}
}
}
// Helper for old syntax in linear-gradients
// Return the corrected angle or position for a css gradient
@function angle ($deg) {
@if type-of($deg) == 'number' {
@return mod(abs($deg - 450), 360deg);
} @else {
$position: to + " ";
@each $pos in $deg {
$position: $position + opposite-position($pos) + " ";
}
@return $position;
}
}
@function helper-gradient-angle ($direction) {
$old-direction: $direction;
$veryold-direction: $direction;
// New Syntax has to be evaluated to old one
@if $direction == "to bottom" {
$old-direction: "top";
} @else if $direction == "to right" {
$old-direction: "left";
} @else if $direction == "to top" {
$old-direction: "bottom";
} @else if $direction == "to left" {
$old-direction: "right";
} @else {
$old-direction: angle($direction);
}
// And also for very old syntax
@if $direction == "to bottom" {
$veryold-direction: "left top, left bottom";
} @else if $direction == "to right" {
$veryold-direction: "top left, bottom right";
} @else if $direction == "to top" {
$veryold-direction: "left bottom, left top";
} @else if $direction == "to left" {
$veryold-direction: "top right, bottom left";
} @else {
$veryold-direction: angle($direction);
}
@return $old-direction, $veryold-direction;
}
/**
* @description
* Generates a linear gradient for a given element with a fallback color.
*
* @author drublic
*
* @link caniuse
* @link spec
*
* @dependency helper-gradient-angle
* @param direction {'to bottom'|'to right'|'to top'|'to left'|<degree>}
* @param fallback {color}
* @param from {color}
* @param to {color}
* @default 'to bottom', #ccc, #ccc, #aaa
*
* @returns
* background-color: <fallback>;
* background-image: -webkit-gradient(linear, <direction - old converted>, from(<from>), to(<to>));
* background-image: -webkit-linear-gradient(<direction - converted>, <from>, <to>);
* background-image: linear-gradient(<direction>, <from>, <to>);
*
* @example
* .selector {
* @include x-linear-gradient("to bottom", #ccc, #ddd, #bbb);
* }
*
* Note: By default this linear-gradient-mixin encourages people to use the
* latest CSS-syntax for gradients.
*/
@mixin x-linear-gradient ($direction: "to bottom", $fallback: #ccc, $from: #ccc, $to: #aaa) {
$directions: helper-gradient-angle($direction);
// Provide a fallback-color
background-color: $fallback;
// Cross-browser linear-gradients
background-image: -webkit-gradient(linear, unquote(nth($directions, 2)), from($from), to($to)); // Android 2.1-3.0
background-image: -webkit-linear-gradient(unquote(nth($directions, 1)), $from, $to);
background-image: linear-gradient(unquote($direction), $from, $to);
}
/**
* @description
* This mixin generates multiple backgrounds
*
* @author drublic
*
* @link caniuse http://caniuse.com/css-gradients
* @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
*/
/*
* A function for prefixing gradients
*
* @param mode {'webkit-old'|'webkit'|''}
* @param gradient
* @returns
* -<mode>-linear-gradient(<gradient>);
*/
@function prefixed-gradient ($mode, $gradient) {
$prefix: '-' + $mode + '-';
// Get angles
$angles: helper-gradient-angle('' + nth($gradient, 2));
$angle: nth($angles, 1);
// If unprefixed
@if ($mode == '') {
$prefix: '';
$angle: nth($gradient, 2);
}
// @TODO define old webkit mode
@if ($mode == 'webkit-old') {
$prefix: '-webkit-';
$angle: nth($angles, 2);
}
$prefixed: $prefix + 'linear-gradient(' + $angle;
@for $i from 1 through length($gradient) {
@if ($i > 2) {
$prefixed: append(unquote($prefixed), nth($gradient, $i), comma);
}
}
$prefixed: $prefixed + ')';
@return unquote($prefixed);
}
/*
* Generates multiple backgrounds
*
* @param backgrounds {list}
*
* @example
* .selector {
* @include x-multiple-backgrounds(
* rgba(0, 0, 0, 0.3),
* url('../img/html5_logo.png') top right no-repeat,
* (linear-gradient, to bottom, #aaa, #ddd)
* );
* }
*/
@mixin x-multiple-backgrounds ($backgrounds...) {
$combined-background-webkit-old: ();
$combined-background-webkit: ();
$combined-background: ();
$end: '';
// Iterate through all backgrounds passed
@each $background in $backgrounds {
// Prefix gradients
@if (type-of($background) == list) {
@if (nth($background, 1) == 'linear-gradient') {
$combined-background-webkit-old: append($combined-background-webkit-old, prefixed-gradient('webkit-old', $background), comma);
$combined-background-webkit: append($combined-background-webkit, prefixed-gradient('webkit', $background), comma);
$combined-background: append($combined-background, prefixed-gradient('', $background), comma);
// Nothing to do for non-gradients
} @else {
$combined-background-webkit-old: append($combined-background-webkit-old, $background, comma);
$combined-background-webkit: append($combined-background-webkit, $background, comma);
$combined-background: append($combined-background, $background, comma);
}
// Put colors at end of combined background
} @else if (type-of($background) == color) {
$end: $background;
$background: null;
} @else if (type-of($background) == string) {
$combined-background-webkit-old: append($combined-background-webkit-old, $background, space);
$combined-background-webkit: append($combined-background-webkit, $background, comma);
$combined-background: append($combined-background, $background, comma);
}
}
// Append color if there is one
@if $end != '' {
$combined-background-webkit-old: append($combined-background-webkit-old, $end, space);
$combined-background-webkit: append($combined-background-webkit, $end, comma);
$combined-background: append($combined-background, $end, comma);
}
// Only print all prefixed versions if necessary
@if ($combined-background != $combined-background-webkit) {
background: unquote($combined-background-webkit-old);
background: unquote($combined-background-webkit);
background: unquote($combined-background);
} @else {
background: unquote($combined-background);
}
}
/**
* @description
* This mixin creates (endless) multiple color stops in gradients just with one
* call for the mixin.
*
* @author drublic
*
* @link caniuse http://caniuse.com/css-gradients
* @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
*
* @param stops {list}
* @returns
* background-image: -webkit-linear-gradient(top, <stops[1]>, <stops[2]>, ..., <stops[n]>);
* background-image: linear-gradient(to bottom, <stops[1]>, <stops[2]>, ..., <stops[n]>);
*
* @example
* .selector {
* @include x-multiple-colored-gradient(( "top", #aaa 0%, #bbb 50%, #ccc 100% ));
* }
*
* Note: This mixis does not define a fallback-color for your background as it
* is likely you want to add an image or something. Please specify one by
* yourself.
*/
@mixin x-multiple-colored-gradient ($args) {
$gradient: ();
$pos: nth($args, 1);
$pos_newsyntax: ();
@if ($pos != 'top')
and ($pos != 'right')
and ($pos != 'bottom')
and ($pos != 'left')
and ($pos != 'to top')
and ($pos != 'to right')
and ($pos != 'to bottom')
and ($pos != 'to left') {
$pos: 'top';
}
// New Syntax
@if $pos == 'top' {
$pos_newsyntax: 'to bottom';
} @else if $pos == 'right' {
$pos_newsyntax: 'to left';
} @else if $pos == 'bottom' {
$pos_newsyntax: 'to top';
} @else if $pos == 'left' {
$pos_newsyntax: 'to right';
}
@each $g in $args {
@if ($g != 'top')
and ($g != 'right')
and ($g != 'bottom')
and ($g != 'left')
and ($g != 'to top')
and ($g != 'to right')
and ($g != 'to bottom')
and ($g != 'to left') {
$gradient: append($gradient, $g, comma);
}
}
background-image: -webkit-linear-gradient(unquote($pos), $gradient);
background-image: unquote('linear-gradient(#{$pos_newsyntax}, #{$gradient})');
}
/**
* @description
* Generates `opacity` output for a given element and adds a filter for old IE.
*
* @author bartveneman
*
* @link caniuse http://caniuse.com/css-opacity
* @link spec http://www.w3.org/TR/css3-color/#transparency
*
* @param value
* @returns
* opacity: <value>;
* filter: alpha(opacity=<value * 100>);
*
* @example
* .selector {
* @include x-opacity(0.3);
* }
*/
@mixin x-opacity ($value: 1) {
opacity: $value;
filter: alpha(opacity=$value * 100);
}
/**
* @description
* Generates `placeholder` content for a given element
*
* @author romamatusevich
*
* @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
* @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/
*
* @returns
* &::-webkit-input-placeholder {
* <content property 1>: <content value 1>;
* ...
* <content property n>: <content value n>;
* }
* &::-moz-placeholder {
* <content property 1>: <content value 1>;
* ...
* <content property n>: <content value n>;
* }
* &:-ms-input-placeholder {
* <content property 1>: <content value 1>;
* ...
* <content property n>: <content value n>;
* }
*
* @example
* .selector {
* @include x-placeholder {
* color: #bada55;
* font-weight: bold;
* }
* }
*/
@mixin x-placeholder {
&::-webkit-input-placeholder {
@content // Chrome, Safari, Opera
}
&::-moz-placeholder {
@content // Firefox 19+
}
&:-ms-input-placeholder {
@content // IE 10+
}
}
/**
* @description
* This mixin will enable using the CSS3 value `rem`, which lets you define
* property-sizes based on the root-element's font-size.
*
* @author drublic
*
* @link caniuse http://caniuse.com/rem
* @link spec http://www.w3.org/TR/css3-values/#relative0
*
* @param property
* @param values
* @param default-font-size int optional
* @returns
* <property>: (<value> * <default-font-size>)px;
* <property>: <value>;
*
* @example
* .selector {
* @include x-rem(font-size, 1.3);
* }
*
* Note: Depending on the font-size of the root-element `rem` calculates a
* property of a current element. The fallback solution excepts a
* `default-font-size`-argument which is 16px by default.
*/
@mixin x-rem ($property, $values, $main-font-size: 16px) {
// Empty list for all values in px
$px-values: ();
$rem-values: ();
// Iterate over entries
@each $value in $values {
// If the value is zero, return 0
@if ( $value == 0 ) or type_of($value) == string or type_of($value) == color or type_of($value) == bool {
$px-values: append($px-values, $value);
$rem-values: append($rem-values, $value);
// If the value is not zero, convert it from px to rem
} @else {
$px-values: append($px-values, ($value * $main-font-size) );
$rem-values: append($rem-values, #{$value}rem);
}
}
// Return the property and its list of converted values
#{$property}: #{$px-values};
#{$property}: #{$rem-values};
}
/**
* @description
* Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible
* `tab-size` output.
*
* @author drublic
*
* @link caniuse http://caniuse.com/css3-tabsize
* @link spec http://dev.w3.org/csswg/css-text/#tab-size1
*
* @param value int optional
* @default 4
* @returns
* -moz-tab-size: <value>;
* tab-size: <value>;
*
* @example
* .selector {
* @include x-tab-size(4);
* }
*/
@mixin x-tab-size ($value: 4) {
-moz-tab-size: $value;
tab-size: $value;
}
/**
* @description
* Generates cross-browser-compatible `transform` for a given element
*
* @author drublic
*
* @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d
* @link spec
*
* @param values
* @returns
* -webkit-transform: <values>;
* -ms-transform: <values>;
* transform: <values>;
*
* @example
* .selector {
* @include x-transform(rotate(1deg));
* }
*/
@mixin x-transform ($values) {
-webkit-transform: $values; // Chrome, Safari, iOS Safari, Android Stock
-ms-transform: $values; // IE9
transform: $values;
}
/**
* @description
* Generates cross-browser-compatible `transition` output for a given element.
*
* @author drublic
*
* @link caniuse http://caniuse.com/css-transitions
* @link spec
*
* @param values
* @returns
* -webkit-transition: <values>;
* transition: <values>;
*
* @example
* .selector {
* @include x-transition(background 0.3s ease-in);
* }
*/
@mixin x-transition ($values) {
-webkit-transition: $values;
transition: $values;
}
/**
* @description
* Disables selection of content of a given element
*
* @author drublic
*
* @link caniuse http://caniuse.com/user-select-none
*
* @param value none|auto optional
* @default none
* @returns
* -webkit-user-select: <value>;
* -moz-user-select: <value>;
* -ms-user-select: <value>;
* user-select: <value>;
*
* @example
* .selector {
* @include x-user-select;
* }
*/
@mixin x-user-select ($value: none) {
-webkit-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
@geraldgrafik
Copy link

Hi mispa. Nice work on your SASS mixins! Just noticed that the color link mixin from line 6 - 17 will generate errors when compiled.

Instead of:
&:hover, &:active, &:focus {
color: lighten($color, 20%);
}

Use this:
@mixin linkColor($color) {
color: $color;
&:hover, &:active, &:focus {
color: lighten($color, 20%);
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment