Skip to content

Instantly share code, notes, and snippets.

@gsambrotta
Last active September 14, 2016 15:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gsambrotta/57a094d1e8653ea7c4d5 to your computer and use it in GitHub Desktop.
Save gsambrotta/57a094d1e8653ea7c4d5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
a {
background-image: -moz-linear-gradient(top, red, #fe0170);
background-image: -webkit-gradient(linear, left top, left bottom, from(red), to(#fe0170));
}
p {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
// Prefix
//
// CSS vendor prefix mixin for desktops
// e.g. p {@include prefix((transform: translate(-50%, -50%)), webkit ms);}
// Credit: http://www.sitepoint.com/sass-mixins-kickstart-project/
// -------------------------
@mixin prefix($map, $vendors: webkit moz ms o) {
@each $prop, $value in $map {
@if $vendors {
@each $vendor in $vendors {
// CSS vendor prefix mixin for desktops
#{"-" + $vendor + "-" + $prop}: #{$value};
// -------------------------
}
}
// Dump regular property anyway
#{$prop}: #{$value};
}
}
// CSS vendor prefix mixin for desktops
// e.g. p {@include prefix-value((display: flex), webkit ms);}
@mixin prefix-on-value($map, $vendors: webkit moz ms o) {
@each $prop, $value in $map {
@if $vendors {
@each $vendor in $vendors {
// CSS vendor prefix mixin for desktops
#{$prop}: #{"-" + $vendor + "-" + $value};
// -------------------------
}
}
// Dump regular property anyway
#{$prop}: #{$value};
}
}
@mixin background-linear-gradient($defs, $vendors: webkit moz ms o) {
@if $vendors {
@each $vendor in $vendors {
background-image: -#{$vendor}-linear-gradient($defs)
}
}
// Dump non-prefixed rule as well
background-image: linear-gradient($defs)
}
@mixin background-linear-gradient($defs, $vendors: webkit moz ms o) {
@if $vendors {
@each $vendor in $vendors {
background-image: -#{$vendor}-linear-gradient($defs)
}
}
// Dump non-prefixed rule as well
background-image: linear-gradient($defs)
}
$pinky: #fe0170;
$pink-lighter: #f7a199;
a {
background-image: -moz-linear-gradient(top, red, $pinky);
background-image: -webkit-gradient(linear, left top, left bottom, from(red), to($pinky));
}
p {
@include prefix-on-value((display: flex), webkit);
@include prefix((justify-content: center), webkit);
@include prefix-on-value((cursor: grab), webkit);
@include prefix((user-select: none), webkit moz ms o);
//@include background-linear-gradient((top, red, $pinky), moz );
//@include background-linear-gradient((linear, left top, left bottom, red, $pinky), webkit );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment