Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SASS/SCSS: Refer to property without using an intermediate variable

Tags:

sass

Is it possible to refer to a property previously defined in a selector without introducing an intermediate variable?

I'd like to say something like:

.foo {
  padding: 15px;
  width: 300px - $padding;
}

I know that $padding syntactically looks for a defined variable, I only use it in the above example to illustrate what I want to achieve in functionality.

The above example would be equivalent to this:

.foo {
  $padding: 15px;
  padding: $padding;
  width: 300px - $padding * 2;
}
like image 309
Zach Dennis Avatar asked Jan 19 '12 19:01

Zach Dennis


Video Answer


2 Answers

No, you can't, and it would be great.

I haven't tested, but as far as I know the only css pre-processor that can do that is stylus. Look at the variable section in its documentation, where it says Property Lookup. It works that way:

.foo {
  padding: 15px;
  width: 300px - @padding * 2;
}

But no, in Sass you can't, as far as I'm concerned.

like image 43
Waiting for Dev... Avatar answered Sep 20 '22 16:09

Waiting for Dev...


If its an option to use an other preprocessor then scss, I really recommend using Stylus. There is a feature called Property lookup which is exactly what you want.

like image 85
Stephan Hoyer Avatar answered Sep 20 '22 16:09

Stephan Hoyer