Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A lightweight Sass tool set.
CSS Ruby Cucumber

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
_animation.scss
_border-radius.scss
_box-shadow.scss
_box-sizing.scss
_flex-box.scss
_inline-block.scss
_linear-gradient.scss
_mixins.scss
_radial-gradient.scss
_simple-color.scss
_transform.scss
_transition.scss
readme.md

readme.md

Vanilla Sass Mixins

The purpose of these mixin is to provide a framework for writing vanilla scss

Requirements

Sass 3.1+


Install

Clone the Repo

git clone git@github.com:plapier/sass-mixins.git

Import the mixins at the beginning of your stylesheet

@import 'sass-mixins/mixins';


Usage

Linear-Gradient

Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.

@include linear-gradient(#1e5799, #2989d8); @include linear-gradient(top, #1e5799 0%, #2989d8 100%); @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

Border Radius

Border-radius will also take short-hand notation. `@include border-radius(10px); @include border-radius(5px 5px 2px 2px);

Animation

The three following properties support a comma separated list of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. animation-name | animation-duration | animation-timing-function

@include animation-name(slideup, fadein); @include animation-duration(1.0s, 1.2s); @include animation-timing-function(ease-in-out, ease-out);

Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.

@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);

Transitions

Shorthand mixin: Supports multiple parentheses-deliminated values for each variable. @include transition (all, 2.0s, ease-in-out); @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));

Currently the project is a work in progress. Feel free to help out.

Something went wrong with that request. Please try again.