css map что это

В modal.css прописана строчка в конце файла

В консоле пишет:

Что это означает и где взять ее? В скрипте такого файла нет.

1 ответ 1

Это значит, что данный CSS код был сгенерирован с помощью какого-то CSS-препроцессора с использованием Карты Кода(Source Map). Если в этом файле тебе всё понятно(или разбираться в нём не нужно) и работает он корректно, то эту строку можно смело удалить.

Прочитать про карты кода можно тут http://habrahabr.ru/post/148098/

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript css или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Sass — это отличный и очень популярный CSS-препроцессор. Если вы не знакомы с ним, взгляните на эти уроки.

Ассоциативные массивы (Maps) являются чрезвычайно недооцененной особенностью Sass. Они помогают автоматизировать создание элементов пользовательского интерфейса и улучшить архитектуру всего приложения. Вам пригодятся ассоциативные массивы, когда понадобится набор классов-модификаторов для элементов пользовательского интерфейса.

Модификатор — это класс, модифицирующий стиль блока в зависимости от контекста. Блок — это универсальный родительский класс, который может использоваться сам по себе.

Я обобщила несколько фрагментов кода и шаблоны, которые я часто использую. Хотя, конечно, надо уметь применять эту технику и к другим элементам интерфейса.

Синтаксис ассоциативных массивов Sass

Получить значение по ключу можно так:

Настройка

У вас, вероятно, есть Sass-файл, в котором вы объявляете все переменные (что-то вроде _variables.scss или _base.scss). Если нет, вы должны его создать. Здесь же мы опишем и наши мэпы.

После нескольких попыток и ошибок я поняла, что лучший способ настроить ассоциативные массивы — сначала объявить переменные, а затем создать Map с этими переменными. Такой способ позволяет использовать простые переменные в коде (например, $color-robin) вместо получения значения с помощью map-get (например, map-get($ui-colors, primary)).

Я обычно объявляю 4 мэпа:

  • Цвета темы (цвета фирменного стиля)
  • Цвета элементов интерфейса (цвета для ошибок, всплывающих подсказок, кнопок)
  • Оттенки серого (цвета для текста, теней, фонов)
  • Фирменные цвета (используется, например, для иконок социальных сетей)

Такой же шаблон будет применяться для типографики. Вы можете сначала объявить отдельные переменные для шрифтов, а затем положить их в массив.

Какие переменные стоит использовать в ассоциативном массиве? Переменные, которые вы будете использовать в миксинах для создания классов модификаторов. За исключением очевидного — выбора цвета — ассоциативные массивы можно использовать для типографики, иконок или изображений. В следующем примере я покажу, как создать различные классы для кнопок, используя карту цветов UI Colors.

Кнопки

Я использую директиву each, которая проходится циклом по массиву $ui-colors и создает класс-модификатор для базового класса .button. Мы получаем модификаторы для стилизации кнопок как ‘error’ или ‘success’.

Такой подход избавляет от необходимости дублирования кода. А также, если вы захотите изменить какой-то цвет в цветовой схеме или добавить новые цвета — все элементы интерфейса обновятся автоматически.

Похожий шаблон можно использовать для флагов, ссылок и других элементов, использующих модификаторы.

Иконки социальных сетей

Я использовала тот же шаблон, что и в прошлом примере, но на этот раз добавила иконки социальных сетей. Код ниже создает класс блока social-media-icon и модификаторы для различных иконок.

Заключение

Может показаться, что в показанных примерах слишком много кода для простых элементов интерфейса, но когда ваша кодовая база разрастается и добавляются все новые и новые элементы, такой подход позволяет сэкономить время и сохранить единообразие интерфейса.

Ассоциативные массивы хорошо подходят для организации цветов, типографики, иконок или изображений.

Использование ассоциативных массивов помогает сохранять единый дизайн в определенном контексте (например, все сообщения об ошибках красные).

Одним блоком кода можно создать множество классов-модификаторов, что избавляет от необходимости дублировать код.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2018

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Вот представь, собрал ты 10 файлов в 1 бандл, потом минифицировал, а как дебажить эту лапшу?

На помощь приходит sourcemaps, который будет показывать реальную структуру файлов и.т.д

Можно было бы быть более конкретным, например сказав, что в проектах обычно лежат минимифицированные файлы кода, вносить изменения в которые крайне затруднительно. Для этого создаются карты кода, занимающие каким-то образом очень мало места. И при необходимости внесения изменений в код, текстовым редактором или рабочей средой открываются именно карты кода, внутри которых каким то образом сохранена структура кода до его минимификации. В картах вносятся изменения, сохраняются и они, например, автоматически вносятся в оригинал файла. Или не вносятся автоматически, а просто дают возможность браузеру показывать в режиме разработчика структуру. Или еще как то.

Статья на хабре очень водянистая. А после данного ответа остается загадка, а что же такое карты.. это файлы? Через них идет работа? Как они связаны с рабочим уменьшенным файлом? Они всегда лежат рядом с рабочими файлами?

Если будет ответ по моему шаблону, это будет полный, замечательный ответ.

Оцените статью