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 Modular CSS with Sass Getting Modular with Mixins and Functions Pseudo-Element Mixin with @error

Brad Lacke
Brad Lacke
7,438 Points
Posted by Brad Lacke
Brad Lacke
7,438 Points

Sass error with p-el mixin

New video, new Sass error. Starting to wonder if I'm cut out for this stuff. Anyway:

Mixin:

@mixin p-el($el, $el-w: null, $el-h: null) {
        &:#{$el} {
            @extend %pseudos;
            width: $el-w;
            height: $el-h;
        }
    }

Calling the placeholder that Guil wrote:

%pseudos {
  display: block;
  content: ''; 
  position: absolute;
}

And implemented here:

.icn-toggle {
    @include p-el('before', 25px, 3px) {
        background: palette(grey, light);
        top: 4px;
    } 

    width: 25px;
    height: 17px;
    position: absolute;
    border-top: solid 3px palette(grey);
    border-bottom: solid 3px palette(grey);
}

I'm getting from the console:

"error scss/_main.scss (Line 17: Mixin "p-el" does not accept a content block.)"

Anyone have any ideas?

3 Answers

akak
akak
29,445 Points
akak
akak
29,445 Points

It looks like you didn't add @content; to your @mixin p-el definition.

@mixin p-el($el, $el-w: null, $el-h: null) {
        &:#{$el} {
            @extend %pseudos;
            width: $el-w;
            height: $el-h;
           @content;
        }
    }
Antonio Jaramillo
Antonio Jaramillo
15,604 Points
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Sass definitely has a steep learning curve when you get into the meat of it, and it is a stickler for correct syntax, but I feel you. I don't think that I'll ever stop making mistakes, but being able to identify those mistakes quickly comes with time.

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

Ahhh! Thank you! :(

mikes02
mikes02
Courses Plus Student 16,968 Points

Everyone goes through periods of wondering if they are cut out for it, it's not always easy, but stick to it and practice, it will click with time.