richthegeek / phpsass

A compiler for SASS/SCSS written in PHP, brought up to date (approx 3.2) from a fork of PHamlP: http://code.google.com/p/phamlp/
http://phpsass.com/
382 stars 83 forks source link

Using @content re-uses the same content block each time #66

Closed g105b closed 1 year ago

g105b commented 11 years ago

This is referring to the @content feature.

When a mixin that has a @content block is used more than once, the same content is output for recurring calls.

Here's a quick example that shows the problem (tested on http://www.phpsass.com/try just now). Note that the code is used to output keyframe animation declarations with browser prefixes, but the outputted CSS re-declares "FadeIn" twice, rather than declaring the "GrowWidth" animation as it should:

// Outputs the keyframe declarations with browser prefixes. 
@mixin Keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

// Defines a named keyframe sequence, fading an element in.
@include Keyframes(FadeIn) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

// Defines a named keyframe sequence, growing an element's width.
@include Keyframes(GrowWidth) {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

// creates an animation using defined keyframes.
@mixin Anim($name, $duration, $count) {
    -webkit-animation: $name $duration $count;
    -moz-animation: $name $duration $count;
    animation: $name $duration $count;
}

div#fadeIn {
    @include Anim(FadeIn, 1s, 1);
}

div#growWidth {
    @include Anim(GrowWidth, 1s, 1);
}

This is preprocessed to:

@-webkit-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@-moz-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}

@-webkit-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@-moz-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}

div#fadeIn {
  -webkit-animation: FadeIn 1s 1;
  -moz-animation: FadeIn 1s 1;
  animation: FadeIn 1s 1;
}

div#growWidth {
  -webkit-animation: GrowWidth 1s 1;
  -moz-animation: GrowWidth 1s 1;
  animation: GrowWidth 1s 1;
}
g105b commented 11 years ago

I have confirmed this is an issue rather than an error in my scss by running the same example through the official Ruby implementation available here: http://sass-lang.com/try.html

g105b commented 11 years ago

Any news on this? I have had a look in the code myself but not dared changing anything - could you indicate where this parsing takes place so I could try and fix it ?

gabrielfin commented 10 years ago

Issue #71 is a duplicate of this. I just posted a fix there.

g105b commented 1 year ago

Thanks @gabrielfin