Every front-end developer needs a battle-tested SCSS arsenal for starting new projects. Here are 10 of the best SCSS utilties I find myself using most often. You can download the entire file to use in your projects from the UtilityBelt Repository on Github.
Triangle
Sagi likes to call this the chupchick (don’t ask me why). It’s great for adding a point to tooltips or some extra flair to a component, but can also be used as a standalone icon. To make this mixin really flexible, it accepts a parameter, which can be any of the four cardinal directions.
/*
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
content: '';
display: block;
position: absolute;
height: 0; width: 0;
@if ($direction == 'up'){
border-bottom: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'down'){
border-top: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'left'){
border-top: 1/2*$size solid transparent;
border-bottom: 1/2*$size solid transparent;
border-right: $size solid $color;
}
@else if ($direction == 'right'){
border-top: 1/2*$size solid transparent;
border-bottom: 1/2*$size solid transparent;
border-left: $size solid $color;
}
}Currency
I wanted to be able to display a currency symbol on any type of text element without breaking the design, but also to be able to switch it easily. Using this method I can set all elements that contain a price, or any other monetary amount with the class currency. Then on the body element of my site (or any parent element actually) I can dynamically set which country’s currency should be applied based on the user, the location, or any other external factors I’m taking into consideration. In the actual implementation I @extend a silent class, so that the output is not printed in the compiled CSS multiple times.
%currency { position: relative; &:before { content: ' Example Usage<body class="USD"> <span class="price">45</span> </body> .price { @extend %currency; }Clear Fix
There are many different ways to clear floats, but Nicholas Gallagher's micro clearfix hack seems to have become the most popular. However, I hate that it hijacks both of my pseudo elements, so I use a modified version that only requires the:after. Side note - multiple pseudo elements were proposed in the CSS3 spec as early as 2003, but unfortunately were never implemented.%clearfix { *zoom: 1; &:after { content: ''; display: table; line-height: 0; clear: both; } }Respond To
This is a relatively simple media query mixin that uses the beautiful Sass@contentdirective and allows me to handle screen sizes inline with the rest of my style. This prevents a lot of debugging headaches down the road. I set the dimensions of my media variables once, and then never have to deal with them again.// Breakpoints for each query $smartphone: 480px; $tabletPortrait: 767px; $tabletLandscape: 1024px; $desktop: 1174px; $largeScreen: 1400px; @mixin respondTo($media) { @if $media == smartphone { @media (max-width: $smartphone) { @content; } } @else if $media == tablet { @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) { @content; } } @else if $media == smallScreen { @media (max-width: $desktop) { @content; } } @else if $media == desktop { @media (min-width: $desktop) { @content; } } }Example usage
div { // regular styles here @include respondTo(desktop) { &:hover { background: blue; } // only add the hover effect on desktop browsers } }I've seen a lot of interesting versions of more advanced options, but this one has been more than enough for me so far.
Ghost Vertical Align
This is a slightly modified version of a CSS-Tricks method for vertically centering elements with a dynamic size. Works beautifully and doesn't require an extra, non-semantic HTML element.@mixin ghostVerticalAlign(){ &:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: .1px; } }Truncate Text
A simple method for ensuring that your text element doesn't overflow its container and breaks nicely. It takes one parameter, which is any of the validtext-overflowvalues.@mixin truncateText($overflow: ellipsis){ overflow: hidden; white-space: nowrap; text-overflow: $overflow; // values are: clip, ellipsis, or a string }Animation
Compass CSS3 mixins don't yet handle vendor prefixes for CSS animations, so this is a very simple mixin to simulate that functionality.@mixin animation($name, $duration: 1000ms, $iterations: infinite, $timing-function: ease, $delay: 0ms) { // There is a FF bug that requires all time values to have units, even 0 !!!!!! -webkit-animation: $name $duration $iterations $timing-function $delay; -moz-animation: $name $duration $iterations $timing-function $delay; -o-animation: $name $duration $iterations $timing-function $delay; animation: $name $duration $iterations $timing-function $delay; }Alerted
We used this mixin on TapDog for showing the user when they have notifications. I've come to love it for all sorts of scenarios when you want to indicate to the user that they need to take action. It creates a smooth, pulsing circle next to any element that the mixin is applied to.@mixin alerted() { &:before { content: ''; position: absolute; top: 6px; right: 6px; height: 8px; width: 8px; @include border-radius(10px); background-color: gold; } &:after { content: ''; position: absolute; top: 0; right: 0; height: 20px; width: 20px; @include border-radius(20px); background-color: transparent; border: solid gold; border-width: 2px; // animates @include box-sizing(border-box); @include animation($name: alertMe); } } @keyframes alertMe { // -vendor prefixes omitted for brevity, but should be used in production from { border-width: 3px; border-color: gold; } to { border-width: 0; border-color: rgba(gold, .1); } }Resize Sprite
This mixin, borrowed from Darren Wood, allows you to create and load a single sprite image file and then downsize it using CSS. Perfect for working with 2X images and dealing with retina screens. (Requires compass CSS3 mixins in order to use@include background-size()).@mixin resize-sprite($map, $sprite, $percent) { $spritePath: sprite-path($map); $spriteWidth: image-width($spritePath); $spriteHeight: image-height($spritePath); $width: image-width(sprite-file($map, $sprite)); $height: image-height(sprite-file($map, $sprite)); @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100))); width: ceil($width*($percent/100)); height: ceil($height*($percent/100)); background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) ); }Tooltips
These pure CSS tooltips are unbelievably easy to implement, still allow you to place the content in the HTML, and have surprisingly good browser support. They require the triangle mixin, and grab their text content from an HTML5 data-tooltip property on the element (although this can be changed to any other attribute you prefer, including the standardtitle).@mixin hui_tooltip($content: attr(data-tooltip), $direction: top) { position: relative; &:before, &:after { display: none; z-index: 98; } &:hover { &:after { // for text bubble content: $content; display: block; position: absolute; height: 12px; // (makes total height including padding 22px) padding: 6px; font-size: 12px; white-space: nowrap; color: #fff; @include text-shadow(1px 1px #000); background-color: #222; } @if ($direction == 'top'){ &:before { @include triangle(down, 6px, #222); top: -6px; margin-top: 0; left: 47%; } &:after { top: -28px; left: 47%; margin-left: -20px; } } @else if ($direction == 'bottom'){ &:before { @include triangle(up, 6px, #222); top: auto; margin-top: 0; bottom: -6px; left: 47%; } &:after { bottom: -28px; left: 47%; margin-left: -20px; } } } }Hover over meI know there are a ton of other great utilities out there. What utilities do you use when you're starting a new project?
You can download utility-belt.scss here or view the UtilityBelt Repository on Github.
;
position: relative;
left: 0;
}
}
.USD %currency:before { content: 'Example UsageClear Fix
There are many different ways to clear floats, but Nicholas Gallagher's micro clearfix hack seems to have become the most popular. However, I hate that it hijacks both of my pseudo elements, so I use a modified version that only requires the:after. Side note - multiple pseudo elements were proposed in the CSS3 spec as early as 2003, but unfortunately were never implemented.Respond To
This is a relatively simple media query mixin that uses the beautiful Sass@contentdirective and allows me to handle screen sizes inline with the rest of my style. This prevents a lot of debugging headaches down the road. I set the dimensions of my media variables once, and then never have to deal with them again.Example usage
I've seen a lot of interesting versions of more advanced options, but this one has been more than enough for me so far.
Ghost Vertical Align
This is a slightly modified version of a CSS-Tricks method for vertically centering elements with a dynamic size. Works beautifully and doesn't require an extra, non-semantic HTML element.Truncate Text
A simple method for ensuring that your text element doesn't overflow its container and breaks nicely. It takes one parameter, which is any of the validtext-overflowvalues.Animation
Compass CSS3 mixins don't yet handle vendor prefixes for CSS animations, so this is a very simple mixin to simulate that functionality.Alerted
We used this mixin on TapDog for showing the user when they have notifications. I've come to love it for all sorts of scenarios when you want to indicate to the user that they need to take action. It creates a smooth, pulsing circle next to any element that the mixin is applied to.Resize Sprite
This mixin, borrowed from Darren Wood, allows you to create and load a single sprite image file and then downsize it using CSS. Perfect for working with 2X images and dealing with retina screens. (Requires compass CSS3 mixins in order to use@include background-size()).Tooltips
These pure CSS tooltips are unbelievably easy to implement, still allow you to place the content in the HTML, and have surprisingly good browser support. They require the triangle mixin, and grab their text content from an HTML5 data-tooltip property on the element (although this can be changed to any other attribute you prefer, including the standardtitle).Hover over meI know there are a ton of other great utilities out there. What utilities do you use when you're starting a new project?
You can download utility-belt.scss here or view the UtilityBelt Repository on Github.
; }
.EUR %currency:before { content: '\20AC'; } // must escape the html entities for each currency symbol
.ILS %currency:before { content: '\20AA'; }
.GBP %currency:before { content: '\00A3'; }
Example UsageClear Fix
There are many different ways to clear floats, but Nicholas Gallagher’s micro clearfix hack seems to have become the most popular. However, I hate that it hijacks both of my pseudo elements, so I use a modified version that only requires the:after. Side note – multiple pseudo elements were proposed in the CSS3 spec as early as 2003, but unfortunately were never implemented.Respond To
This is a relatively simple media query mixin that uses the beautiful Sass@contentdirective and allows me to handle screen sizes inline with the rest of my style. This prevents a lot of debugging headaches down the road. I set the dimensions of my media variables once, and then never have to deal with them again.Example usage
I’ve seen a lot of interesting versions of more advanced options, but this one has been more than enough for me so far.
Ghost Vertical Align
This is a slightly modified version of a CSS-Tricks method for vertically centering elements with a dynamic size. Works beautifully and doesn’t require an extra, non-semantic HTML element.Truncate Text
A simple method for ensuring that your text element doesn’t overflow its container and breaks nicely. It takes one parameter, which is any of the validtext-overflowvalues.Animation
Compass CSS3 mixins don’t yet handle vendor prefixes for CSS animations, so this is a very simple mixin to simulate that functionality.Alerted
We used this mixin on TapDog for showing the user when they have notifications. I’ve come to love it for all sorts of scenarios when you want to indicate to the user that they need to take action. It creates a smooth, pulsing circle next to any element that the mixin is applied to.Resize Sprite
This mixin, borrowed from Darren Wood, allows you to create and load a single sprite image file and then downsize it using CSS. Perfect for working with 2X images and dealing with retina screens. (Requires compass CSS3 mixins in order to use@include background-size()).Tooltips
These pure CSS tooltips are unbelievably easy to implement, still allow you to place the content in the HTML, and have surprisingly good browser support. They require the triangle mixin, and grab their text content from an HTML5 data-tooltip property on the element (although this can be changed to any other attribute you prefer, including the standardtitle).Hover over meI know there are a ton of other great utilities out there. What utilities do you use when you’re starting a new project?
You can download utility-belt.scss here or view the UtilityBelt Repository on Github.
