RED-Sass

A collection of Sass mixins and helpers

Usage

Install RED-Sass through bower.

bower install red-sass --save

Import RED-Sass into your scss files.

@import "path/to/red-sass";

Mixins

Generic Media Queries

@include width-over($w) {}
@include width-under($w) {}
@include width-between($a, $b) {}
@include height-over($h) {}
@include height-under($h) {}
@include height-between($a, $b) {}

source

Wraps content in a media query.

// scss
body {
  @include width-under(400px)          { color: red; }
  @include width-over(600px)           { color: white; }
  @include width-between(400px, 600px) { color: black; }
}

// css
@media only screen and (max-width: 400px) {
  body { color: red; }
}
@media only screen and (min-width: 600px) {
  body { color: white; }
}
@media only screen and (min-width: 400px) and (max-width: 600px) {
  body { color: black; }
}

Named Device Media Queries

@include phone {}              // width under 320px
@include phone-and-tablet {}   // width under 768px
@include tablet-and-phone {}   // width under 768px
@include tablet {}             // width between 321px and 768px
@include tablet-and-desktop {} // width over 321px
@include desktop-and-tablet {} // width over 321px
@include desktop {}            // width over 769px

These map to the following breakpoints.

0        320        768          ∞
|  phone  |  tablet  |  desktop  |
|         |          |           |
|  phone-and-tablet  |           |
|  tablet-and-phone  |           |
|         |          |           |
|         |  tablet-and-desktop  |
|         |  desktop-and-tablet  |
0        320        768          ∞

Debug

@include debug;

source

Add outlines to elements. The deeper the elements are nested, the higher the hue degree.

This is helpful for quickly seeing how a site's layout is constructed.

// scss
@include debug;

// css
*          { outline: 1px solid  #ff0000; }
*:before   { outline: 1px dotted #800000; }
*:after    { outline: 1px dashed #ff8080; }
* *        { outline: 1px solid  #ff4d00; }
* *:before { outline: 1px dotted #802600; }
* *:after  { outline: 1px dashed #ffa680; }
// ... 20 iterations of this
* * * * * * * * * * * * * * * * * * *          { outline: 1px solid  #ff0099; }
* * * * * * * * * * * * * * * * * * *:before   { outline: 1px dotted #80004c; }
* * * * * * * * * * * * * * * * * * *:after    { outline: 1px dashed #ff80cc; }
* * * * * * * * * * * * * * * * * * * *        { outline: 1px solid  #ff004c; }
* * * * * * * * * * * * * * * * * * * *:before { outline: 1px dotted #800026; }
* * * * * * * * * * * * * * * * * * * *:after  { outline: 1px dashed #ff80a6; }

Timing Functions

source

// scss
div { animation-timing-function: $ease-in-circ; }

// css
div { animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); }

Available timing functions:

| | in | out | in-out | | ----- | ---------------- | ----------------- | -------------------- | | quad | $ease-in-quad | $ease-out-quad | $ease-in-out-quad | | cubic | $ease-in-cubic | $ease-out-cubic | $ease-in-out-cubic | | quart | $ease-in-quart | $ease-out-quart | $ease-in-out-quart | | quint | $ease-in-quint | $ease-out-quint | $ease-in-out-quint | | sine | $ease-in-sine | $ease-out-sine | $ease-in-out-sine | | expo | $ease-in-expo | $ease-out-expo | $ease-in-out-expo | | circ | $ease-in-circ | $ease-out-circ | $ease-in-out-circ |

Ellipsis

@include ellipsis ($max-width);

source

Add automatic ellipsis to single line of text.

// scss
.ellipsis     { @include ellipsis; }
.ellipsis-314 { @include ellipsis(314px); }

// css
.ellipsis {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ellipsis-314 {
	max-width: 314px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Fonts

body { font: 16px/1.4 $helvetica; }
body { font: 16px/1.4 $georgia; }
body { font: 16px/1.4 $lucida-grande; }
body { font: 16px/1.4 $monospace; }
body { font: 16px/1.4 $verdana; }
@include helvetica;
@include georgia;
@include lucida-grande;
@include monospace;
@include verdana;

source

Mixins and variables for common font families.

// scss
.helvetica     { @include helvetica; }
.helvetica2    { font: 16px/1.4 $helvetica; }
.georgia       { @include georgia; }
.lucida-grande { @include lucida-grande; }
.monospace     { @include monospace; }
.verdana       { @include verdana; }

// css
.helvetica     { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.helvetica2    { font: 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.georgia       { font-family: Georgia, Cambria, "Times New Roman", Times, serif; }
.lucida-grande { font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; }
.monospace     { font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; }
.verdana       { font-family: Verdana, Geneva, sans-serif; }

Microfix

@include microfix;

source

A small clearfix hack from Nicolas Gallagher.

// scss
.microfix { @include microfix; }

// css
.microfix:before,
.microfix:after { content: ""; display: table; }
.microfix:after { clear: both; }

Position

@include position($position, $parameters);
@include absolute($parameters);
@include relative($parameters);
@include fixed($parameters);

source

A helper for absolute, relative, or fixed positioning.

The parameters match the syntax for padding, margin, and border-width parameters;

// scss
.absolute-0    { @include absolute(0); }
.fixed-12      { @include relative(1px 2px); }
.relative-123  { @include relative(1px 2px 3px); }
.relative-1234 { @include relative(1px 2px 3px 4px); }
.position-1234 { @include position(absolute, 1px 2px 3px 4px); }

// css
.absolute-0    { position: absolute; top: 0;   right: 0;   bottom: 0;   left: 0; }
.fixed-12      { position: fixed;    top: 1px; right: 2px; bottom: 1px; left: 2px; }
.relative-123  { position: relative; top: 1px; right: 2px; bottom: 3px; left: 2px; }
.relative-1234 { position: relative; top: 1px; right: 2px; bottom: 3px; left: 4px; }
.position-1234 { position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px; }

Reset

@include reset;

source

A CSS reset.

// scss
@include reset;

// css
* { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box; }
article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }

License

MIT Licensed