Skip to content

oddcamp/sass-utils

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Odd Camp's SASS utilities library

Usage

  1. Install with $ yarn add @oddcamp/sass-utils.

  2. Add it to your project:

    @import "@oddcamp/sass-utils/src/all";

    This will:

    • Make all of the SASS utilities available
    • Inject Reset CSS
  3. Read the documentation

For non-SASS projects include dist/reset.css only.

Development

  1. Install dependencies with $ yarn

  2. Run $ yarn dev when developing. This will:

    • Run the linter for your own good
    • Generate reset.css file for non-SASS projects
  3. Edit contents of src

Documentation

$mq-breakpoints variable

A map of viewport breakpoints for a use with mq() mixin. Default value:

$mq-breakpoints: (
  xxxsmall: 0,
  xxsmall: 320,
  xsmall: 480,
  small: 640,
  medium: 768,
  large: 960,
  xlarge: 1024,
  xxlarge: 1200,
  xxxlarge: 1400,
  xxxxlarge: 1680,
);

mq() mixin

A media query mixin. Works in a couple with $mq-breakpoints map. Accepts multiple values, e.g.:

@include mq(medium down) {
  // <= 768px
  // screen and (max-width: 48em)
}

@include mq(large up) {
  // > 960px
  // screen and (min-width: 60.0625em)
}

@include mq(large upEq) {
  // >= 960px
  // screen and (min-width: 60em)
}

@include mq(between small large) {
  // 640px < x <= 960px
  // screen and (min-width: 40.0625em) and (max-width: 60em)
}

@include mq(betweenEq small large) {
  // 640px <= x <= 960px
  // screen and (min-width: 40em) and (max-width: 60em)
}

@include mq(portrait) {
  // screen and (orientation: portrait)
}

@include mq(portrait, between small medium, xxxxlarge up, xsmall down) {
  // orientation: portrait, 640px < x <= 768px, > 1680px, <= 480px
  // screen and (orientation: portrait), screen and (min-width: 40.0625em) and (max-width: 48em),  screen and (min-width: 105.0625em), screen and (max-width: 20em)
}

// Nest the mixin inclusion for "AND" operator instead:
@include mq(portrait) {
  @include mq(xxsmall down) {
    // orientation: portrait AND <= 480px
    // screen and (orientation: portrait) and (max-width: 20em)
  }
}

Using numeric values instead of keywords is also acceptable, e.g.:

@include mq(960 down) {
  // <= 960px
  // screen and (max-width: 60em)
}

@include mq(between 480 768) {
  // 480px < x <= 768px
  // screen and (min-width: 30.0625em) and (max-width: 48em)
}

mq-retina() mixin

A media query for targeting high-res screens.

@include mq-retina {
  // retina
}

@include mq-retina {
  @include mq(960 down) {
    // <= 960px retina
    // screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 60em), screen and (min--moz-device-pixel-ratio: 2) and (max-width: 60em), screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 60em), screen and (min-device-pixel-ratio: 2) and (max-width: 60em), screen and (min-resolution: 192dpi) and (max-width: 60em), screen and (min-resolution: 2dppx) and (max-width: 60em)
  }
}

em() and rem() functions

Converts pixels to em/rem's respectively, e.g.:

em(20); // 1.25em
em(20px); // 1.25em
rem(16); // 1rem
rem(20 40); // 1.25rem 2.5rem
rem(20 40 0); // 1.25rem 2.5rem 0 2.5rem
rem(40 auto); // 2.5rem auto
rem(40 auto 70%); // 2.5rem auto 70%

Overwrite the value of $em-base to change the base value. Default: 16px. You can also pass it as a second parameter for em/rem().

strip-unit() function

Returns digits-only value: strip-unit(16px) -> 16.

svg-inline() function

Makes SVG inline-able, e.g.:

background-image: url(svg-inline(
  '<svg viewBox="0 0 10 10"><style>path{fill:#c00;}</style><path d="m5 9-3-4h2v-4h2v4h2z"/></svg>'
));

// becomes

background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%220%200%2010%2010%22%3E%3Cstyle%3Epath{fill:#c00;}%3C/style%3E%3Cpath%20d=%22m5%209-3-4h2v-4h2v4h2z%22/%3E%3C/svg%3E");

str-replace() function

Replaces strings: str-replace("abc", "a", "b") -> "bbc".

truncate-text($method: ellipsis) mixin

Determines how overflowed content that is not displayed is signaled to users.

truncate-text-line($num: 3, $fallback-lh: null) mixin

Limiting of the contents of a block container to the specified number of lines. Based on line-clamp. Use $fallback-lh to support IE by setting the line height size.

@include truncate-text-line(2);
@include truncate-text-line(2, rem(24));

hide-text() mixin

Visually hides the text without a performance hit. Keeps the text accessible for screen readers.

Easings

The variable list of CSS animation easings:

// Sine:
$easing-in-sine
$easing-out-sine
$easing-in-out-sine
// Quad:
$easing-in-quad
$easing-out-quad
$easing-in-out-quad
// Cubic:
$easing-in-cubic
$easing-out-cubic
$easing-in-out-cubic
// Quart:
$easing-in-quart
$easing-out-quart
$easing-in-out-quart
// Quint:
$easing-in-quint
$easing-out-quint
$easing-in-out-quint
// Expo:
$easing-in-expo
$easing-out-expo
$easing-in-out-expo
// Circ:
$easing-in-circ
$easing-out-circ
$easing-in-out-circ
// Back:
$easing-in-back
$easing-out-back
$easing-in-out-back

clearfix() and unclearfix() mixins

Clears and "unclears" floats respectively.

hide-visually() mixin

Visually hides an element, keeps it accessible for screen readers, does not exclude it from HTML tab order.

About

Odd Camp's SASS utilities

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors 3

  •  
  •  
  •