К постам Опубликовано: 2016-11-13

В CSS постпроцессорами для начинающих: советы и ресурсы

В CSS предварительной обработки представляет собой концепцию, что большинство веб-разработчиков уже узнали или прочитали. Мы рассмотрели CSS для предварительной обработки очень подробно, чтобы помочь разработчикам получить до скорости на этой распространенной технологии. А что насчет пост-процессорами? Эти относительно новые инструменты схожи в том смысле, что они влияют на рабочий процесс веб-разработки, однако они работают на другой стороне развитие CSS (“пост” развития).

Приступая к работе с Сасс:

Установка и основы В этой статье мы собираемся обсудить CSS-Препроцессор sass или называют Синтаксически удивительные стили. Если...подробнее В этом посте, я хочу представить основы пост-обработки, как это работает, почему вы бы использовать его, и несколько библиотек/инструментов, которые можно использовать в игре CSS с помощью пост-обработки. Пост и предварительной обработки Предварительной обработки революция произошла, когда Сасс/меньше попали на сцену.

Эти инструменты позволяют разработчикам использовать переменные, циклы, функции и миксины в УСБ. Это почти делает основное развитие CSS похож на язык программирования с расширенной функциональностью. Пост-обработка происходит после того, как вы уже произвели обычный CSS, и хотят расширить его за счет автоматизации. Это может включать продление селекторов класса, или авто-добавление префиксов для некоторых свойств CSS. Вообще говоря, предварительная обработка имеет свои собственные таблицы стилей языков, таких как sass и less, которые преобразуют в чистый CSS. Пост-обработка занимает, что базовые CSS и применяет автоматизации/повторение.

Если вы хотите знать больше о разнице между предварительной и пост-обработки, взгляните на этот пост. Контактный IMAGE: средний.comHere цитата из поста, который также является источником рисунке выше. Я думаю, Автор Стефан Баумгартнер суммы разности блестяще. “[Препроцессоров] взять язык, который компилируется в CSS. И [Постпроцессоров] выровнять и отреставрировать CSS, чтобы иметь лучший возможный результат для сегодняшних браузеров”. Таким образом, оба эти кажутся как инструмент автоматизации, просто работают по-разному.

Например, решена общая боль пост-обработки-автоматическое добавление префиксов для новых свойств CSS3. Но это также может быть сделано в sass с расширениями. Так что действительно есть разница? Вот еще одна замечательная цитата из того же поста: “Пре-процессоров” и “постпроцессоры” не существует. Они являются процессоры для css, заботясь о создании и оптимизация. Хотя это может быть правдой в теоретическом смысле, сообщество веб-разработки создает разрыв между этими инструментами. По этой причине, я бы очень рекомендую для frontend-разработчиков, по крайней мере, читать про пост-процессорами, и знать, что они могут сделать.

Соответствовать после обработки в рабочий процесс Практически все ссылки, что postcss в качестве окончательного ресурс для пост-обработки. Однако команда, что postcss открыто признался в Twitter, чтобы изменять их название, потому что словоблудие не больше смысла. Postcss-это уже не просто предварительно CSS или после УСБ инструмент. Это действительно может работать в обоих направлениях!

Это еще больше объясняет цитата из ранее заявив, что все средствами CSS сводятся к одному — обработка. Контактный itPostCSS использует JavaScript плагины для автоматизации рабочего процесса в CSS, и вы можете даже написать свои собственные JS в плагин для расширения библиотеки, что postcss. Если вы хотите начать с postcss проверить это интро туториал на битье журнал. Если вы уже используете Сасс и понять, тогда вы будете быстро после УСБ. 10 удивительных плагинов postcss, чтобы сделать вас мастером в CSS

10 удивительных плагинов postcss, чтобы сделать вас мастером в CSS Истинное предназначение этого инструмента в последнее время стал новым крутым парнем в кругах веб-разработки, и это вполне заслуженно, так как он предлагает...подробнее Чтобы построить свой собственный до/после УСБ обработки рабочего процесса, начните с составления списка ваших болевых точек, таких как: авто-префиксов в CSS градиенты авто-организация для css-правила добавление полифиллы для определенных свойств производя измерения изображения для фоновых изображений Обратите внимание, что все эти вещи могут быть как пре - и пост-обработки. Важно понимать, что CSS пре/постобработка-это быстро сливаются, чтобы стать одним в то же самое.

Вместо разрушения Ваших целей на разных этапах обработки, то лучше перечислить их в качестве целей, а затем перейти на поиск нужных инструментов. Лучший пост-обработку инструменты Я старался избегать упоминания расширения в этом разделе, Как Сасс & разработку так много вещей, чтобы выбрать из. Честно говоря, вы могли бы получить только те библиотеки, но я тоже хочу предложить некоторые альтернативы для более конкретных решений. Пожалуйста Если вы уже работаете с Node.js тогда, пожалуйста, кажется очевидный выбор. Она имеет много характерных для css-обработки функций, таких как импорт файлов, переменные/функции, автоматической минификации, и поддерживают переход на новые элементы, такие как Свгс. Сайт пин-код он также имеет интерактивный площадка для тех, кто хочет попробовать библиотеку онлайн без скачивания копировать локально. Благослови Я помню, когда Internet Explorer