Apply the same value to multiple properties.
See original GitHub issueIn 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:
- Created 9 years ago
- Comments:13
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I disagree.
In other words, this:
is way worse than either of these:
@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:
Could possibly be turned into a mixin with this syntax:
Which isn’t much worse, but still much better than: