Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Bryan Land
Bryan Land
10,269 Points
Posted by Bryan Land
Bryan Land
10,269 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
17,141 Points
Brendan Boyle
Brendan Boyle
17,141 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.