sass

sass copied to clipboard

I have become fond of CoffeeScript's ability to declare variables that have the same value in this manner:

someVariable: anotherVariable: "someValue"

I would like the ability to declare CSS properties in SASS/SCSS like this:

width: height: 10px;

and then the output would be:

width: 10px;
height: 10px;

Originally filed by @deleteme

It's an interesting idea, but I think I prefer:

width, height: 10px;

as a syntax. I find myself needing this every once and a while usually when I need to set margin-left and margin-right to the same value without setting margin-top and margin-bottom via the compound property.

I don't know why I referenced CoffeeScript. JavaScript lets you do the same thing, but it uses an equals sign.

For sass and scss, I would prefer a colon because it is the normal assignment character.

The colon syntax allows for easier copy and paste than using a comma. Also the comma is extra syntax which may be non obvious in situations where attributes use commas too.

@chrislloyd, the parity with selectors makes the comma very obvious imo.

Even though it does sound like a cool feature; I believe that we could benefit more of having an alias to @include for .scss syntax like proposed on issue #129 , with all the mixin functionality you can easily make something like:

@mixin size($size) {
  @if length($size) == 2 {
    @if "#{nth($size, 1)}" != "0" { width:nth($size, 1); }
    @if "#{nth($size, 2)}" != "0" { height:nth($size, 2); }
  } @else {
    width:nth($size, 1);
    height:nth($size, 1);
  }
}

Then:

+size(100px)

Which is shorter than width:height:etc

I really like this.

I think that using the "comma" syntax is better, due to it having a closer similarity due declaring multiple styles in CSS spec, it would make sense for variables too.

@kuroir the decision to not have a shorthand syntax in .scss files has been discussed enough. I understand the convenience, but it's not enough to warrant the parsing violations.

/sigh I won't hijack this thread. I'll send you a message.

An elaboration upon my original idea would be that the value of the properties could be used like variables, local to the block.

Lets see what that would look like:

With colons:

#foo, .bar
  width: height: 10px
  margin: width / 2

With commas:

#foo, .bar
  width, height: 10px
  margin: width / 2

Renders:

#foo, .bar {
  height: 10px;
  width: 10px;
  margin: 5px;
}

My issue with using commas for multiple assignment, is that meaning of the comma would change, or, just grow to include more. A comma is already used in selectors, and I believe it's already in use as a way to separate arguments to helpers/methods.

A colon doesn't require any change of meaning. Think of it as a JavaScript equals sign. It would read, "width equals height equals 10px".

A comma reads, "width and height equals 10px".

@chriseppstein Ah, didn't see your response before I posted. I didn't know this was already discussed somewhere else. If you have already come to some decision not to do this, then you could go ahead and close this.

@deleteme he was talking to me, regarding the + as @include alias on .scss syntax.

Just adding my +1 from issue #197 here, specifically for the comma-separated style (width, height: 10px;).

I particularly like @deleteme's last idea of referencing other local properties as variables. I need this all the time. I sometimes end up having to declare multiple variables in a selector, where non would be required if this feature were available, and it looks quite ugly.

@miracle2k I think that's the subject of a different issue.

Being able to access local properties would open a whole world of mixins, I'm really in favor of this.

Chris just pointed me to this, I'd like the comma dilem method, would be cool!

+1

+1

+1 I am for a comma separated list of properties as the colon separated list makes me think the following properties are nested in the previous ones. Comas follow the rules already defined for selectors.

+1

+1

Any update on this?

I prefer the comma-based syntax. Would be really cool to be able to do this:

margin: {
  left, right: 20px;
}

+1 on the comma based syntax

• 1

On 10 September 2013 16:16, Maxime Fabre [email protected] wrote:

+1 on the comma based syntax

— Reply to this email directly or view it on GitHubhttps://github.com/nex3/sass/issues/109#issuecomment-24168386 .

+1 from me as well, the typical case for me being:

height, line-height: 50px;

I find myself doing this all the time:

$var: value;
foo: $var;
bar: $value;

It's utterly annoying. So bump.

Bump, expressing support for a, b: c

+1. Also behind the comma-based syntax. Really missing this in my day-to-day development.

+1, why is this closed?

It ain't closed. But nobody is working on it either.

Haven't been in the Sass issue queue for a while; so much work going on! Sass ++.

I really like the comma syntax. top, left, bottom, right: 0; would be a big timesaver for me.

The colon syntax might be harder to implement because we have some properties that allow other properties inside them. You'd have to look ahead to decide whether transition: translateY... is going to be a multiple assignment or a simple css rule.