Sass Helpers

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

Installation

npm install @ederssouza/sass-helpers --save-dev

How to use

Import the global index.scss file in your project.

@import '~@ederssouza/sass-helpers';

Mixins

See mixins.scss.

CSS3 animation

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

.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

.container {
  @include background-size(cover);
}

css compiled

.container {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

CSS3 border-radius

scss

.container {
  @include border-radius(4px);
}

css compiled

.container {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

CSS3 box-shadow

scss

.container {
  @include box-shadow(1px 1px 2px rgba(#000, .8));
}

css compiled

.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

$fonts-dir: '../fonts';
@include font-face('Roboto', 'roboto', 'regular');

css compiled

@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

.container {
  @include linear-gradient(red, orange);
}

css compiled

.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

.container {
  @include opacity(.5);
}

css compiled

.container {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

CSS3 placeholder input

scss

input, textarea {
  @include placeholder {
    font-style:italic;
  }
}

css compiled

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

pre {
  @include tab-size(2);
}

css compiled

pre {
  -webkit-tab-size: 2;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
}

CSS3 transform

scss

.icon {
  @include transform(scale(1.5));
}

css compiled

.icon {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

CSS3 transition

scss

button {
  background-color: #fff;
  @include transition(background-color .26s);
  &:hover {
    background-color: #333;
  }
}

css compiled

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

.icon {
  height: 100px;
  width: 100px;
  @include center-vertical;
}

css compiled

.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

$img-dir: '../img';
.icon {
  @include sprite('sprite-icon.png', '0 50px', 50px, 50px);
}

css compiled

.icon {
  background-image: url("../img/sprite-icon.png");
  background-position: "0 50px";
  height: 50px;
  width: 50px;
}

Functions

See functions.scss.

Convert px to em

scss

$browser-context: 16;
.container {
  font-size: em(14)
}

css compiled

.container {
  font-size: 0.875em;
}

Placeholders

See placeholders.scss.

center-block

scss

.container {
  @extend %center-block;
}

css compiled

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

clearfix

scss

.container {
  @extend %clearfix;
}

css compiled

.container:before,
.container:after {
  clear: both;
  content: "";
  display: block;
}

License

MIT License © Eder Sampaio