Nesting tag name into class style in SCSS

Question

I want to nest selector for <a> tag inside a class .class-name, in order to apply those styles only for elements who has both the <a> tag and the class .class-name using SCSS. What I want to do can be performed the following way:

.class-name {
  font-size: 40px;
 }
 
 a.class-name {
   color: #ff6666;
 }

<div class="class-name">Hello</div>
<a class="class-name" href="#">World!</a>

I've tried two different ways in SCSS using & parent selector

# successfully transpiled but no change
.class-name {
  font-size: 40px;
  &a {
    color: #ff6666;
  }
}

# Got an error trying to transpile
.class-name {
  font-size: 40px;
  a& {
    color: #ff6666;
  }
}

I do not want to nest the other way around (.class-name inside a).

or a duplicate of https://stackoverflow.com/questions/17268051/sass-combining-parent-using-ampersand-with-base-element — Sascha, Dec 06 '17 at 12:11

score 12 · Answer 1 · answered Dec 06 '17 at 11:35

I think you have to use Sass' @-root.

.class-name {
  font-size: 40px;

  @at-root {
    a#{&} {
      color: #ff6666;
    }
  }
}

Personally I don't find it very pleasing to read, and more important difficult fo find via ctrl+f in a file (if you don't have sourcemaps)

Edit: will break if the whole block is nested into something else...

Niklesh Raut · Accepted Answer · 2017-12-06T12:14:28.967

9

Its not nesting, its two different elements, try as below to achieve as you want

.class-name {
  font-size: 40px;
}

a.class-name {
  color: #ff6666;
}

Or in nested way

a{
   &.class-name{
    color: #ff6666;
   }
}

It not possible to target parent class from child

Get more details from this Answer

edited Dec 06 '17 at 12:14

answered Dec 06 '17 at 11:26

Niklesh Raut

34,013
16
75
109

That's the solution I already gave in my question, but it's not the scss way. If a was a class name, it was possible to nest using & parent selector – Canta Dec 06 '17 at 11:28
About your last edition nesting elements... I do not want to nest the other way around (.class-name inside a). Also, where in your solution would I place font-size? – Canta Dec 06 '17 at 11:30
This is `scss` to generate `css` as you mentioned – Niklesh Raut Dec 06 '17 at 11:30
`a.class-name` is specific to add `color: #ff6666;` but `font-size: 40px;` is already added by `.class-name` before this. – Niklesh Raut Dec 06 '17 at 11:32
@ArthurCantarela : Can you try and then let us know ? – Niklesh Raut Dec 06 '17 at 11:33
I've undo my down vote, but it's not the solution I'm looking for. To make it clear, i know how to perform this, I'm looking for an specific scss way to improve my skills and create possible better practices – Canta Dec 06 '17 at 11:40
@ArthurCantarela : check some discussion [here](http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand) – Niklesh Raut Dec 06 '17 at 11:42
@ArthurCantarela : [its not possible as here already mention](https://stackoverflow.com/questions/9293891/sass-css-target-parent-class-from-child) – Niklesh Raut Dec 06 '17 at 11:45
Edit your answer with those references so I can accept it – Canta Dec 06 '17 at 12:10
@ArthurCantarela : I have edited my ans. BTW Which method you applied ? – Niklesh Raut Dec 06 '17 at 12:15
it works but the `a.class-name` is not `SCSS` style. – AmerllicA Dec 06 '17 at 15:47

Nesting tag name into class style in SCSS

2 Answers2