SASS: can we reference property values?

[Komb]

Hi there,

Is it possible (or planned) to somehow reference other properties and
use their values in expressions?

Something, like:

.class {
padding: 15px;
width: 100 - &.padding*2
}

or

.container {
width: .content.width + .sidebar.width;
}

etc.

That would be the higher state of awesomeness.

Happy New Year,
Komb

[Nathan Weizenbaum]

We've considered this sort of feature, but we have yet to see a convincing use case where variables weren't approximately as useful. If you can present one, we'll reconsider.

It's worth noting that this presents problems in cases such as the following:

  .content {width: 10px}
  .content {width: 15px}
  .sidebar.foo {width: 20px}
  .sidebar.bar {width: 30px}

  .container {width: .content.width + .sidebar.width}

Or this:

  .content {border: 1px solid black; padding: &.border-width}

Or this:

  .content {
    -moz-some-property-sass-doesnt-know-about: 1px solid black;
    padding: &.-moz-some-property-sass-doesnt-know-about-width;
  }

We'd have to come up with a clear and consistent resolution to all of these.

--
You received this message because you are subscribed to the Google Groups "Haml" group.
To post to this group, send email to ha...@googlegroups.com.
To unsubscribe from this group, send email to haml+uns...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/haml?hl=en.

[Komb]

Hi,

I'm not shure about one big (and very convincing) usecase - it is more
like a global workflow/workspeed improvement, which, applied in small
bits and pieces here and there, could probably lead to cleaner scripts,
reduce variable count and offer more comfort in general.

Ok, enough lyrics, back to techy stuff :)

>> It's worth noting that this presents problems in cases such as the
>> following:
>> .content {width: 10px}
>> .content {width: 15px}

Return last encountered. That's what browser will do - don't see why
SASS should act different.

>> .sidebar.foo {width: 20px}
>> .sidebar.bar {width: 30px}
>> .container {width: .content.width + .sidebar.width}

Throw "undefined property". There is no point in trying to compensate
for author's inconsistency in his/her own script.

>> .content {border: 1px solid black; padding: &.border-width}

Array access operator could come in handy, when requesting from
shorthands. The upper line would/should/could then work like that
(extended it a bit):

.content {
border: 1px solid black;

padding: &.border[0];
background-color: transparentize(&.border[2], 50%);
}

.something {
padding: 20px 5px 7px 30px;
background: url(...) &.padding[0] &.padding[3]/2 no-repeat;
color: .content.border[2];
}

>> .content {
>> -moz-some-property-sass-doesnt-know-about: 1px solid black;
>> padding: &.-moz-some-property-sass-doesnt-know-about-width;
>> }

Return full value of the requested prop as is. In cases like this author
most likely knows, what he/she is requesting.

As a footnote:
It just feels more natural from programmers pov (I believe, that most
SASS users are in fact programmers) - if property is defined, it is
somehow accessible and reusable.

And isn't it very tempting - to seamlessly tie together closely related
properties and objects and STUFF?

Convincing?
k.