sass-utils-collection

v3.0.1

Published

2 years ago

A collection of sass mixins and functions

Downloads

971

0High
0Medium
0Low

adrianklimek

sass utils scss mixins helpers

License

Sass utils collection

:zap: A collection of sass mixins and functions

Installation

Install with npm:

npm install sass-utils-collection

Install with yarn:

yarn add sass-utils-collection

Usage

Import it in your main sass file:

@import '~sass-utils-collection';

Depending on your configuration, you may need to include a full path:

@import './node_modules/sass-utils-collection/index';

Or import modules manually:

@import '~sass-utils-collection/lib/layout/media';
@import '~sass-utils-collection/lib/layout/hide';
@import '~sass-utils-collection/lib/layout/flexbox-grid';

Configuration

Media breakpoints

Breakpoints values as well as breakpoint names can be overwritten.

Default

$media-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1170px,
  xl: 1440px,
);

Flexbox Grid

From version 1.0.0 grid module has to be imported manually lib/layout/flexbox-grid

Grid's breakpoint names has to correspond to the media breakpoints.

The $grid-columns map has to have a default property.

Default

$grid-gutter: (
  xs: 16px,
  md: 24px,
);

$grid-space-around: (
  xs: 24px,
  md: 64px,
  lg: 40px,
);

$grid-columns: (
  default: 12,
);

$grid-container-width: (
  default: 1440px,
);

Utils

Layout

center-content

type: mixin

Centers an element's content

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |type|string|both|one of: both, vertically, horizontally|

Example

// Usage
.element-1 {
  @include center-content;
}

.element-2 {
  @include center-content(vertically);
}

// Output
.element-1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.element-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

center-self

type: mixin

Centers an element

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |type|string|both|one of: both, horizontally, vertically| |position|string|absolute|-|

Example

// Usage
.element-1 {
  @include center-self;
}

.element-2 {
  @include center-self(vertically, relative);
}

// Output
.element-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.element-2 {
  position: relative;
  top: 50%;
  transform: translate(0, -50%)
}

fill-space

type: mixin

Stretch an element to fill its parent

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |size|string|100%|when it is smaller or greater than 100% content is also centered| |position|string|absolute|-|

Example

// Usage
.element-1 {
  @include fill-space;
}

.element-2 {
  @include fill-space(80%, relative);
}

// Output
.element-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.element-2 {
  position: relative;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

grid-column-width

type: function

Gets a column width

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |breakpoint-name|string|-|one of breakpoint names declared in the media configuration| |columns-count|number|-|-|

grid-container

type: mixin

Creates a grid container

grid-row

type: mixin

Creates a grid row

set-grid-column-width

type: mixin

Sets a grid column width properties

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |width|string|-|-|

set-nested-column-width

type: mixin

Sets a grid column width properties for nested column

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |columns-count|number|-|-| |container-size|number|-|container size in columns| |breakpoint-name|string|-|one of breakpoint names declared in the media configuration|

grid-column

type: mixin

Creates a grid column

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |columns|map|()|columns map like: (xs: 12, md: 6, xl: 4)|

grid-offset

type: mixin

Creates a grid column's offset

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |columns|map|()|columns map like: (xs: 12, md: 6, xl: 4)|

hide-up

type: mixin

Hides element on a screen resolution equal or greater than given one

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |breakpoint-name|string|null|one of breakpoint names declared in the media configuration| |width|string|null|custom width can be used instead of breakpoint name|

Example

// Usage
.element-1 {
  @include hide-up(md);
}

.element-2 {
  @include hide-up($width: 1044px);
}

// Output
@media (min-width: 768px) {
  .element-1 {
    display: none;
  }
}

@media (min-width: 1044px) {
  .element-2 {
    display: none;
  }
}

hide-down

type: mixin

Hides element on a screen resolution smaller than given one

Parameters

Example

// Usage
.element-1 {
  @include hide-down(md);
}

.element-2 {
  @include hide-down($width: 1044px);
}

// Output
@media (max-width: 767px) {
  .element-1 {
    display: none;
  }
}

@media (max-width: 1043px) {
  .element-2 {
    display: none;
  }
}

media

type: mixin

Applies styles to given media query

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |breakpoint|string|null|one of breakpoint names declared in the media configuration| |is-mobile-first|boolean|true|-| |width|string|null|custom width can be used instead of breakpoint name|

media-up

type: mixin

Applies styles to screen resolutions equal or greater than given one

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |breakpoint|string|null|one of breakpoint names declared in the media configuration| |width|string|null|custom width can be used instead of breakpoint name|

Example

// Usage
.element-1 {
  @include media-up(md) {
    width: 50%;
  }
}

.element-2 {
  @include media-up($width: 1500px) {
    width: 1000px;
  }
}

// Output
@media (min-width: 768px) {
  .element-1 {
    width: 50%;
  }
}

@media (min-width: 1500px) {
  .element-2 {
    width: 1000px;
  }
}

media-down

type: mixin

Applies styles to screen resolutions smaller than given one

Parameters

Example

// Usage
.element-1 {
  @include media-down(md) {
    width: 100%;
  }
}

.element-2 {
  @include media-down($width: 1500px) {
    width: 500px;
  }
}

// Output
@media (max-width: 767px) {
  .element-1 {
    width: 100%;
  }
}

@media (max-width: 1499px) {
  .element-2 {
    width: 500px;
  }
}

sticky-footer

type: mixin

Makes an element stay always at the bottom

Note: for cross-browser support additional code may be needed: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |content-selector|string|-|selector like .content or &__content|

Example

// Usage
.element {
  @include sticky-footer(.content);
}

// Output
.element {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.element .content {
  flex: 1;
}

Resets

reset-appearance

type: mixin

Resets the appearance property

Example

// Usage
.element {
  @include reset-appearance;
}

// Output
.element {
  -webkit-appearance: none;
  -moz-appearance: none;
}

reset-button

type: mixin

Resets a button's default styles

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |cursor|string|pointer|-|

Example

// Usage
.el {
  @include reset-button;
}

// Output
.el {
  background: none;

  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;

  color: inherit;
  font: inherit;
  cursor: pointer;
}

.el::-moz-focus-inner {
  border: 0;
}

reset-input

type: mixin

Resets an input's default styles

Example

// Usage
.element {
  @include reset-input;
}

// Output
.element {
  background: none;

  border: 0;
  border-radius: 0;

  padding: 0;
  outline: none;

  box-shadow: none;
}

reset-link

type: mixin

Resets a link's default styles

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |color|string|inherit|-|

Example

// Usage
.element {
  @include reset-link;
}

// Output
.element {
  text-decoration: none;
  color: inherit;
}

reset-list

type: mixin

Resets a list's default styles

Example

// Usage
.element {
  @include reset-list;
}

// Output
.element {
  list-style: none;
  padding: 0;
  margin: 0;
}

reset-placeholder

type: mixin

Resets a placeholder's default style

Example

// Usage
.element {
  @include reset-placeholder;
}

// Output
.element::placeholder {
  opacity: 1;
  color: inherit;
}

Misc

aspect-ratio

type: mixin

Sets width to height size ratio

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |width|number|1|-| |height|number|1|-| |grow|boolean|false|allows content to increase element size when content takes more space|

Example

// Usage
.element-1 {
  @include aspect-ratio(16, 9);
}

.element-2 {
  @include aspect-ratio(4, 3, true);
}

// Output
.element-1 {
  position: relative;
}
.element-1::before {
  content: '';
  display: block;
  padding-top: 0.5625%;
}

.element-2::before,
.element-2::after {
  content: '';
}

.element-2::before {
  padding-top: 75%;
  float: left;
}

.element-2::after {
  display: block;
  clear: both;
}

clearfix

type: mixin

Forces an element to self-clear its children

Example

// Usage
.element {
  @include clearfix;
}

// Output
.element::after {
  content: '';
  display: table;
  clear: both;
}

dynamic-shadow

type: mixin

Creates shadow based on an element's background

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |offset-x|string|-|-| |offset-y|string|-|-| |blur-radius|string|-|-| |opacity|number|0.75|-|

Example

// Usage
.element {
  @include dynamic-shadow(20px, 20px, 5px);
}

// Output
.element {
  position: relative;
  z-index: 1;
}

.element::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;

  width: 100%;
  height: 100%;

  filter: blur(5px);
  opacity: 0.75;

  background: inherit;
  border-radius: inherit;
  z-index: -1;
}

enable-kerning

type: mixin

Enables font kerning — improves spacing and fit of specific pairs of letters

Example

// Usage
.element {
  @include enable-kerning;
}

// Output
.element {
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
}

fluid-property

type: mixin

Returns property with fluid value based on viewport size

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |property|string|-|-| |from|number|-|-| |to|number|-|-| |media-from|number|-|-| |media-to|number|-|-| |media-type|number|width|width or height|

Example

// Usage
.el-1 {
  @include fluid-property(font-size, 10px, 23px, 375px, 1440px);
}

.el-2 {
  @include fluid-property(height, 100px, 200px, 768px, 1280px, height);
}

// Output
.el-1 {
  font-size: 10px;
}
@media (min-width: 375px) {
  .el-1 {
    font-size: calc(1.22066vw + 5.42254px);
  }
}
@media (min-width: 1440px) {
  .el-1 {
    font-size: 23px;
   }
}

.el-2 {
  height: 100px;
}
@media (min-height: 768px) {
  .el-2 {
    height: calc(19.53125vh + -50px);
  }
}
@media (min-height: 1280px) {
  .el-2 {
    height: 200px;
  }
}

fluid-value

type: function

Returns fluid value based on viewport size

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |from|number|-|-| |to|number|-|-| |media-from|number|-|-| |media-to|number|-|-| |unit|number|vw|vw or vh|

Example

// Usage
.element-1 {
  font-size: fluid-value(16px, 24px, 320px, 768px);
}

.element-2 {
  font-size: fluid-value(16px, 24px, 320px, 768px, vh);
}

// Output
.element-1 {
  font-size: calc(1.78571429vw + 10.2857142857px);
}

.element-2 {
  font-size: calc(1.78571429vh + 10.2857142857px);
}

font-smoothing

type: mixin

Enables anti-aliasing effect

Example

// Usage
.element {
  @include font-smoothing;
}

// Output
.element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

media-property

type: mixin

Sets a property for multiple breakpoints

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |property|string|-|-| |values|map|()|-|

Example

// Usage
.el-1 {
  @include media-property(font-size, (xs: 12px, md: 14px, lg: 16px));
}

// Output
.el-1 {
  font-size: 12px;

  @media (min-width: 768px) {
    font-size: 14px;
  }

  @media (min-width: 1170px) {
    font-size: 16px;
  }
}

prefix

type: mixin

Applies prefixes to given property

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |property|string|-|-| |value|string|-|-| |prefixes...|string|-|any number of arguments with prefixes|

Example

// Usage
.element {
  @include prefix(appearance, none, moz, webkit);
}

// Output
.element {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

property

type: mixin

Sets the same value to multiple properties

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |value|string|-|-| |properties...|string|-|any number of arguments with properties|

Example

// Usage
.element {
  @include property(inherit, background-color, color, font);
}

// Output
.element {
  background-color: inherit;
  colo: inherit;
  font: inherit;
}

random-color

type: function

Generates random rgba color

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |alpha|number|1|-|

Example

// Usage
.element-1 {
  background-color: random-color();
}

.element-2 {
  background-color: random-color(0.8);
}

// Output
.element-1 {
  background-color: #8399f2;
}

.element-2 {
  background-color: rgba(218, 230, 202, 0.8);
}

responsive-img

type: mixin

Makes an image responsive

Example

// Usage
.element {
  @include responsive-img;
}

// Output
.element {
  width: 100%;
  display: block;
}

sideways-text

type: mixin

Turns a text sideways

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |bottom-to-top|boolean|false|-| |align|string|left|-|

Example

// Usage
.el-1 {
  @include sideways-text;
}

.el-2 {
  @include sideways-text(true);
}

.el-3 {
  @include sideways-text(true, right);
}

// Output
.el-1 {
  writing-mode: vertical-lr;
}

.el-2 {
  writing-mode: vertical-rl;
  transform: scale(-1);
}

.el-3 {
  writing-mode: vertical-lr;
  transform: scale(-1);
}

size

type: mixin

Sets width and height

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |width|string|-|-| |height|string|-|if not supplied width parameter is used instead|

Example

// Usage
.element-1 {
  @include size(200px);
}

.element-2 {
  @include size(100%, 200px);
}

// Output
.element-1 {
  width: 200px;
  height: 200px;
}

.element-2 {
  width: 100%;
  height: 200px;
}

system-font

type: mixin

Sets system's default font

Example

// Usage
.el {
  @include system-font;
}

// Output
.el {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

truncate-line

type: mixin

Truncates one line text

Example

// Usage
.element {
  @include truncate-line;
}

// Output
.element {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

visually-hidden

type: mixin

Applies visually hidden utility — https://a11yproject.com/posts/how-to-hide-content/

Parameters

| name | type | default | description | | ---- | ---- | ------- | ----------- | |focusable|boolean|false|-|

Example

// Usage
.element-1 {
  @include visually-hidden;
}
.element-2 {
  @include visually-hidden($focusable: true);
}

// Output
.element-1 {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.element-2:not(:focus):not(:active) {
  position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
}

License

sass-utils-collection is licensed under MIT license.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Sass utils collection

Table of contents

Installation

Install with npm:

Install with yarn:

Usage

Configuration

Media breakpoints

Default

Flexbox Grid

Default

Utils

Layout

center-content

Parameters

Example

center-self

Parameters

Example

fill-space

Parameters

Example

grid-column-width

Parameters

grid-container

grid-row

set-grid-column-width

Parameters

set-nested-column-width

Parameters

grid-column

Parameters

grid-offset

Parameters

hide-up

Parameters

Example

hide-down

Parameters

Example

media

Parameters

media-up

Parameters

Example

media-down

Parameters

Example

sticky-footer

Parameters

Example

Resets

reset-appearance

Example

reset-button

Parameters

Example

reset-input

Example

reset-link

Parameters

Example

reset-list

Example

reset-placeholder

Example

Misc

aspect-ratio

Parameters

Example

clearfix

Example

dynamic-shadow

Parameters