В 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, который будет показывать реальную структуру файлов и.т.д
Можно было бы быть более конкретным, например сказав, что в проектах обычно лежат минимифицированные файлы кода, вносить изменения в которые крайне затруднительно. Для этого создаются карты кода, занимающие каким-то образом очень мало места. И при необходимости внесения изменений в код, текстовым редактором или рабочей средой открываются именно карты кода, внутри которых каким то образом сохранена структура кода до его минимификации. В картах вносятся изменения, сохраняются и они, например, автоматически вносятся в оригинал файла. Или не вносятся автоматически, а просто дают возможность браузеру показывать в режиме разработчика структуру. Или еще как то.
Статья на хабре очень водянистая. А после данного ответа остается загадка, а что же такое карты.. это файлы? Через них идет работа? Как они связаны с рабочим уменьшенным файлом? Они всегда лежат рядом с рабочими файлами?
Если будет ответ по моему шаблону, это будет полный, замечательный ответ.
