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 (retired) Advanced Sass Concepts Advanced Mixin Arguments

Dennis Brown
Dennis Brown
28,742 Points

Default Value behavior changes since video?

I'm curious if anyone know how default values have changed, or become more strict since this video. I can not find a way to get them to work in Sass 3.4.22.

I have noticed that they now require you that non-defaulted arguments are put before the defaulted in the argument list, but no matter what, I cannot get default values to work at all from the include. In these code snippets, the include IS in a element bracket. I'm simply lowered the amount of code shown.

@mixin box($color: blue, $size: 100px, $display: block) {
  background: $color;
  display: $display;
  height: $size;
  width: $size;
}

// in a p element somewhere else:
@include box(blue, 100px, inline); // works

or 

@include box(display: inline);  // does not work. Error: Mixin box doesn't have an arg named $display

I also want to mention in the earlier part of the video with the size/color arguments, I could not specify values this way as well. It's almost as if the colon separated values no longer exist in mixins.

@mixin box($color, $size) {
  background: $color;
  display: $display;
  height: $size;
  width: $size;
}

// in a p element somewhere else:
@include box(20px, blue); // works

@include box($color: blue, $size: 20px); // even flipped gives: box doesn't have the following args: $size, $color. 

I have looked online, and it seems that default values worked the same last year. Still for whatever reason it is not working, and my extremely strict sass linter is not telling me anything is wrong. Does anyone have any insight at all? Thanks in advance. :)