Миксины css: Миксины | SASS: Основы работы

9 библиотек Mixin для дизайнеров Sass должны получить

Если вы используете Sass в своем рабочем процессе разработки, вы знаете важность миксинов. Когда вы видите некоторые вещи, которые написаны многократно и утомительно в CSS, вот где миксины могут помочь вам предотвратить повторную работу. Миксин содержит CSS-объявления, которые вы можете использовать на своем сайте.

Разработчики разработали множество миксов, которые помогут вам при работе с Sass в вашей разработке. Большинство охватывает вещи, которые часто повторяются в CSS. От адаптации к нескольким браузерам до создания кнопок, анимации и эффектов перехода — найдите это и многое другое в следующих 11 библиотеках миксинов, которые вы должны получить для разработки Sass.

Рекомендуемое чтение: простое и понятное руководство по пониманию Sass

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

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

Проверьте полная документация использовать каждый доступный миксин и функцию.
2. Sass CSS3 Mixins
Sass CSS3 Mixins предоставляют миксины, которые работают в разных браузерах. Здесь вы найдете множество лучших миксов, таких как фон, рамка, рамка, столбец, шрифт, трансформация, переход и анимация. Этого достаточно для ваших потребностей в укладке. Чтобы использовать, импортируйте css3-mixins.scss и вызовите mixin в своем классе CSS.

Скачать этот миксин Вот,
3. CssOwl
CssOwl предоставляет полезные миксины для установки положения элемента (относительного или абсолютного) и добавления содержимого с помощью псевдо-селектора (: after и: before). Это также помогает, когда вы хотите создать элементы спрайта: миксин дает гибкость, чтобы установить положение изображения в вашем спрайте. В дополнение к Sass доступна библиотека смешивания CssOwl для LESS и Stylus.
4. Точка останова Sass
точка остановки поможет вам сделать медиа-запросы через Sass простым способом. С помощью точки останова вы можете создавать переменные и присваивать им значения, которые определяют минимальную или максимальную ширину медиазапросов. Поскольку созданная вами переменная имеет осмысленное имя, вы можете легко вызывать ее для использования в Sass.
5. Scut
подлый человек содержит набор многократно используемых миксинов, заполнителей, функций и переменных Sass, которые помогут вам легко реализовать общие шаблоны кода стиля. Он предоставляет передовой код для создания веб-материалов, таких как макеты страниц и стилизация шрифтов. Вы можете сократить количество повторений при написании кода, используя его чаще. Таким образом, помогая вам стать более организованным в процессе.

6. Шафран
С ШафранВы можете с легкостью добавлять анимацию и переходы CSS3. Доступны десятки анимаций и переходов, в том числе постепенное увеличение / уменьшение, скольжение / уменьшение, увеличение / уменьшение, а также различные эффекты, такие как встряхивание, колебание, отскок и другие. Чтобы использовать Saffron, просто включите миксин в объявление Sass и назовите имя эффекта внутри вашего класса CSS. Вы можете получить Saffron, установив его с помощью Bower или Gem, или просто загрузить его вручную с Github.
7. Настройки типа
TypeSettings тип инструментария для Sass. Он установит размер шрифта в модульном масштабе, используя em (вместо rems или пикселей), вертикальный ритм и заголовки с учетом соотношения. Вы также можете установить этот с Bower, скачать релизили клонировать репо. Для более подробной информации, проверьте его страница,

Читайте также: взгляд в CSS-единицы — пиксели, EM, процент

8. Sass Line
Sass Line это миксин Sass, который поможет вам улучшить типографику. Он использует rems unit в вашем шрифте, чтобы вы могли работать с ним пропорционально от базовой сетки. Sass Line использует точный вертикальный ритм основанный на базовой сетке, и позволяет вам установить модульную шкалу для каждой из ваших точек останова, чтобы получить хорошие пропорции во всех аспектах вашего сайта.

Идти Вот чтобы получить более подробную информацию о том, как его использовать.
9. Andy.scss
Andy.scss это коллекция полезных миксов Sass, созданная, чтобы помочь вам с легкостью разработать внешний вид веб-сайта и сохранить его легким. Доступны десятки миксов Sass, от фонов до анимации. Почти все часто используемые свойства CSS описаны здесь. Получите это в Github,
Еще сообщения на Sass:

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

нативных миксинов CSS. Мои мысли о Native против Sass | by Adam Johnston

Мои мысли о миксинах Native и Sass

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

Я широко использую Sass, и рискну предположить, что многие разработчики, пишущие CSS сегодня, используют препроцессор или постпроцессор, а это означает, что подавляющее большинство авторов CSS уже давно имеют доступ к миксинам.

На случай, если вы не знакомы с ними, что такое примесь? Вот небольшая цитата с веб-сайта Sass:

Миксин позволяет создавать группы объявлений CSS, которые вы хотите повторно использовать на своем сайте.

Отлично! Я могу определить группу стилей в своем CSS, дать им имя и использовать их повторно. Красиво и модульно. Так что наличие этого изначально в CSS, без необходимости шага компиляции, имеет для меня целый смысл.

Натив против Sass

Обратите внимание:

• Если вы хотите попробовать нативную версию CSS для себя, вам понадобится Chrome 51+ и включите флаг — chrome://flags/#enable-experimental-web- особенности платформы.
• В настоящее время это черновик редактора, который можно прочитать здесь, имейте в виду, что детали могут измениться.
• Я буду использовать Sass для примеров сравнения, но все это возможно и с Less или Stylus, хотя синтаксис может отличаться.

  /* Собственный */  :root { 
  --my-mixin: { 
 background: #256dbd; 
 цвет: #f5f5f5; 
 }  
 }тело { 
  @apply --my-mixin;  
 }  ---   // Scss   @mixin my-mixin {  
 background: #256dbd; 
 цвет: #f5f5f5; 
  }  body { 
  @include my-mixin;  
 } 

Прежде всего, различия в синтаксисе. У меня лично нет предпочтений ни к тому, ни к другому. В нативном примере вам нужно ограничить примесь документом (используя :root) и применить примесь с помощью нового at-правила @apply. Sass заменит стили во время компиляции.

Еще одно различие между ними заключается в том, что миксины Sass принимают аргументы, а нативные — нет. Это не значит, что натив бесполезен без этой функции, но это заметное упущение и некоторые ограничения в использовании по сравнению с Sass. Было бы здорово, если бы нативные миксины могли воспользоваться преимуществами переназначения переменных CSS, но, похоже, это не так:

Некоторые причины, по которым я читал отсутствие аргументов, заключаются в том, что это сделает CSS сложным и более как язык программирования. Я не уверен, что это так уж плохо. Sass был моим шлюзом к пониманию некоторых концепций программирования и помог мне стать лучшим фронтенд-разработчиком в целом.

В заключение…

Что мне нравится в нативных миксинах CSS, так это то, что я могу создавать модульные и описательные стили, которые я могу повторно использовать во всем моем CSS без необходимости каких-либо шагов препроцессора и компиляции.

Тем не менее, без возможности передачи аргументов (в настоящее время) и почти несуществующей поддержки браузера, я не думаю, что это убедит разработчиков, работающих с препроцессором, остановиться, по крайней мере, пока.

Дополнительная литература и ссылки

Правило CSS @apply (собственные миксины CSS)

В моей предыдущей статье Дополнительные свойства (переменные) CSS я подробно описал пользовательские свойства (переменные) CSS и…

blog.gospodarets.com

Миксины CSS с @apply rule

Я в восторге от недавно добавленных функций CSS. Ранее мы обсуждали пользовательские свойства, теперь пришло время поговорить…

pawelgrzybek.com

CSS @apply Rule — Статус платформы Chrome

Правило CSS @apply позволяет авторам определять пользовательские свойства, которые содержат списки объявлений, а затем применять их… ваш проект. Если вы хотите просто просмотреть здесь, пожалуйста, но мы…

sass-lang. com

Я надеюсь, что вы нашли эту статью полезной. Если вы считаете, что я пропустил что-то важное, хочу что-то добавить или оставить отзыв в целом, пожалуйста, не стесняйтесь обращаться ко мне через Twitter или оставить ответ здесь. Спасибо! — Адам Джонстон

Mixins Better for Performance — CSS Wizardry — Оптимизация веб-производительности

Написано Гарри Робертсом на CSS Wizardry .

1. Эксперимент
2. Делаем вещи более реалистичными
3. Миксины лучше для производительности

Один из самых частых вопросов, которые мне задают, когда речь заходит о препроцессорах:

1. Изменяет исходный порядок, что всегда рискованно в CSS.
2. Он создает неудобные группы в вашем коде, помещая несвязанные селекторы вместе.
3. Это очень жадно, @extend сканирует каждый экземпляр данного субъекта, а не только тот, который вы на самом деле хотели..
4. Он действительно может выйти из контроль, правда быстрый.

@extend

Вчера я проводил семинар с клиентом, и меня спросили о примесях и примесях. @extend ситуация, на которую я дал свой обычный ответ Не использовать @extend , всегда! , а в ответ меня спросили А не лучше ли @extend для производительность? Он генерирует меньше кода.

Это правда, что @extend (при правильном использовании) будет производить меньше CSS, но мой ответ был твердым нет: миксины лучше для производительности .

Я довольно уверенно ответил на вопрос, несмотря на то, что никогда на самом деле сделал какие-либо тесты. Причиной моей уверенности послужила довольно солидная теория что у меня было:

Поскольку gzip поддерживает повторение, мы, несомненно, получим лучшую степень сжатия. если мы используем одни и те же объявления, скажем, 1000 раз, чем если бы мы 1000 уникальных классов дважды.

Видите ли, когда люди говорят о производительности примесей, они обычно думаю о размере файла в файловой системе. Но поскольку у нас включен gzip (вы у включен gzip, верно?), мы должны думать о размере файла

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

Я вернулся в свой гостиничный номер и решил проверить свою теорию.

Эксперимент

Вот что я сделал.

1. Я создал два файла CSS.

2. В каждом файле было 1000 уникальных классов, сгенерированных с помощью Sass:

    @для $i от 1 до 1000 {
     .#{уникальный-id()}-#{$i} {
       ...
     }
   }
    

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

    @для $i от 1 до 1000 {
     .#{уникальный-id()}-#{$i} {
       содержание: "ibf#{&}jaslbw";
     }
   }
    

4. Затем я выбрал три простых объявления, которые останутся одинаковыми во всех 1000 классов:

    цвет: красный;
   вес шрифта: полужирный;
   высота строки: 2;
    

5. В одном файле я поделился этими объявлениями через миксин:

    @mixin foo {
     красный цвет;
     вес шрифта: полужирный;
     высота строки: 2;
   }
   . #{уникальный-id()}-#{$i} {
     @include foo;
     содержание: "ibf#{&}jaslbw";
   }
    

6. А в другом я поделился ими через @extend :

    %foo {
     красный цвет;
     вес шрифта: полужирный;
     высота строки: 2;
   }
   .#{уникальный-id()}-#{$i} {
     @продлить %foo;
     содержание: "ibf#{&}jaslbw";
   }
    

Все эти тестовые файлы (и не только) доступны на Гитхаб.

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

Их размеры не должны вас ничуть удивлять:

• mixin.css пришел по адресу 108K .
• extend.css пришел по адресу 72K .
• Это дает разницу в размере файла 36K .
• Использование примесей было на 150% больше, чем использование @extend .

Это именно то, что я ожидал — примеси делают производят больше CSS, чем @extend делает.

Но! Мы должны помнить, что нам не следует беспокоиться о размере файла на файловая система — нас интересуют только размеры наших gzip-файлов.

Я минифицировал и заархивировал два файла и получил ожидаемые результаты:

• mixin.css пришел по адресу 12K .
• extend.css пришел по адресу 18K .
• Это дает разницу в размере файла 6K .
• Использование примесей было на 33,333% меньше, чем при использовании @extend .

Удивительно! Мы перешли от миксинов, которые в 1,5 раза больше, чем при использовании @extend , к миксины В 0,3 раза меньше , чем при использовании @extend . Моя теория кажется правильной!

Делаем вещи более реалистичными

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

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

Я взял скомпилированный CSS из существующего проекта, сделал две его копии и я @import ввел каждый из моих тестовых файлов в каждый проект соответственно. Это значило что мои тестовые файлы были окружены примерно 1794 строками реального, реалистичного CSS.

Я скомпилировал каждый новый тестовый файл, и вот результаты:

• mixin.css пришел по адресу 16K .
• extend.css пришел по адресу 22K .
• Это дает разницу в размере файла 6K .
• Использование примесей было на 27% меньше, чем использование @добавить .

Абсолютные цифры кажутся тривиальными (всего 6К), но в относительных величинах мы можем добейтесь 27% экономии по проводу, просто решив использовать миксины для повторения объявления снова и снова, в отличие от использования @extend для повторения нескольких селекторы.