Skip to content

Instantly share code, notes, and snippets.

@mispa

mispa/SassMeister-input-HTML.html

Last active March 13, 2017 13:25
Show Gist options
  • Save mispa/60a3bfa96a466edce0c664aa375c7d7e to your computer and use it in GitHub Desktop.
Save mispa/60a3bfa96a466edce0c664aa375c7d7e to your computer and use it in GitHub Desktop.
Download ZIP
Sass Functions and Mixins. Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<style scoped>
.l-card {
display: flex;
}
.l-card__item {
width: 8rem;
border: 1px solid rgba(0, 0, 0, 0.1);
background-size: 8rem;
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: #fafafa;
padding: 9rem 1rem 1rem ;
margin: 2rem auto;
}
</style>
<div class="l-card">
<div class="example-svg-url-mixin l-card__item"></div>
<div class="example-svg-url-function l-card__item"></div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.5.0.beta.2)
// ----
///
/// Replace `$search` with `$replace` in `$string`
/// ***************************************************************************
/// @author Hugo Giraudel
/// @link http://sassmeister.com/gist/1b4f2da5527830088e4d
/// @link http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/**
* String Replace Example
*/
$example-text-colour: #0d4a77;
$example-icon-colour: str-replace(#{$example-text-colour}, "#", "%23");
.example {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E %3Cpath rect='#{$example-icon-colour}' width='256' height='56'/%3E %3C/svg%3E");
}
///
/// Function to create an optimized svg url
/// ***************************************************************************
/// @author jakob-e
/// @link http://codepen.io/jakob-e/pen/doMoML
@function svg-url($svg){
/// Add missing namespace
@if not str-index($svg,xmlns) {
$svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');
}
/// Chunk up string in order to avoid
/// "stack level too deep" error
$encoded:'';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg)/$slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
/// Encode
$chunk: str-replace($chunk,'"', '\'');
$chunk: str-replace($chunk,'%', '%25');
$chunk: str-replace($chunk,'&', '%26');
$chunk: str-replace($chunk,'#', '%23');
$chunk: str-replace($chunk,'{', '%7B');
$chunk: str-replace($chunk,'}', '%7D');
$chunk: str-replace($chunk,'<', '%3C');
$chunk: str-replace($chunk,'>', '%3E');
/// The maybe list
///
/// Keep size and compile time down
/// ... only add on documented fail
// $chunk: str-replace($chunk, '|', '%7C');
// $chunk: str-replace($chunk, '[', '%5B');
// $chunk: str-replace($chunk, ']', '%5D');
// $chunk: str-replace($chunk, '^', '%5E');
// $chunk: str-replace($chunk, '`', '%60');
// $chunk: str-replace($chunk, ';', '%3B');
// $chunk: str-replace($chunk, '?', '%3F');
// $chunk: str-replace($chunk, ':', '%3A');
// $chunk: str-replace($chunk, '@', '%40');
// $chunk: str-replace($chunk, '=', '%3D');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml,#{$encoded}");
}
/// Background svg mixin
@mixin background-svg($svg){
background-image: svg-url($svg);
}
/**
* Optimized SVG URL Example
*/
.example-svg-url-mixin {
@include background-svg('<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="128" cy="128" r="114" fill="none" stroke="#9dd" stroke-miterlimit="10" stroke-width="26"/></svg>');
}
.example-svg-url-function {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="128" cy="128" r="114" fill="none" stroke="#e99" stroke-miterlimit="10" stroke-width="26"/></svg>');
}
///
/// Easing Sass Map
/// ****************************************************************************
/// @author Sean Dempsey
/// @link https://css-tricks.com/snippets/sass/easing-map-get-function/
$ease: (
in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530),
in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190),
in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220),
in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060),
in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715),
in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035),
in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335),
in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045),
out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940),
out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000),
out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000),
out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000),
out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000),
out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000),
out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000),
out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275),
in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955),
in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000),
in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000),
in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000),
in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950),
in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000),
in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860),
in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550)
);
@function ease($key) {
@if map-has-key($ease, $key) {
@return map-get($ease, $key);
}
@warn "Unkown '#{$key}' in $ease.";
@return null;
}
/**
* Easing Sass Map Example
*/
.example { animation: fade-in 0.5s ease(in-out-quad) infinite alternate; }
.example { transition: max-height 0.5s ease(in-out-expo); }
///
/// Easing Functions
/// ****************************************************************************
@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); }
/**
* Easing Functions Example
*/
.example { transition: max-height 500ms ease-in-out-expo(); }
///
/// Sassy z-index Management for Complex Layouts
/// ****************************************************************************
/// @link www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts
/// @example .selector { z-index: z($index-base, modals); }
@function z($position:lowermost, $list:$index-base) {
@if $position == "behind" {
@return -1;
} @else {
$z-index: index($list, $position);
@if $z-index {
@return $z-index;
}
}
@warn 'There is no item "#{$position}" in this list; choose one of: #{$list}';
@return null;
}
///
/// Sassy z-index Management Mixin
/// ****************************************************************************
/// $index-key - Default: lowermost
/// $list - Default: $index-base
/// @requires z function
/// @example .selector { @include z-index-manager(uppermost); }
/// @example .selector { @include z-index-manager(uppermost, $index-base); }
@mixin z-index-manager($index-key:lowermost, $list:$index-base) {
z-index: z($index-key, $list);
}
///
/// Link Colour Mixin
/// ****************************************************************************
@mixin link-color($color) {
color: $color;
&:hover,
&:active,
&:focus { color: scale-color($color, $lightness: -20%); }
}
/**
* Link Colour Mixin Example
*/
a { @include link-color(#3cf); }
///
/// Fullscreen vendor prefixes
/// ****************************************************************************
$prefixes: (
'fullscreen': (
':-webkit-full-screen',
':-moz-full-screen',
':-ms-fullscreen',
':full-screen',
':fullscreen'
)
);
@mixin fullscreen-prefixes( $nested:null ) {
$fs: map-get($prefixes, 'fullscreen');
@each $prefix in $fs {
@if $nested == "nested" {
#{$prefix} & { @content; }
} @else {
#{$prefix} { @content; }
}
}
}
/**
* Link Colour Mixin Example
*/
@include fullscreen-prefixes(){
.example { display: none; }
}
.example--nested {
@include fullscreen-prefixes(nested){
.example__element { display: none; }
}
}
Raw
SassMeister-output.css
/**
* String Replace Example
*/
.example {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E %3Cpath rect='%230d4a77' width='256' height='56'/%3E %3C/svg%3E");
}
/**
* Optimized SVG URL Example
*/
.example-svg-url-mixin {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='114' fill='none' stroke='%239dd' stroke-miterlimit='10' stroke-width='26'/%3E%3C/svg%3E");
}
.example-svg-url-function {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='114' fill='none' stroke='%23e99' stroke-miterlimit='10' stroke-width='26'/%3E%3C/svg%3E");
}
/**
* Easing Sass Map Example
*/
.example {
animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
}
.example {
transition: max-height 0.5s cubic-bezier(1, 0, 0, 1);
}
/**
* Easing Functions Example
*/
.example {
transition: max-height 500ms cubic-bezier(1, 0, 0, 1);
}
/**
* Link Colour Mixin Example
*/
a {
color: #3cf;
}
a:hover, a:active, a:focus {
color: #00b8f5;
}
/**
* Link Colour Mixin Example
*/
:-webkit-full-screen .example {
display: none;
}
:-moz-full-screen .example {
display: none;
}
:-ms-fullscreen .example {
display: none;
}
:full-screen .example {
display: none;
}
:fullscreen .example {
display: none;
}
:-webkit-full-screen .example--nested .example__element {
display: none;
}
:-moz-full-screen .example--nested .example__element {
display: none;
}
:-ms-fullscreen .example--nested .example__element {
display: none;
}
:full-screen .example--nested .example__element {
display: none;
}
:fullscreen .example--nested .example__element {
display: none;
}
Raw
undefined
<style scoped>
.l-card {
display: flex;
}
.l-card__item {
width: 8rem;
border: 1px solid rgba(0, 0, 0, 0.1);
background-size: 8rem;
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: #fafafa;
padding: 9rem 1rem 1rem ;
margin: 2rem auto;
}
</style>
<div class="l-card">
<div class="example-svg-url-mixin l-card__item"></div>
<div class="example-svg-url-function l-card__item"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment