Worko Mixins

Author: Worköholics workoholics.es

Sass mixins to resolve common CSS functionalities. This package is dependency of other packages developed by Worköholics

You can import each mixin file independently or import _mixins.scss if you need all the mixins of the package.

Install

npm install --save worko-mixins

Usage

Import independently the file you need or import all mixins using _mixins.scss file.

// Enable mixins declared on transititons.scss
@import "./path/to/node_modules/worko-mixins/transitions.scss";

// Enable all mixins declared on the package
@import "./path/to/node_modules/worko-mixins/mixins.scss"

Files

• _animations.scss: Mixins related with css animations

• _grid.scss: Mixins related with elements of the grid: columns, rows, containers...

• _media-queries: Mixins to manage css media queries and breakpoints

• _transitions.scss: Mixins to manage css transitions

• _utils: Mixins to solve different functionalities

• _mixins.scss: Import this file to use mixins of all files described above

Animations

keyframes

Add css keyframes supported by all browsers

@include keyframes(animationName) {
  0% { transform: translateY(0) }
  100%{ transform: translateY(-50%)}
}

Media queries

Mixins to manage media queries

Default variables

You can override the default variables to manage your custom breakpoints.

$breakpoint-sm: 576px !default; 
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;

mq_sm

Mixin to declare styles on screens bigger than $breakpoint-sm

@include mq-sm {
  //your styles
}

mq_md

Mixin to declare styles on screens bigger than $breakpoint-md

@include mq-md {
  //your styles
}

mq_lg

Mixin to declare styles on screens bigger than $breakpoint-lg

@include mq-lg {
  //your styles
}

mq_xl

Mixin to declare styles on screens bigger than $breakpoint-xl

@include mq-xl {
  //your styles
}

mq($breakpoint)

Mixin to declare styles on screens bigger than the value passed as $breakpoint parameter

Parameters:

| Arguments | Description | | ------------- | ---------------------------------- | | $breakpoint | Value of the breakpoint in pixels |

@include mq(500px) {
  //your styles
}

Transitions

transition($args...)

Mixin to autoprefix transition property

Parameters:

| Arguments | Description | | ------------- | -------------------------- | | $args | List of transition values |

@include transition(opacity .35s ease-in-out, color .5 ease-in);

defaultTransition

Mixin to add the transition "all .35 ease-in-out" prefixed

@include defaultTransition;

Utils

prefixer($property, $value)

Mixin to auto-prefix properties

Parameters:

| Arguments | Description | | ------------- | -------------------------- | | $property | Property to auto-prefix | | $value | Value of the property |

@include prefixer(transform, translateY(-50%)); 

#### opacity($value)

| Arguments | Description | | ------------- | ----------------------------------------- | | $value | Value of the opacity property from 0 to 1 |

Mixin to set opacity to elements compatible with different browsers

@include opacity(0.2); 

Grid

Default variables

You can override the default variables to manage your custom properties.

$cols: 12 !default;
$gutter: 15px !default;
$safe-area: 90px !default;
$safe-area-xs: 30px !default;

getWidthByCols($c)

Function that returns the value of the column width in percentage

Parameters:

| Arguments | Description | | ------------- | ----------------------------------------- | | $c | Column quantity from 0 to $cols |

div {
  width: getWidthByCols(2);
}

getWidthByColsAndTotal($c, $total)

Function that returns the value of the column width in percentage from a total of columns

Parameters:

| Arguments | Description | | ------------- | ----------------------------------------- | | $c | Column quantity from 0 to $total | | $total | Total of columns |

div {
  width: getWidthByColsAndTotal(2, 6);
}

setFlexWidth($width)

Mixin to set a fixed width element into the flexbox

Parameters:

| Arguments | Description | | ------------- | ----------------------------------------- | | $width | Width of the element |

@include setFlexWidth(80%);

//or

@include setFlexWidth(getWidthByCols(6)); 

//or

@include setFlexWidth(getWidthByColsAndTotal(6, 10)); 

buildGrid($prefix)

Mixin to generate the css necesary to support the grid scaffolded with the attributes of .col elements

Parameters:

| Arguments | Description | | ------------- | ----------------------------------------- | | $prefix | Prefix of each breakpoint |

.col {
  padding-left: $gutter;
  padding-right: $gutter;
  flex-grow: 1;

  @include buildGrid('xs');
  @include mq-sm {
    @include buildGrid('sm');
  }
  @include mq-md {
    @include buildGrid('md');
  }
  @include mq-lg {
    @include buildGrid('lg');
  }
  @include mq-xl {
    @include buildGrid('xl');
  }
}