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

Support "transparent" as sass color name #754

Closed
robocoder opened this Issue May 17, 2013 · 19 comments

Comments

Projects
None yet
8 participants
@blackfalcon

This comment has been minimized.

blackfalcon commented May 17, 2013

What's the question/issue? The CSS transparent keyword is fully supported in Sass.

.block
  background-color: transparent 

will give you perfectly valid CSS like

.block {
  background-color: transparent;
}
@robocoder

This comment has been minimized.

robocoder commented May 17, 2013

What about as a sass color name?

.block {
   background-color: alpha(transparent);
}
@blackfalcon

This comment has been minimized.

blackfalcon commented May 17, 2013

Returns the alpha component (opacity) of a color. Transparent has no opacity?

@robocoder

This comment has been minimized.

robocoder commented May 18, 2013

It was an example to show it being used as a sass color name.

@robwierzbowski

This comment has been minimized.

Contributor

robwierzbowski commented May 20, 2013

I see what you're saying — if an author passes transparent into a mixin or function that uses Sass color functions there will be an error. But Sass colors are defined and translated with a hex rgb value, no alpha. What should the result of grayscale(transparent), red(transparent), or mix(transparent, green, 0.5) return?

@cimmanon

This comment has been minimized.

cimmanon commented May 20, 2013

The linked spec clearly specifies that the keyword transparent is equal to rgba(0,0,0,0). I don't see why there's a question as to what the color functions should be returning.

@robwierzbowski

This comment has been minimized.

Contributor

robwierzbowski commented May 20, 2013

Missed that link at the top, my mistake.

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 20, 2013

@cimmanon speaks the truth. http://www.w3.org/TR/css3-color/#transparent is rgba(0,0,0,0). We should create a color object when we see this identifier and we can compact transparent black in compressed mode to transparent (which saves 2 characters).

@stryju

This comment has been minimized.

stryju commented May 30, 2013

@chriseppstein I don't think, that replaceing transparent with rgba(0,0,0,0) is the way to go:
IE8- will not understand it and ignore the rule...
and since the market share for IE8 is still a factor, it might cause some issues...

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 30, 2013

@stryju The commit that @nex3 made causes all colors that end up equivalent to rgba(0,0,0,0) regardless of their authored format to be output as transparent. So this actually increases IE8 support.

@stryju

This comment has been minimized.

stryju commented May 30, 2013

@chriseppstein great :)

@nex3

This comment has been minimized.

Contributor

nex3 commented May 30, 2013

Don't rely on rgba(0,0,0,0) being transformed to transparent, though; when #363 is fixed, it will be output in whatever format the author used.

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 30, 2013

@nex3 I'm somewhat torn on #363 when it comes to emitting values that have
a more browser compatible representation. First off, it could cause
regressions for existing users, and second off, I think we should always
favor end-user experience over an aesthetic feature like #363. So I think
we'll end up with a happy medium when that issue is addressed and I think
rgb(0,0,0,0) should still output as transparent after that is closed.

On Thu, May 30, 2013 at 11:02 AM, Nathan Weizenbaum <
notifications@github.com> wrote:

Don't rely on rgba(0,0,0,0) being transformed to transparent, though;
when #363 #363 is fixed, it will be
output in whatever format the author used.


Reply to this email directly or view it on GitHubhttps://github.com//issues/754#issuecomment-18697165
.

@nex3 nex3 closed this Jan 8, 2014

@krnlde

This comment has been minimized.

krnlde commented Feb 3, 2015

If you use rgba(0,0,0,0) for the shorthand transparent then fade-in(transparent, 100%) would give you a 100% black. Not really the expected color, isn't it?

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented Feb 3, 2015

you're asking to make transparent less transparent. The color you end up with is pretty arbitrary, but black seems better than white or fuchsia.

@krnlde

This comment has been minimized.

krnlde commented Feb 3, 2015

What about stay transparent?

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented Feb 3, 2015

Adding special handling for transparent when CSS defines it as an alias for rgba(0,0,0,0) seems like a bad idea.

Here's a solution for your use case:

@function mostly-fade-in($c) {
  @if $c == transparent { @return $c; }
  @else { @return fade-in($c); }
}
@krnlde

This comment has been minimized.

krnlde commented Feb 3, 2015

True.

@krnlde

This comment has been minimized.

krnlde commented Feb 17, 2015

Trivia: Less interprets it the same way.

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