Sass Store Selector in Variable

Sass store selector in variable

You need to convert it to a string if you want to use it as a variable:

$icon: '[class*="icon"]';

#{$icon} {
    // stuff
}

Use name of selector as value for a variable in SASS

Try something like this:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) {
  ##{$bgurl} {
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center;
& h2, & p {margin-left: $iconmargin;}
  }
}

@include left-icon(#de4c3f,eleven,10px);

Basically, you can add variables anywhere using Sass's interpolation syntax

Can I use variables for selectors?

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

If used in a string for example in a url:

background: url('/ui/all/fonts/#{$filename}.woff')

Set a variable in Sass depending on the selector

I think a mixin is the answer. (As I wrote, variables won’t work.)

@mixin content($color-default, $color-main) {
  background: $color-default;
  color: $color-main;
}

body.class-1 {
  @include content(#444, #555);
}

body.class-2 {
  @include content(#666, #777);
}

That SCSS compiles to this CSS:

body.class-1 {
  background: #444444;
  color: #555555; }

body.class-2 {
  background: #666666;
  color: #777777; }

If you wanted to group the color values together in your SCSS file, you could use variables in conjunction with the mixin:

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  @include content($color-1, $color-2);
}

body.class-2 {
  @include content($color-3, $color-4);
}

Is there a way to save the parent selector ($) as a variable in SCSS?

You can't create selectors like that with variables, you need to use interpolation:

#{$mainNavigation} {}

Either way, you can't style a parent based on focusing the children using this method, you may want to look at focus-within

Pass pseudo element selector as variable in SASS

Yes, you can. You must write the name of variable inside the braces:

#{$yourVariable}

@mixin pseudoawesome($fa-symbol, $pseudo) {
  &#{$pseudo} {
    content: $fa-symbol;
    font-family: FontAwesome;
  }
}

EDIT: you can find this information here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_

Just search with chrome: "If you want to use"

The section didn't have the anchor tags.

---

Related Topics