V
V
Vladislav Valabuev2017-08-26 14:00:51
css
Vladislav Valabuev, 2017-08-26 14:00:51

Primary parent via ampersand (SASS). How?

Good time!
I am learning how to use BEM correctly in my projects.
There is a button with an icon and text.
I want to indent the left of the text if there is an icon, i.e. like .btn__ico + .btn__text:

// example 1
.btn
  &__ico
    position: absolute
  &__ico + &__text
    margin-left: 29px

// example 2
.btn
  &__ico
    position: absolute
    + .btn__text
      margin-left: 29px

Which of these methods is correct?
And is there a third?
Tried like this:
.btn
  &__ico
    position: absolute
    & + &__text
      margin-left: 29px

But it doesn't work as expected.
It is desirable with arguments, so that I understand why this is so.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Alexey Sklyarov, 2017-08-26
@0example

Personally, I always use the second option.
Your attempt doesn't work because & refers to the parent, so when you try to write &__text in a &__ico block, you write something like this: &__ico__text.

D
Dmitry, 2017-09-04
@dimondevs

You can try like this...

.btn
  $b: &
  &__ico
    position: absolute
    + #{$b}__text
      margin-left: 29px

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question