Sass variable prefix

Question

Is it possible to create something like this with SASS?

$prefix: *

*-var1: 150px
*-var2: 150px
*-var3: 350px

This could be very useful for organising a stylesheet

did you try it, you could always use an array $prefix('150', etc) — Millard, Mar 12 '14 at 12:33
Also: http://stackoverflow.com/questions/12970413/sass-each-variable-interpolation — cimmanon, Mar 12 '14 at 12:50

score 2 · Answer 1 · answered Mar 12 '14 at 12:38

2

Absolutely...

SASS:

$variableName: "myStyle";

#{$variableName}_r1{ border: 1px solid red; }

Produces CSS:

myStyle_r1 {
  border: 1px solid red;
}

The key is the interpolation - #{$variableName} - which basically dumps the variableName out as it was written...

answered Mar 12 '14 at 12:38

Pat Dobson

3,249
2
19
32

1

It looks like he want to define variables depending on another variable, not properties. – LeBen Mar 12 '14 at 12:42

score 1 · Accepted Answer · answered Mar 12 '14 at 13:17

In Sass 3.3 there are a couple of new features that will likely solve your need for doing this, and greatly help with organizing stylesheets

You now have maps, which allow you to essentially create objects containing variables.

You can do the following:

$colors: (
  header: #b06,
  text: #334,
  footer: #666777,
)

.header {
  background-color: map-get($colors, header)
}

As well as the new ability to prefix css selectors like so:

// Sass:
.button {
  &-primary { background: orange; }
  &-secondary { background: blue; }
}

// Output:
.button-primary { background: orange; }
.button-secondary { background: blue; }

Further reading: http://thesassway.com/news/sass-3-3-released

Sass variable prefix

2 Answers2