question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Apply the same value to multiple properties.

See original GitHub issue

In my Sass I often find myself applying the same value to multiple properties. Usually to properties such as margin, padding, width and height. I’ve solved the problem for myself by making a mixin:

@mixin property($value, $properties) {
  @each $property in $properties {
    #{$property}: $value
  }
}

.box {
  @include property(30px, padding-left padding-right);
  @include property(50%, width height);
}

Is this something that others would find helpful? Obviously not having the @include would be a nicer syntax, but is this the type of feature that would be better fit in the language itself? I would be more than happy to make a patch if this would be beneficial to others.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:13

github_iconTop GitHub Comments

1reaction
lolmauscommented, Dec 2, 2014

I disagree.

  1. Applying a value to multiple properties is a very-very common task.
  2. A helper mixin syntax is very bulky and does not make the code much cleaner.

In other words, this:

@include property(foo bar, 'baz');

is way worse than either of these:

foo, bar: 'baz';
foo: bar: 'baz';
0reactions
whaaaleycommented, Dec 3, 2014

@lolmaus I agree that this way is still bulky. I think a better solution would be what’s been mentioned in #366 which would make includes less bulky and more CSS looking. Then these small helper mixins wouldn’t be almost equally as painful to use and look at as it would be to just write it out by hand.

Then the proposed:

foo, bar: baz;

Could possibly be turned into a mixin with this syntax:

++qux: foo bar, baz;

Which isn’t much worse, but still much better than:

@include qux(foo bar, baz);
Read more comments on GitHub >

github_iconTop Results From Across the Web

Set the same value to multiple properties (CSS) - Stack Overflow
Note that in some cases, you can set multiple values for one attribute, but you can not have multiple attributes with one value...
Read more >
How to assign css same value to multiple properties by SASS
I have created a function/mixin that will convert for assigning css same value to multiple properties. I have compiling it by Webpack.
Read more >
How to add multiple values in a single CSS property | by Adir SL
Good News! You can layer multiple transform values, and yes, you can do it in one CSS property as well. Transform works a...
Read more >
How To Declare Values For Multiple Properties In a CSS Rule
Declaring multiple properties in a single rule allows you to apply many style instructions—such as size, color, and alignment—to an element all ...
Read more >
Quicker way of assigning the same value to multiple properties?
Is there a quicker way of assigning the same value to multiple properties in VB.NET? ... Then you could use a loop to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found