Vueture SASS Utils
npm install vueture-blocklevel-sass-utils bash
$ npm install vueture-blocklevel-sass-utils --save
`Open
`src/assets/sass/app.scss` and import `vueture-blocklevel-sass-utils`` scss
@import '~vueture-blocklevel-sass-utils';
`Functions #
See sass docs for more information about functions.Ease ##
CSS easings based on ceaser.$3
` scss
.my-ease-element {
transition: background 200ms ease('easeInOut');
}
`$3
| key | value |
|---|---|
| `linear` | `0.250, 0.250, 0.750, 0.750` |
| `ease` | `0.250, 0.100, 0.250, 1.000` |
| `easeIn` | `0.420, 0.000, 1.000, 1.000` |
| `easeOut` | `0.000, 0.000, 0.580, 1.000` |
| `easeInOut` | `0.420, 0.000, 0.580, 1.000` |
| `easeInQuad` | `0.550, 0.085, 0.680, 0.530` |
| `easeOutQuad` | `0.250, 0.460, 0.450, 0.940` |
| `easeInCubic` | `0.550, 0.055, 0.675, 0.190` |
| `easeOutCubic` | `0.215, 0.610, 0.355, 1.000` |
| `easeInQuart` | `0.895, 0.030, 0.685, 0.220` |
| `easeOutQuart` | `0.165, 0.840, 0.440, 1.000` |
| `easeInQuint` | `0.755, 0.050, 0.855, 0.060` |
| `easeOutQuint` | `0.230, 1.000, 0.320, 1.000` |
| `easeInSine` | `0.470, 0.000, 0.745, 0.715` |
| `easeOutSine` | `0.390, 0.575, 0.565, 1.000` |
| `easeInExpo` | `0.950, 0.050, 0.795, 0.035` |
| `easeOutExpo` | `0.190, 1.000, 0.220, 1.000` |
| `easeInCirc` | `0.600, 0.040, 0.980, 0.335` |
| `easeOutCirc` | `0.075, 0.820, 0.165, 1.000` |
| `easeInBack` | `0.600, -0.280, 0.735, 0.045` |
| `easeOutBack` | `0.175, 0.885, 0.320, 1.275` |
| `easeInOutQuad` | `0.455, 0.030, 0.515, 0.955` |
| `easeInOutCubic` | `0.645, 0.045, 0.355, 1.000` |
| `easeInOutQuart` | `0.770, 0.000, 0.175, 1.000` |
| `easeInOutQuint` | `0.860, 0.000, 0.070, 1.000` |
| `easeInOutSine` | `0.445, 0.050, 0.550, 0.950` |
| `easeInOutExpo` | `1.000, 0.000, 0.000, 1.000` |
| `easeInOutCirc` | `0.785, 0.135, 0.150, 0.860` |
| `easeInOutBack` | `0.680, -0.550, 0.265, 1.550` |
zIndex ##
Better z-index managing. Create a list of element names and get the `z-index` based on elements name. Returns a number.$3
` scss
@layout: content, popup;.content {
z-index: zindex($layout, content); // z-index: 1;
}
.popup {
z-index: zindex($layout, popup); // z-index: 2;
}
`$3
| name | type | description |
|---|---|---|
| `$list` | `(Array)` | The list to find the current `z-index` in |
| `$element` | `(String)` | The name of the current element, must be in the `$list` |Mixins #
See sass docs for more information about mixins.Aspect ratio ##
Maintain Aspect Ratio Mixin. The mixin assumes you'll be nesting an element with the class of content inside your initial block.$3
` scss
.sixteen-nine {
@include aspect-ratio(16, 9);
}
`` html
16:9
`$3
| width | type | default value | description |
|---|---|---|---|
|
`$width` | `(Number)` | `16` | Horizontal aspect ratio |
| `$height` | `(Number)` | `9` | Vertical aspect ratio |Font face ##
Font face helper. Be sure to have the following font files: eot, woff, ttf, svg. Font can be generated at https://www.fontsquirrel.com/tools/webfont-generator$3
`scss
// Name, folder, file
@include font-face('QuatroBold', 'quatro', 'quatro-bold');
`$3
| width | type | description |
|---|---|---|
| `font-name` | `(String)` | Name of the font |
| `folder-name` | `(String)` | Subfolder inside the fonts folder |
| `file-name` | `(String)` | Name of the font-file |
| `font-weight` | `(String)` | normal - Font weight value |
| `font-style` | `(String)` | normal - Font style value |Placeholder ##
Cross-browser :placeholder styles. Automatically adds all needed vendor prefixes.$3
`scss
input {
width: 200px; @include placeholder() {
font-style: italic;
color: #B4D433;
}
}
`Extends #
transform-center ##
Absolute element. Positioned in center horizontally and vertically.`scss
.my-element {
@extend %transform-center;
}// Renders:
.my-element {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
`force-hardware ##
Sets transform and backface-visiblity which forces hardware acceleration.`scss
.my-element {
@extend %force-hardware;
}// Renders:
.my-element {
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000;
}
`
clearfix ##
Clearfix, For clearing floats like a boss. See http://h5bp.com/qStyle guide: utils.extends.clearfix
`scss
.my-element {
@extend %clearfix;
}// Renders:
.my-element {
*zoom: 1;
&:before,
&:after {
display: table;
content: '';
line-height: 0;
}
&:after {
clear: both;
}
}
`reset-bmp ##
Resets border, margin and padding`scss
.my-element {
@extend %reset-bmp;
}// Renders:
.my-element {
border: 0;
padding: 0;
margin: 0;
}
`reset-list ##
Reset ul element. Removes list-style and extends %reset-bmp.`scss
ul {
@extend %reset-list;
}ul {
border: 0;
margin: 0;
padding: 0;
list-style: none;
}
`reset-input ##
Remove all default browser input styles.`scss
input {
@extend %reset-input;
}// Renders:
input {
display: inline-block;
border: 0;
padding: 0;
background: none;
-webkit-appearance: none;
&:focus { outline: 0; }
&::-moz-focus-inner,
&[type=reset]::-moz-focus-inner,
&[type=button]::-moz-focus-inner,
&[type=submit]::-moz-focus-inner,
&::-moz-focus-inner,
&[type=file] > [type=button]::-moz-focus-inner {
border: 0;
padding: 0;
}
}
`unstyled-link ##
A link that looks and acts like the text it is contained within.`scss
a {
@extend %unstyled-link;
}// Renders:
a {
color: inherit;
text-decoration: inherit;
cursor: inherit;
&:active,
&:focus {
outline: none;
}
}
``