Scss for the lazy.

I have been working with scss for a while now, I have learnt a lot on the way, I still find a few tricks around to experiment with and adapt into my workflow

In my workflow I have a typography.scss file whereby I have all the different headings with default stylings and so on.

Previously, I was writing the different headings like this

h1{
	@include torem('font-size',32px);
}

h2{
	@include torem('font-size',24px);
}

h3{
	@include torem('font-size',18px);
}

h4{
	@include torem('font-size', 16px);
}

After I have written the first heading, I would copy/paste and modified accordingly. :-p

Also, I have been using the following mixin to convert px values to rem with px fallbacks (of course).

@mixin torem($target, $sizes){
    $rem: ();
    #{$target}: $sizes;
    @each $size in $sizes{
        @if $size == auto or $size == 0{
        	$rem: append($rem, $size);
        }
        @else{
            $rem: append($rem, $size / $base + rem); 
        }
    }
    #{$target} : $rem;
}

Recently I was going through my scss files, and a conversation I had with a friend recently about how loop can save us time popped into my mind. So I came up with this for my typography.scss file.

$size_list: 32px, 24px, 18px, 16px;

@for $i from 1 through 4{
	$size: nth($size_list, $i);
	h#{$i}{
		@include torem('font-size', $size);
	}
}

So with this I won't have to copy/paste my headings and modified. I only have to add the sizes I intend to use for each heading in $size_list and the loop will do its job. ;-)

h1 {
  font-size: 32px;
  font-size: 2rem; }

h2 {
  font-size: 24px;
  font-size: 1.5rem; }

h3 {
  font-size: 18px;
  font-size: 1.125rem; }

h4 {
  font-size: 16px;
  font-size: 1rem; }

What tricks are you using in your workflow?

Humeira Diljore

Humeira Diljore

Developer, lives on a little island call Mauritius in the Indian Ocean. These days, can often be found battling monsters & running around Hyrule.

Read More