В чем разница между амперсандом и двойным амперсандом в Less? - PullRequest
Новая
       7

В чем разница между амперсандом и двойным амперсандом в Less?

0 голосов
/ 04 марта 2019

Я пытаюсь написать Меньше в контексте React.

Следующий код работает: 

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &:first-child { /* notice single ampersand */
        border-left: 2px solid #007aff;
    }
}

Этот код также работает: 

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
    border-left: 2px solid #007aff;
}

Однакоследующий код не работает: 

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &&:first-child { /* notice double ampersand */
        border-left: 2px solid #007aff;
    }
}

Я видел двойной амперсанд, используемый в других местах кодовой базы, поэтому && что-то делает.Может кто-нибудь объяснить мне разницу?

Ответы [ 3 ]

0 голосов
/ 04 марта 2019

&& избыточен базовому логическому оператору AND почти на всех популярных языках программирования, в то время как одиночный & используется специально в SASS для подключения селекторов CSS.

Подключение илиболее точный в случае использования SASS: сцепление селекторов очень отличается от объединения двух условных выражений в логическом смысле.

Подробнее: https://www.sitepoint.com/sass-basics-operators/ и https://javascript.info/logical-operators

0 голосов
/ 04 марта 2019

Это может быть для увеличения специфичности: .thing.thing выше, чем просто .thing

0 голосов
/ 04 марта 2019

Двойной амперсанд, который вы видели, может быть & + & или & ~ &, а не &&, поскольку, насколько мне известно, последний ничего не делает в Sass.

Использование & + & будетпозволит вам нацелить соседний брат того же селектора, например, этот SCSS: 

.btn {
  ...
  & + & {
    margin-left: 15px;
    background: firebrick;
  }
}

... скомпилирует в этот CSS: 

.btn {
  ...
}
.btn + .btn {
  margin-left: 15px;
  background: firebrick;
}

Подробнее о двойном амперсанде здесь, в Team Treehouse .

...