<title></title> <link rel="stylesheet" href="css/styles.css"></link> </head> "> <title></title> <link rel="stylesheet" href="css/styles.css"></link> </head> "> <title></title> <link rel="stylesheet" href="css/styles.css"></link> </head> " />

Используя спрайты Compass, созданный CSS использует все имена классов, а также общий

Скажем, у меня есть такой HTML-код:

<!DOCTYPE HTML>
  
  <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="css/styles.css"></link>
  </head>
  <body>
      This is a test
      Exclusive
      Featured
  </body>
</html>  

и у меня есть SASS (SCSS), как это:

@import "compass/utilities"; 
@import "ribbons/*.png";

@include all-ribbons-sprites(true);  

.ribbons-sprite {
   display: inline-block;
   text-indent: -9999px;
}

выводимый CSS:

.ribbons-sprite, .ribbons-exclusive, .ribbons-featured {
  background: url('../images/ribbons-scfb85024fb.png') no-repeat;
}

.ribbons-exclusive {
  background-position: 0 -38px;
  height: 59px;
  width: 59px;
}

.ribbons-featured {
  background-position: 0 0;
  height: 38px;
  width: 70px;
}

.ribbons-sprite, .ribbons-exclusive, .ribbons-featured {
  display: inline-block;
  text-indent: -9999px;
}

Почему последний список селекторов включает все классы, а не только «.ribbons-sprite»? Я могу видеть, было ли у меня больше предметов в спрайте, которое получилось бы излишне раздутым. Это похоже на случай, когда я использую генератор спрайтов. Если я удалю эту строку, строки inline block и text indent находятся под разделяемым именем класса. Вот что я ожидал в качестве вывода CSS:

.ribbons-sprite {
  background: url('../images/ribbons-scfb85024fb.png') no-repeat;
  display: inline-block;
  text-indent: -9999px;
}

.ribbons-exclusive {
  background-position: 0 -38px;
  height: 59px;
  width: 59px;
}

.ribbons-featured {
  background-position: 0 0;
  height: 38px;
  width: 70px;
}
0
nl ja de
Не могли бы вы обновить его, что внутри этого «@include all-ribbons-sprites»
добавлено автор Chandrakant, источник
Если бы я мог догадаться, я бы сказал, что это, вероятно, старый код, прежде чем они добавили расширения классов. Вы действительно не должны использовать класс .ribbons-sprite самостоятельно.
добавлено автор cimmanon, источник
Спасибо, cimmanon. Да, кажется, если я, например, изменяю .ribbons-sprite на .ribbons, то он просто использует этот класс для встроенных блоков и свойств text-indent. Но скорее, он будет использовать одно имя класса, чем селектор со всеми тремя, чтобы определить фоновое изображение.
добавлено автор webade, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)