Month:

May 2018

Comments in Sass

In Sass you can define multiline comments the same way as in CSS: /* Just some comment about some style */ Unless you use the compressed output format, these multiline comments will be kept in the final CSS. You can force Sass to keep multiline comments in the final output by using this syntax with …
Read more

Referencing the Parent Selector in Sass

In addition to simple nesting in Sass, you can also reference the parent selector using the & character: .main a { background-color: rgba(236,198,48,0.2); transition: background-color .2s ease-out; &:hover { background-color: rgba(236,198,48,0.8); } } The above, once compiled to CSS, will yield the following: .main a { background-color: rgba(236, 198, 48, 0.2); transition: background-color .2s ease-out; …
Read more

Nesting Selectors in Sass

Sass allows you to easily nest your selectors and organize your rules hierarchically: .main { background-color: antiquewhite; margin: 0 auto; img { max-width: 100%; transform: rotate(3deg); } p:first-child { font-size: 1.2em; span { background-color: burlywood; padding: 0.2em 0.4em; } } } The above, once compiled to CSS, would yield the following: .main { background-color: antiquewhite; …
Read more

Sass Maps

If you’re familiar with programming languages, Sass maps are similar to arrays (in PHP or JavaScript) or dictionaries (in Python). If you’re not, think of them as lists that group similar items together. A Sass map has keyword (key) and value pairs and is used to group similar variables – for example theme colours or …
Read more

Sass Lists

Lists in Sass are very simply a series of items stored within a variable. Using a list enables you to keep words or keywords together. You can then access any of these items using the nth() function. Lists can be delimited by either spaces or commas, and list items can either be unquoted, wrapped in …
Read more

Sass @each Loops

If you’ve got a Sass Map or Lists you can loop through them, rather than addressing each key separately. At the beginning of the @each loop, you assign a variable to be used inside the loop: $shapes: triangle, square, circle; @each $shape in $shapes { .icon-#{$shape} { background-image: url(‘/images/#{$shape}.jpg’); } } $map: ( h1: 20px, …
Read more

Sass Variables

Use variables in Sass to save and reuse values throughout your code: $box-bgcolor: #FF8100; $box-border: 4px dashed yellow; .box { background-color: $box-bgcolor; border: $box-border; } ? Recommended course ⤵ Advanced CSS and Sass: Flexbox, Grid, Animations and More! Result The above snippet will yield the following CSS: .box { background-color: #FF8100; border: 4px dashed yellow; …
Read more

Sass Mixin Syntax

Create reusable groups of declarations with Mixins. A good use case is when many vendor prefixes need to be used. Code it once and call it anywhere: @mixin column-count($nb-columns) { -webkit-column-count: $nb-columns; -moz-column-count: $nb-columns; column-count: $nb-columns; } // Calling the mixin: .two-columns { @include column-count(2); } ? Recommended course ⤵ Advanced CSS and Sass: Flexbox, …
Read more

Jest Mock Timers

One of the biggest hurdles to testing timeouts is waiting for them to time out. Jest provides a way around this. runAllTimers Let’s say you’re testing a program that emits an event after some time, but you don’t want to wait however long for that event to actually be emitted. Jest gives you the option …
Read more