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.
Download “UtilityBelt.scss”
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;
}
}A descriptive div that uses the triangle mixin to point to something.
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: '$';
position: relative;
left: 0;
}
}
.USD %currency:before { content: '$'; }
.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 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 @content directive 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
valid text-overflow values.
@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 standard title).
@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 me
I 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.
- A 5-minute trick to start tracking events in Google Analytics or Mixpanel - March 10, 2015
- The Chrome CSS Bug That Crashed Our Site - January 4, 2015
- Free Development Icon Set - July 18, 2014
- Stop using Javascript Tooltips - June 24, 2014
- HUI Weekly #18- Alfred workflows for the exceptionally lazy, SVG vs iconfont, Apple Store redesign, flickr for iOS - April 23, 2014
- HUI Weekly #17 – Crafting Carousel, Optimizing Photoshop, Freebie Line Icons - April 18, 2014
- HUI Weekly #16 – Illustrator Layer Exporter, Chopsticks as Pixels, No-hassle Responsive Images - April 11, 2014
- HUI Weekly #15 – BrowserQuest HTML5 Multiplayer Game, Macaw Is Out, Amazing April Fools Day UI Prank - April 3, 2014
- HUI Site of the Week – Dataveyes - March 28, 2014
- HUI Weekly #13 – The World Trade Center, What’s new in Sass, A peak into SXSW and more - March 20, 2014
Tags
Published on 22 Jan 2014
