ez-sass

Welcome to ez-sass

Created by Daniel Scott

Checkout Dev Clothing for coding related merch to support me 👕

Description

This is a library of mixin functions for .sass to help minimise code and increase the readability of stylesheets.

Getting Started 🌱

All you have to do is import the file you want:

@charset "utf-8";
@import 'ez-sass/mixins';

// or my personal favourite for working with responsive layouts
@import 'ez-sass/responsive';

// rest of your code...

Then include the mixins where ever you like!

// BEFORE
div {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}

// AFTER
div {
  @include setFlex(center, center, center, column, wrap);
  @include setSize(100vw, 100vh);
}

Helpful Notes

I highly recommend installing a SCSS Intellisense library such as SCSS Intellisense by mrmlnc for VScode. This will show you a popup of parameter names as you type mixins in from the documentation.

Mixins 🎨

@include setSize(auto, auto); //$width, $height

@include setMarginPadding(auto, auto); // $margin, $padding

@include setPosition(
  static,
  auto,
  auto,
  auto,
  auto
); // $position, $top, $left, $bottom, $right

@include setDisplay(
  inline,
  static,
  auto,
  auto
); // $display, $position, $top, $left

@include setFlex(
  normal,
  normal,
  normal,
  row,
  nowrap
); // $justifyC, $alignI, $alignC, $flexDir, $flexWrap

// Absoultely centers selector the old fashion way, the ol block/transform ;)
@include absoluteCenter();

// Disables ability to select (highlight with mouse drag) text or image on element
@include disableSelect();

@include onHoverBoxShadow(
  1s,
  0px,
  -5px,
  0px,
  3px,
  rgb(0, 0, 0, 0.5)
); // $duration, $LRsides, $TBsides, $all, $blur