Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ederssouza/sass-helpers

Sass Helpers
https://github.com/ederssouza/sass-helpers

sass sass-functions sass-library sass-mixins scss scss-library scss-mixins

Last synced: 2 days ago
JSON representation

Sass Helpers

Host: GitHub
URL: https://github.com/ederssouza/sass-helpers
Owner: ederssouza
Created: 2017-06-17T16:59:25.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2018-09-24T15:38:39.000Z (about 6 years ago)
Last Synced: 2024-09-26T01:35:20.104Z (7 days ago)
Topics: sass, sass-functions, sass-library, sass-mixins, scss, scss-library, scss-mixins
Language: CSS
Homepage:
Size: 11.7 KB
Stars: 6
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 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