Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics Add Reusable Logic to Your Sass Write Loops with @for

Bryan Land
Bryan Land
10,306 Points
Posted by Bryan Land
Bryan Land
10,306 Points

Built in functions additional syntax

I noticed when using emmet in VSCode, the adjust-hue or map-get functions, it automatically creates something almost like key value pairs for arguments. Here is an example:

@for $i from 1 to 10 {
  .box-#{$i} {
    background-color: adjust-hue(tomato, $i *20);
    // can also be written as
    background-color: adjust-hue($color: tomato, $degrees: $i * 20);
  }
}

This obviously isn't necessary to get the same output that Guil Hernandez gets, but is this technically the correct syntax for these built in functions?

1 Answer

Brendan Boyle
Brendan Boyle
18,233 Points

The adjust-hue() function expects the $color and $degrees arguments to be input in the correct order, as Guil does in the video. If you use the keys the values can be input in any order. VSCode throws them up automatically for you because it's nice like that. So, you don't need to use them, if you remember to arrange your arguments in the right order.