UNPKG

@ederssouza/sass-helpers

Version:

Functions, mixins and placeholders for speed up your development process.

404 lines (327 loc) 6.17 kB
# Sass Helpers [![npm version](http://img.shields.io/npm/v/@ederssouza/sass-helpers.svg)](https://npmjs.org/package/@ederssouza/sass-helpers) Functions, mixins and placeholders for speed up your development process. ## Installation ```bash npm install @ederssouza/sass-helpers --save-dev ``` ## How to use Import the global `index.scss` file in your project. ```scss @import '~@ederssouza/sass-helpers'; ``` ## Mixins See [mixins.scss](https://github.com/ederssouza/sass-helpers/blob/master/src/_mixins.scss). ### CSS3 animation #### scss ```scss .icon { width: 100px; height: 100px; background-color: red; @include animation(changeBg 4s); } @include keyframes(changeBg) { from {background-color: red;} to {background-color: yellow;} } ``` #### css compiled ```css .icon { width: 100px; height: 100px; background-color: red; -webkit-animation: changeBg 4s; -moz-animation: changeBg 4s; animation: changeBg 4s; } @-webkit-keyframes changeBg { from { background-color: red; } to { background-color: yellow; } } @-moz-keyframes changeBg { from { background-color: red; } to { background-color: yellow; } } @keyframes changeBg { from { background-color: red; } to { background-color: yellow; } } ``` ### CSS3 background-size #### scss ```scss .container { @include background-size(cover); } ``` #### css compiled ```css .container { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } ``` ### CSS3 border-radius #### scss ```scss .container { @include border-radius(4px); } ``` #### css compiled ```css .container { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ``` ### CSS3 box-shadow #### scss ```scss .container { @include box-shadow(1px 1px 2px rgba(#000, .8)); } ``` #### css compiled ```css .container { -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } ``` ### CSS3 @font-face #### scss ```scss $fonts-dir: '../fonts'; @include font-face('Roboto', 'roboto', 'regular'); ``` #### css compiled ```css @font-face { font-family: "Roboto"; src: url("../fonts/regular/roboto.eot"); src: url("../fonts/regular/roboto.eot?#iefix") format("embedded-opentype"), url("../fonts/regular/roboto.woff") format("woff"), url("../fonts/regular/roboto.ttf") format("truetype"), url("../fonts/regular/roboto.svg#Roboto") format("svg"); } ``` ### CSS3 linear-gradient #### scss ```scss .container { @include linear-gradient(red, orange); } ``` #### css compiled ```css .container { background: orange; background: -moz-linear-gradient(top, red 0%, orange 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, orange)); background: -webkit-linear-gradient(top, red 0%, orange 100%); background: -o-linear-gradient(top, red 0%, orange 100%); background: linear-gradient(to bottom, red 0%, orange 100%); } ``` ### opacity #### scss ```scss .container { @include opacity(.5); } ``` #### css compiled ```css .container { opacity: 0.5; filter: alpha(opacity=50); } ``` ### CSS3 placeholder input #### scss ```scss input, textarea { @include placeholder { font-style:italic; } } ``` #### css compiled ```css input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-style: italic; } input::-moz-placeholder, textarea::-moz-placeholder { font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder { font-style: italic; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-style: italic; } ``` ### tab-size #### scss ```scss pre { @include tab-size(2); } ``` #### css compiled ```css pre { -webkit-tab-size: 2; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } ``` ### CSS3 transform #### scss ```scss .icon { @include transform(scale(1.5)); } ``` #### css compiled ```css .icon { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } ``` ### CSS3 transition #### scss ```scss button { background-color: #fff; @include transition(background-color .26s); &:hover { background-color: #333; } } ``` #### css compiled ```css button { background-color: #fff; -webkit-transition: background-color 0.26s; -moz-transition: background-color 0.26s; -o-transition: background-color 0.26s; transition: background-color 0.26s; } button:hover { background-color: #333; } ``` ## Helpers ### center-vertical #### scss ```scss .icon { height: 100px; width: 100px; @include center-vertical; } ``` #### css compiled ```css .icon { height: 100px; width: 100px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } ``` ### sprite #### scss ```scss $img-dir: '../img'; .icon { @include sprite('sprite-icon.png', '0 50px', 50px, 50px); } ``` #### css compiled ```css .icon { background-image: url("../img/sprite-icon.png"); background-position: "0 50px"; height: 50px; width: 50px; } ``` ## Functions See [functions.scss](https://github.com/ederssouza/sass-helpers/blob/master/src/_functions.scss). ### Convert px to em #### scss ```scss $browser-context: 16; .container { font-size: em(14) } ``` #### css compiled ```css .container { font-size: 0.875em; } ``` ## Placeholders See [placeholders.scss](https://github.com/ederssouza/sass-helpers/blob/master/src/_placeholders.scss). ### center-block #### scss ```scss .container { @extend %center-block; } ``` #### css compiled ```css .container { display: block; margin-left: auto; margin-right: auto; } ``` ### clearfix #### scss ```scss .container { @extend %clearfix; } ``` #### css compiled ```css .container:before, .container:after { clear: both; content: ""; display: block; } ``` ## License [MIT License](http://ederssouza.mit-license.org/) © Eder Sampaio