SCSS helpers for every day usage
This is a WIP repository. For details about the current helpers and tools, please see below.
You can download this repository directly or install it via npm or yarn:
# later we will have a real name for the package (let's hope so)
npm i https://github.com/scriptex/scss-helpers
# or
yarn add https://github.com/scriptex/scss-helpersIf installed via npm or yarn, just @import the main file:
@import 'scss-helpers';
/* or if that does not work */
@import 'scss-helpers/index.scss';If manually downloaded, then copy the scss-helpers folder in your application folder and manually import the index.scss file or the file that you wish to use.
More details about each file can be found below.
This is a mixin for multiple color stops gradient without blurs and fading between stops. You can see a demo here.
To import only this mixin, use
@import 'scss-helpers/helpers/rainbow';Then use the mixin:
/*
* @param $colors - SCSS Map of colors
* @param $stops - SCSS Map of color stops
* @param $direction - One of 'horizontal' or 'vertical'
*/
@include rainbow($colors, $stops, $direction);This is a mixin for triangle shape with rounded corners (or without, it's up to you). The triangle can also have a gradient background. You can see a demo here.
To import only this mixin, use
@import 'scss-helpers/helpers/triangle';Then use the mixin:
/*
* @param: $size - width/height of the triangle. Default: 2rem
* @param: $background - any valid CSS background declaration. Default: red
* @param: $radius - true or false (if false, no radius). Default: true
*/
@include rainbow($size, $background, $radius);This is a mixin which, when included, prevents long text strings from breaking out of their container (and introducing horizontal scrollbars). For more info, please refer to this CSS Tricks post.
To import only this mixin, use
@import 'scss-helpers/helpers/unbreak';Then use the mixin:
/*
* @param: $hyphens - one of 'none', 'manual' or 'auto'. Default: auto
*/
@include unbreak($size, $background, $radius);This is an animated SVG loader with predefined SVG image embeded into the stylesheet.
To import only this mixin, use
@import 'scss-helpers/helpers/loader';Then use the mixin:
/*
* @param: $loader - SVG image code. Defaults to [this](https://github.com/scriptex/scss-helpers/blob/master/helpers/_loader.scss#L3)
* @param: $repeat - background-repeat property. Default: no-repeat
* @param: $position - background-position property. Default: 50% 50%
* @param: $size - background-size property. Default: 2rem 2rem
*/
@include loader($loader, $repeat, $position, $size);This is a(n experimental) media query for detecting devices which support hover. Since IE does not support this, the hover will work in any version of IE (above 9 of course) which makes the hover media just noise.
To import only this file, use
@import 'scss-helpers/tools/hover';Then use the media query:
@include hover {
/* your hover state goes here */
}A handy function which replaces all occurences of a string in another string.
To import only this file, use
@import 'scss-helpers/tools/string-replace';Then use the function:
$string: 'something meaningful';
$search: 'meaningful';
$replace: 'awesome';
$result: str-replace($string, $search, $replace: '');
/*
* $result should equal to 'something awesome'
*/This is similar to the loader mixin but accepts a valid SVG code as first argument
To import only this mixin, use
@import 'scss-helpers/tools/svg-background';Then use the mixin:
/*
* @param: $svg - SVG image code
* @param: $repeat - background-repeat property. Default: no-repeat
* @param: $position - background-position property. Default: 0 0
* @param: $size - background-size property. Default: 100% 100%
*/
@include background-svg($svg, $repeat, $position, $size);This mixins accepts a list of SVG image codes and returns a background-image containing all of the SVGs
To import only this mixin, use
@import 'scss-helpers/tools/svg-background-multiple';Then use the mixin:
/*
* Each parameter is a valid SVG code string
*/
@include multi-background-svg($svg1, $svg2, $svg3, $svg4);This function accepts a valid SVG code as string and returns base64 encoded string.
To import only this function, use
@import 'scss-helpers/tools/svg-url';Then use the function:
$svg-image: '<svg xmlns="http://www.w3.org/2000/svg">MORE SVG CODE HERE</svg>';
$svg-string: svg-url($svg-image);Let's say that you have several CSS custom properties defined:
:root {
--main-color: #bada55;
--font-size-base: 1.25rem;
}And you use these custom properties everywhere. Instead of doing this:
body {
font-size: var(--font-size-base);
color: var(--main-color);
}you can do this:
@import 'scss-helpers/tools/v';
body {
font-size: v(font-size-base);
color: v(main-color);
}MIT
