hyphens and underscores are treated the same in variable names #334

philipwalton opened this Issue Mar 26, 2012 · 7 comments


None yet

5 participants

If I go to http://sass-lang.com/try.html and enter the following code:

$font-size: 20px;
$font_size: 10px;

p {
  font-size: $font-size;

The result is:

p {
  font-size: 10px; }

It seems that the second variable (with the underscore) is overriding the first one (with the hyphen). I'd assume this isn't intentional, but if it is could you please provide the rationale.



It is intentional. The rationale is that the separator is a stylistic preference, not a meaningful one.

@chriseppstein thanks for the quick reply. I understand your rationale, and I can't say I disagree with you. Having $font-size and $font_size in the same file isn't exactly a best practice.

However, in my case, I was converting someone else's code and using the hyphens as a way to separate my variables from his, and since I wasn't expecting them to cause naming collisions, it took me forever to finally figure out that this was the root of the issue.

Perhaps explicitly stating this somewhere in the docs would prevent this from happening to others.


Seems reasonable :) Sorry for the lost time to debugging this.

Thanks. Don't worry, sass has saved me more time than it's lost me :)

@borhub borhub added a commit to borhub/discourse that referenced this issue Mar 25, 2014
@borhub borhub Fix regression from 6b05082 that broke usage of the $link-color (note…
… the hyphen) variable by having introduced a $link_color (underscored naming) variable lower in variables.scss

Since hyphens and underscores are aliases of each other in SASS (sass/sass#334), by having included a $link_color variable in an unexpected place (rather than updating the $link-color variable in the link colors section at the top of the variables file), and compounded by not using a HEX value that could be searched for, but using a SASS function instead, 6b05082 introduced a hard to debug inconsistency. In places where $link-color is used, we suddenly start getting unexpected color values and changing $link-color in variables.scss does nothing. Someone not experienced enough with SASS to know that he should also look for $link_color is left puzzled about where the color values are coming from.
xzyfer commented Feb 15, 2015

We've recently run into this in Libsass (sass/libsass#877). It appears this feature is still largely undocumented aside from this mention

Since the named arguments are variable names, underscores and dashes can be used interchangeably.

As @philipwalton points out it would be great to have a definitive reference for what this behaviour is applied to as it's currently unclear /cc sass/libsass#877 (comment)

Does anyone else think it would make more sense to display a compile error instead, when two variables only differ on "_" vs "-"? It can be rather confusing if you don't happen to be aware of this obscure functionality.

@armin-pfaeffle armin-pfaeffle referenced this issue in armin-pfaeffle/sass-autocompile Aug 9, 2016

Error message underscores (_) displays as dashes (-) #81

ArmorDarks commented Apr 3, 2017 edited

Wow. That whole idea with - and _ meaning same thing is kinda strange solution.

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