Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

named colours behave oddly when used in variables #558

Closed
blowback opened this issue Oct 18, 2014 · 5 comments
Closed

named colours behave oddly when used in variables #558

blowback opened this issue Oct 18, 2014 · 5 comments

Comments

@blowback
Copy link

blowback commented Oct 18, 2014

There's something odd going on with named colours. They're meant to be "indistinguishable from unqoted strings".

@function is_gold($c) {
    @if ($c == gold) {
        @return 'yes';
    }
    @return 'no';
}

div {
    foo: is_gold(gold);
    bar: is_gold(white);
}

sass gives me:

div {
  foo: "yes";
  bar: "no"; }

sassc gives me:

div {
  foo: 'no';
  bar: 'no'; }
@blowback blowback changed the title named colours behave oddly when used as function params named colours behave oddly when used in variables Oct 18, 2014
@blowback
Copy link
Author

simpler:

$gold: gold;
$white: white;

div {
    foo: if($white == gold, 'yes', 'no');
    bar: if($gold == gold, 'yes', 'no');
}

gives no/no not no/yes

@cahamilton
Copy link

I've noticed something similar with mixins converting over to LibSass.

Example:

@mixin button($button-color: null) {

    @if $button-color == red {
        background-color: #ff0000;
    } @else if $button-color == blue {
        background-color: #0000ff;
    } @else if $button-color == green {
        background-color: #00FF00
    } @else {
        background-color: #ccc;
    }

}

.btn-red {
    @include button($button-color: red);
}

.btn-blue {
    @include button($button-color: blue);
}

.btn-green {
    @include button($button-color: green);
}

.btn {
    @include button;
}

RubySass compiles as:

.btn-red {
    background-color: #ff0000; }
.btn-blue {
    background-color: #0000ff; }
.btn-green {
    background-color: #00ff00; }
.btn {
    background-color: #ccc; }

LibSass compiles as:

.btn-red {
    background-color: #ccc; }
.btn-blue {
    background-color: #ccc; }
.btn-green {
    background-color: #ccc; }
.btn {
    background-color: #ccc; }

@mgreter
Copy link
Contributor

mgreter commented Dec 23, 2014

This seems to be fixed by latest master? @xzyfer maybe you can check?

@xzyfer
Copy link
Contributor

xzyfer commented Dec 23, 2014

I can confirm the latest master returns the following output

.btn-red {
  background-color: #ff0000; }

.btn-blue {
  background-color: #0000ff; }

.btn-green {
  background-color: #00FF00; }

.btn {
  background-color: #ccc; }

@xzyfer
Copy link
Contributor

xzyfer commented Dec 23, 2014

It's worth noting #00FF00 isn't normalised to #00ff00 but that's its own issue IMO.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants