Продвинутое использование карт Sass |
я использовал Сасс уже давно, и я пришел к одному выводу… Когда я начал разрабатывать интерфейсный CSS-фреймворк, у меня было много переменных, и мне пришлось хорошенько подумать. «как от них избавиться» но при этом сохранить гибкость для конечный пользователь.
Вы когда-нибудь видели файл переменных Bootstrap v4? Если вы этого не сделали, продолжайте, взгляните… Они хотят сделать все настолько гибким, чтобы пользователи могли переопределять переменные и применять изменения при компиляции.
Это хорошая вещь, но она делает файл переменных таким беспорядочным, неорганизованным; одним словом — затопило. Если ваш файл чем-то похож на этот, самое меньшее, что вы можете сделать, если планируете придерживаться переменных, это разделить их на разные файлы, чтобы каждый файл содержал переменные, которые вместо этого используются для определенного элемента/компонента. Не смог описать это короче, извините… Надеюсь понятно! 🤔
Я покажу вам путь и, надеюсь, научу вас паре вещей, касающихся этого…
Переменные против карт
Переменные по-прежнему должны использоваться в каждом проекте Sass, но не так часто… Я хочу прояснить это. Думайте о переменных в Sass как о чем-то, что должно быть определено как база или же корень. Общие значения, которые можно использовать или изменять на картах.
В качестве простейшего примера я возьму тему «определение размеров заголовков, полей и веса». Как вы знаете, в HTML доступно 6 заголовков…
Пример с переменными
Пример с использованием переменных Sass…
Глядя на этот пример, вы можете сказать, что я не уточнил, для чего будет использоваться переменная. Понятно, что мы могли бы предположить, но это плохо… Если бы я был более конкретным, то это привело бы к очень длинным именам переменных, таким как:
$h1-font-size
$heading-font-weight
$heading-margin-bottom
Лично я не предпочитаю использовать числа в именах переменных, например h1но определение числа как слова еще хуже…
Как теперь мы можем построить наши элементы заголовков с этими переменными?
— Ответить на это легко, мы не можем! Не автоматически с петлями… Вручную, да, как я покажу ниже. В противном случае мы могли бы продублировать эти значения в другую переменную, которая будет либо списком, либо картой, а затем выполнить итерацию по ней и создать ее. Но кому нужно дублирование? Никто!
Пример с картами
Пример использования карт Sass…
Что мы можем сказать из этого примера?
- Я не использовал множественное число по двум причинам. Это звучит более естественно, когда вы хотите получить любое из этих значений, а вложенные свойства карты следуют за именами свойств css.
- Выглядит естественно и чисто
- Я объединил все «переменные» в одну «карту», которая теперь принадлежит одному элементу/компоненту.
- Я очень подробно рассказал о ключах, и теперь мы точно знаем, для чего будет использоваться значение.
Как мы теперь можем построить наши элементы заголовка с этой картой?
— Ну, давайте я вам покажу… Это очень просто, но немного запутанно.
Динамически создавайте теги заголовков HTML от 1 до 6…
Подожди, подожди… Подожди, черт возьми!
— Я знаю, что динамическое построение выглядит некрасиво, но мы можем упростить его еще больше, добавив некоторые новые функции.
Потерпите меня, я обещаю, что это будет стоить вашего времени!
Функции для упрощения использования Карт
Я уже написал несколько функций для одного из моих проектов с открытым исходным кодом. Я оставлю ссылку на него в конце, потому что будет очень полезно поучиться, если вам понравится такой подход.
Итак, я поделюсь с вами этими функциями и покажу, как они значительно улучшают ваш Sass-код… Функции будут опубликованы в виде изображений, но я также свяжу каждый заголовок с оригинальной функцией, которую я написал, чтобы вы могли добавьте его в свои текущие или будущие проекты.
я хочу поблагодарить Хьюго Жиродель для некоторых функциональных идей и вдохновения! ✌️
Получить
Функция Sass — поиск любого значения, содержащегося во вложенных картах, с использованием записи через точку в качестве ключевого аргумента.
Функция выше — моя магическая функция. меня вдохновило Платформа Laravel. Хотя вместо того, чтобы называть функцию config()я решил назвать его get()потому что выглядит лучше и короче! 😂
Как видите, моя функция уже зависит от три другие функции что я тоже написал…
Строка взрывается
Функция Sass — разделить строку по разделителю
Глубокая проверка карты
Функция Sass — проверьте, имеет ли вложенная карта значение по ключам
Глубокая карта Получить
Функция Sass — получить значение из вложенной карты по ключам
Каждый заглавие из этих функций связаны с оригинальным исходным кодом… Не стесняйтесь взглянуть получше, если хотите. Поставьте мне 🌟 и, возможно, подпишитесь, пока вы на GitHub? 🙏
Ладно, пора посмотреть get() функция в действии. Я воспользуюсь тем же примером, что и выше, и немного улучшу карту, а затем объясню вам, чего мы добились в итоге.
Пример Sass — упрощенное использование Карт
Я мог бы назвать $dfr-confg карты по-другому, может быть, просто $config, но я не сделал, по причине. Поскольку get() функция уже по умолчанию $dfr-config в качестве второго аргумента. Чтобы передать второй аргумент с нашим другим именем $map, пример выглядел бы немного больше, чем предполагалось. Но вы можете скопировать/вставить/загрузить функцию и изменить значение по умолчанию, чтобы оно соответствовало вашему собственному, пользовательскому $map переменная.
Разве это уже не радикально улучшилось!?
Переопределение настроек карты по умолчанию
Я даже предпочитаю разбивать конфигурацию карты на несколько разных файлов…
- Заголовок
- Цвет
- Контейнер
- Точка останова
- Шрифт
- Расстояние
Но тогда вы можете спросить…
Как вы это используете
get()функция для доступа ко всем свойствам на многих разных картах?
— Я не создаю несколько карт, а только одну, и каждый раз продлеваю ее…
Оставлю пару ссылок с этой ситуацией, где можно глянуть, как именно я ее использую.
Благодаря этим примерам вы уже можете сказать, насколько мощными могут быть карты Sass с некоторыми «базовыми/корневыми» переменными и функциями!
Я бы не стал вас больше беспокоить… ✌️
Очевидно, что есть что рассказать, и я надеюсь, что вы сможете извлечь уроки из всех приведенных мной примеров.
После того, как я разработал это, я не могу вернуться к простому беспорядку переменных.
Проект с открытым исходным кодом, над которым я работаю, называется отличается и вы можете взглянуть на это в моем репозитории GitHub. Это все еще продолжается, и я пытаюсь получить больше мотивации, но мне трудно найти ее…
Большое спасибо за чтение. Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать меня. буду признателен за продолжение Середина, Твиттер и/или Гитхаб.
