Блог

Главная - Вопросы по программированию - Что означает «

Что означает «

#css #twitter-bootstrap #sass #less

Вопрос:

В следующем CSS, взятом из начальной загрузки Twitter, что означает символ амперсанда ( amp; )?

 .clearfix {
  *zoom: 1;
  amp;:before,
  amp;:after {
    display: table;
    content: "";
  }
  amp;:after {
    clear: both;
  }
}

Комментарии:

1. В Sass и менее amp; это ссылка на родительский селектор.

Ответ №1:

Это МЕНЬШЕ, а не CSS.

Этот синтаксис позволяет вставлять модификаторы селектора.

 .clearfix { 
  amp;:before {
    content: '';
  }
}

Будет скомпилирован для:

 .clearfix:before {
  content: '';
}

С amp; помощью вложенных селекторов выполняется компиляция .clearfix:before .
Без этого они компилируются .clearfix :before .

Комментарии:

1. @KatieK: Bootstrap написан на МЕНЬШЕМ, а не на ДЕРЗКОМ

Ответ №2:

Вложенный amp; выбирает родительский элемент как в SASS, так и в LESS. Это не только для псевдоэлементов, его можно использовать с любым типом селектора.

напр.

 h1 {
    amp;.class {

    }
}

эквивалентно:

 h1.class {

}

Ответ №3:

Вот пример SCSS/LESS:

 a {
   text-decoration: underline; 
   @include padding(15px);
   display: inline-block;

     amp; img  {
                padding-left: 7px;
               margin-top: -4px;
             }
 }

и его эквивалент в CSS:

 a {
  text-decoration: underline; 
  @include padding(15px);
  display: inline-block;
}

a img  {
     padding-left: 7px;
     margin-top: -4px;
   }

Ответ №4:

«amp;» является полезной функцией как в Sass, так и в меньшем количестве препроцессоров. Для гнездования он используется. Это экономит время, когда мы сравниваем с CSS.

Метки: