sim

simplysass

A set of Sass mixins for use in projects

Showing:

Popularity

Downloads/wk

0

GitHub Stars

0

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

simplysass

A set of Sass mixins for use in projects

Install

npm install simplysass

With Eyeglass

If you have eyeglass installed, no more work is needed as this mixin is setup to be a eyeglass module out of the box.

With Gulp

var simplysass = require('simplysass').includePaths;

gulp.task('css', function(){
    gulp.src('sass/**/*.scss')
    .pipe(sass({
        includePaths: simplysass
    }))
    .pipe(gulp.dest('css'));
});

Usage

So far, there are five mixins included (with more to come):

center-element

Will using absolute positioning & transforms, center align (either horizontally or vertically) an element.

.element {
  @include center-element('vertical');
}

or

.element {
  @include center-element('horizontal');
}

clearfix

.element {
  @include clearfix;
}

or

.element {
  @extend %clearfix;
}

hide-text

Hide text for use with background images.

.element {
  @include hide-text;
}

hit-area

Increase hit area for an element.

.element {
  @include hit-area(5px); // where 5px = radius
}

position

Quickly set the position of an element. The variables go something like this:

@include position($position: relative/absolute/fixed; $coords: top right bottom left);

So for example if you wanted to have an element be positioned absolutely with a top of 20px and left of 20px, you could simply write:

@include position(absolute, 20px null null 20px);

To speed up this process, there is also a few other mixins available:

@include position-tl($position, $top $left);
@include position-tr($position, $top $right);
@include position-bl($position, $bottom $right);
@include position-br($position, $bottom $right);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial