Sass – CSS-Tricks

How I Made an Icon System Out of CSS Custom Properties

Louis Hoebregts — Thu, 22 Sep 2022 15:17:21 +0000

SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.

There are many ways to include an SVG on a page and each technique has its own advantages and disadvantages. For the last couple of years, I have been using a Sass function to import directly my icons in my CSS and avoid having to mess up my HTML markup.

I have a Sass list with all the source codes of my icons. Each icon is then encoded into a data URI with a Sass function and stored in a custom property on the root of the page.

TL;DR

What I have for you here is a Sass function that creates a SVG icon library directly in your CSS.

The SVG source code is compiled with the Sass function that encodes them in data URI and then stores the icons in CSS custom properties. You can then use any icon anywhere in your CSS like as if it was an external image.

This is an example pulled straight from the code of my personal site:

.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}

Demo

CodePen Embed Fallback

Sass structure

/* All the icons source codes */
$svg-icons: (
  burger: 'There are no HTTP requests for the SVG files.
All of the icons are stored in one place.
If you need to update an icon, you don’t have to go over each HTML templates file.
The icons are cached along with your CSS.
You can manually edit the source code of the icons.
It does not pollute your HTML by adding extra markup.
You can still change the color or some aspect of the icon with CSS.


Cons


You cannot animate or update a specific part of the SVG with CSS.
The more icons you have, the heavier your CSS compiled file will be.



I mostly use this technique for icons rather than logos or illustrations. An encoded SVG is always going to be heavier than its original file, so I still load my complex SVG with an external file either with an  tag or in my CSS with url(path/to/file.svg).


Encoding SVG into data URI


Encoding your SVG as data URIs is not new. In fact Chris Coyier wrote a post about it over 10 years ago to explain how to use this technique and why you should (or should not) use it.



There are two ways to use an SVG in your CSS with data URI:



As an external image (using background-image,border-image,list-style-image,…)
As the content of a pseudo element (e.g. ::before or ::after)



Here is a basic example showing how you how to use those two methods:



CodePen Embed Fallback



The main issue with this particular implementation is that you have to convert the SVG manually every time you need a new icon and it is not really pleasant to have this long string of unreadable code in your CSS.



This is where Sass comes to the rescue!


Using a Sass function


By using Sass, we can make our life simpler by copying the source code of our SVG directly in our codebase, letting Sass encode them properly to avoid any browser error.



This solution is mostly inspired by an existing function developed by Threespot Media and available in their repository.



Here are the four steps of this technique:



Create a variable with all your SVG icons listed.
List all the characters that needs to be skipped for a data URI.
Implement a function to encode the SVGs to a data URI format.
Use your function in your code.


1. Icons list


/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: ''
);


2. List of escaped characters


/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
  ' ': '%20',
  '\'': '%22',
  '"': '%27',
  '#': '%23',
  '/': '%2F',
  ':': '%3A',
  '(': '%28',
  ')': '%29',
  '%': '%25',
  '<': '%3C',
  '>': '%3E',
  '\\': '%5C',
  '^': '%5E',
  '{': '%7B',
  '|': '%7C',
  '}': '%7D',
);


3. Encode function


/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
  // Check if icon exists
  @if not map-has-key($svg-icons, $name) {
    @error 'icon “#{$name}” does not exists in $svg-icons map';
    @return false;
  }

  // Get icon data
  $icon-map: map-get($svg-icons, $name);

  $escaped-string: '';
  $unquote-icon: unquote($icon-map);
  // Loop through each character in string
  @for $i from 1 through str-length($unquote-icon) {
    $char: str-slice($unquote-icon, $i, $i);

    // Check if character is in symbol map
    $char-lookup: map-get($fs-escape-chars, $char);

    // If it is, use escaped version
    @if $char-lookup != null {
        $char: $char-lookup;
    }

    // Append character to escaped string
    $escaped-string: $escaped-string + $char;
  }

  // Return inline SVG data
  @return url('data:image/svg+xml, #{$escaped-string} ');
}		


4. Add an SVG in your page


button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}



If you have followed those steps, Sass should compile your code properly and output the following:



button::after {
  content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}		



CodePen Embed Fallback


Custom properties


The now-implemented Sass svg() function works great. But its biggest flaw is that an icon that is needed in multiple places in your code will be duplicated and could increase your compiled CSS file weight by a lot!



To avoid this, we can store all our icons into CSS variables and use a reference to the variable instead of outputting the encoded URI every time.



We will keep the same code we had before, but this time we will first output all the icons from the Sass list into the root of our webpage:



/**
  * Convert all icons into custom properties
  * They will be available to any HTML tag since they are attached to the :root
  */

:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}



Now, instead of calling the svg() function every time we need an icon, we have to use the variable that was created with the --svg prefix.



button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}


Optimizing your SVGs


This technique does not provide any optimization on the source code of the SVG you are using. Make sure that you don’t leave unnecessary code; otherwise they will be encoded as well and will increase your CSS file size.



You can check this great list of tools and information on how to optimize properly your SVG. My favorite tool is Jake Archibald’s SVGOMG — simply drag your file in there and copy the outputted code.


Bonus: Updating the icon on hover


With this technique, we cannot select with CSS specific parts of the SVG. For example, there is no way to change the fill color of the icon when the user hovers the button. But there are a few tricks we can use with CSS to still be able to modify the look of our icon.



For example, if you have a black icon and you want to have it white on hover, you can use the invert() CSS filter. We can also play with the hue-rotate() filter.



CodePen Embed Fallback


Bonus #2: Updating the icon using CSS mask-image property


Another trick to be able to change the color of your icon, is to use it as a mask on your pseudo-element with a background. Set your pseudo-element as inline-block with a background-color and define a width & height for the size needed.



Once you have a rectangle with the color needed, apply those four values to only keep the shape of the SVG needed:



mask-image: var(--svg-burger): The reference to our icon.
mask-repeat: no-repeat: To prevent the mask to be duplicated.
mask-size: contain: To make the icon fit perfectly in the rectangle.
mask-position: center: To center our icon in the pseudo-element.



Don’t forget that all CSS mask properties still need to be prefixed with -webkit- for most browsers as of September 2022.



CodePen Embed Fallback



Thanks to Christopher and Mike for letting me know about this trick in the comments!


That’s it!


I hope you find this little helper function handy in your own projects. Let me know what you think of the approach — I’d be interested to know how you’d make this better or tackle it differently!

How I Made an Icon System Out of CSS Custom Properties originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.



A Practical Tip For Using Sass Default Parameters
Chris Coyier — Thu, 13 Jan 2022 15:17:28 +0000

Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don’t provide them when the function or mixin is called. 



Let’s focus on mixins here. Here’s the syntax of a mixin:



@mixin foo($a, $b, $c) {
  // I can use $a, $b, and $c in here, but there is a risk they are null
}

.el {
  @include foo(1, 2, 3);

  // if I tried to do `@include foo;`
  // ... which is valid syntax... 
  // I'd get `Error: Missing argument $a.` from Sass
}



It’s safer and more useful to set up default parameters in this Sass mixin:



@mixin foo($a: 1, $b: 2, $c: 3) {
}

.el {
  // Now this is fine
  @include foo;

  // AND I can send in params as well
  @include foo("three", "little", "pigs");
}



But what if I wanted to send in $b and $c, but leave $a as the Sass default parameter? The trick is that you send in named parameters:



@mixin foo($a: 1, $b: 2, $c: 3) {
}

.el {
  // Only sending in the second two params, $a will be the default.
  @include foo($b: 2, $c: 3);
}


A real-life example using Sass default parameters


Here’s a quick-y mixin that outputs what you need for very basic styled scrollbars (Kitty has one as well):



@mixin scrollbars(
  $size: 10px,
  $foreground-color: #eee,
  $background-color: #333
) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // Standard version (Firefox only for now)
  scrollbar-color: $foreground-color $background-color;
}



Now I can call it like this:



.scrollable {
  @include scrollbars;
}

.thick-but-otherwise-default-scrollable {
  // I can skip $b and $c because they are second and third
  @include scrollbars(30px);
}

.custom-colors-scrollable {
  // I can skip the first param if all the others are named.
  @include scrollbars($foreground-color: orange, $background-color: black);
}

.totally-custom-scrollable {
  @include scrollbars(20px, red, black);
}



I’m just noting this as I had to search around a bit to figure this out. I was trying stuff like sending empty strings or null as the first parameter in order to “skip” it, but that doesn’t work. Gotta do the named parameter approach. 

A Practical Tip For Using Sass Default Parameters originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.




How I Made a Generator for SVG Loaders With Sass and SMIL Options
Mariana Beldi — Thu, 26 Aug 2021 14:35:03 +0000

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors, shapes, and effects. It even lets you paste in a custom path or text, and then download the final SVG, copy the code, or open a demo over at CodePen.










How it started


Three coincidences led me to build a generator for SVG loaders.


Coincidence 1: Sarah Drasner’s book


The first time I read about Sass loops was in Sarah Drasner’s SVG Animations. She shows how to stagger animations with a Sass function (like the does in Chapter 6, “Animating Data Visualizations”).



I was inspired by that chapter and the possibilities of Sass loops.


Coincidence 2: A GIF


At that same point in life, I was asked to replicate a “loader” element, similar to Apple’s old classic.



This is a mockup of the loader I was asked to make.



I referenced Sarah’s example to make it happen. This is the Sass loop code I landed on:



@for $i from 1 to 12 {
  .loader:nth-of-type(#{$i}) {
    animation: 1s $i * 0.08s opacityLoader infinite;
  }
}
@keyframes opacityLoader {
 to { opacity: 0; }
}



This defines a variable for a number (i) from 1 to 12 that increases the delay of the animation with every :nth-child element. It was the perfect use case to animate as many elements as I wanted with only two lines of Sass, saving me CSS declarations for each of the delays I needed. This is the same animation, but written in vanilla CSS to show the difference:



.loader:nth-of-type(1) {
  animation: 1s 0.08s opacityLoader infinite;
}
.loader:nth-of-type(2) {
  animation: 1s 0.16s opacityLoader infinite;
}

/* ... */

.loader:nth-of-type(12) {
  animation: 1s 0.96s opacityLoader infinite;
}
@keyframes opacityLoader {
  to { opacity: 0; }
}


Coincidence 3: An idea


With these things going on in my head, I had an idea for a gallery of loaders, where each loader is made from the same Sass loop. I always struggle to find these kinds of things online, so I thought it might be useful for others, not to mention myself.



I had already built this kind of thing before as a personal project, so I ended up building a loader generator. Let me know if you find bugs in it!


One loader, two outputs


I was blocked by my own developer skills while creating a generator that produces the right Sass output. I decided to try another animation approach with SMIL animations, and that’s what I wound up deciding to use.



But then I received some help (thanks, ekrof!) and got Sass to work after all.



So, I ended up adding both options to the generator. I found it was a challenge to make both languages return the same result. In fact, they sometimes produce different results.


SMIL vs. CSS/Sass


I learned quite a bit about SMIL and CSS/Sass animations along the way. These are a few of the key takeaways that helped me on my way to making the generator:



SMIL doesn’t rely on any external resources. It animates SVG via presentation attributes directly in the SVG markup. That’s something that neither CSS nor Sass can do.
SMIL animations are preserved when an SVG is embedded as an image or as a background image. It is possible to add a CSS