Главная → Программирование → by

Введение в PostCSS

Развитие CSS, Как и все языки, это повторяющийся процесс.С каждым крупного релиза, мы получаем новые возможности и синтаксис, которые помогают нам писать наши стили.CSS Уровень 3 введены функции, которые позволяют нам разрабатывать взаимодействия, которые ранее были возможны только с JavaScript.С каждым новым днем, инструменты появляются, чтобы сделать дизайн более простым и гибким .

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

Как, спросите вы?JavaScript .

JavaScript имеет возможность трансформировать нашу стили гораздо быстрее, чем другие процессоры.Использование задача-Runner инструменты, как Глоток и Грунта, мы можем преобразования стилей через сборки process, Так же, как Sass и менее компиляции.Библиотеки и структуры, как реагировать и AngularJS позволяют писать CSS непосредственно в нашем JavaScript, открывая двери для преобразования JavaScript наших стилей .

История Из PostCSS

Разработано Андрей Sitnik2, Создатель Autoprefixer, PostCSS был запущен в качестве способа использовать JavaScript для обработки CSS.PostCSS по себе является просто API, который, при использовании его огромной экосистемы плагинов, предлагает мощные способности.Для обеспечения полезную отладки, карты источника генерируются и абстрактного синтаксического дерева (AST) существует, чтобы помочь нам понять, где и как код преобразуется .

Потому PostCSS использует базу Node.js, способности к языку и инструменты могут быть легко изменены и настроены по мере необходимости.Другие инструменты, такие как Sass и менее ограничить возможности системы, чтобы методы, доступные, когда компилятор был написан .

Благодаря использованию в API, PostCSS позволяет создавать пользовательские плагины и инструменты для любого featuresони могут понадобиться.Эта модульная конструкция платформы делает инструмент нейтральный, который, в свою очередь сосредотачивается особенности от требований проекта.PostCSS является независимым от языка формат и позволяет стиле синтаксиса различных препроцессорами, как Sass и менее, при необходимости .

Преимущества мышления Modularly

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

Поддержание библиотеку Sass или менееsnippetsможет быть непосильной задачей, и может оставить проект раздутой.Многие проекты имеют неиспользованные Mixins и функции, включенные в “на всякий случай” кода.PostCSS позволяет легко устанавливаются, подключите и играть модули, что делает процесс более гибким развития для уникальных потребностей проекта .

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

Примером этого власти является плагин PostCSS FontPath43,С Sass, мы могли бы включать в себя подмешать в наших файлах, что позволяет для пользовательских веб-шрифтов;Таким образом, мы создали @font-faceтеги .

@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$font-filename}.eot');
    src: url('#{$font-filename}.woff') format('woff'),
    url('#{$font-filename}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}
@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Использование PostCSS FontPath43Плагин в нашем проекте, мы больше не должны включать Sass Mixins как один выше.Мы можем написать следующий код в нашем CSS, и PostCSS превратит его через Грунт или Глоток, в код, мы должны .

@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
  font-weight: normal;
  font-style: normal;
}

На момент написания этого поста, более 100 плагинов сообщества в настоящее время доступны, которые позволяют для таких вещей, как синтаксических будущее CSS, ярлыки, инструментов и расширений языка.Это выходит за рамки “прохладной инструмент,” и в настоящее время насчитывает команду WordPress, Google и щебетать среди его пользовательской базы .

Добавление PostCSS на Ваш Workflow

Потому PostCSS написано в JavaScript, мы можем использовать бегунов задач, как Gulp5и Grunt6для преобразования CSS в наших проектах.Учебник ниже показывает, как включить PostCSS в рабочем процессе либо через Глоток или Грунта.Использование одного инструмента над другой не является решающим и это просто вопрос личных предпочтений или, что лучше для проекта .

Примечание: Полная версия обоих версий глоток и ворчание инструмента является доступно на GitHub7,Не стесняйтесь использовать его в качестве стартера шаблона и расширить на нем при необходимости .

Настройка PostCSS С Gulp

Если вы не знакомы с Глоток, я рекомендую чтения “Построение с Gulp8“По Каллум Macrae ввстать и работает с инструментом .

Для установки модуля PostCSS в вашем проекте, выполните следующую команду в терминале: npm i gulp-postcss -D.

В ~ 34 вашего проекта |, Мы должны требовать нашего установленный модуль PostCSS, а затем использовать его в рамках задачи.Будьте уверены, чтобы обновить пути к файлам развития и каталог, в котором преобразуется выход будет .

var postcss = require('gulp-postcss');

gulp.task('styles', function () {
    return gulp.src('path/to/dev/style.css')
        .pipe(postcss([]))
        .pipe(gulp.dest(path/to/prod))
});

Чтобы запустить задачу, тип gulp stylesв командной строке .

Настройка PostCSS С Grunt

Примечание: Если вы не знакомы с Грантом, я рекомендую чтения “Get Up и Running With Grunt9“Майк Cunsolo, чтобы освоиться с инструментом .

Для установки модуля PostCSS в вашем проекте, выполните следующую команду в терминале: npm i grunt-postcss -D.

После того, как плагин установлен на вашей системе, включите его в Gruntfile и создать задачу, как показано ниже.Будьте уверены, чтобы обновить cwdи destзначения, чтобы отразить структуру вашего приложения .

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    styles: {
      options: {
        processors: []
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'dev/',
          src: ['**/*.css'],
          dest: 'prod/'
        }]
      }
    }
  });

  // Load post-css.
  grunt.loadNpmTasks('grunt-postcss');

};

Чтобы запустить задачу, тип grunt stylesв командной строке .

Установка Plugins

Использование PostCSS по себе не совсем мощный;его сила заключается в плагинах.Вы, возможно, заметили, что в реализации глоток и выше Грунт там были пустые массивы в декларациях задач.Эти массивы, где мы можем импортировать сообщества развитых PostCSS плагины, особенности, которые мы хотим включить в наш инструмент .

Список утвержденных PostCSS плагинов можно найти на PostCSS ‘GitHub page10и, как и все пакеты НПМ, плагины могут быть установлены с помощью командной строки.Многие плагины могут быть использованы только в качестве расширений PostCSS и агностик, чтобы бегун задач, которую вы используете.Для этого примера, мы будем устанавливать PostCSS Focus11Плагин, который будет добавить :focusв каждом государстве наведении .

Со всеми плагинами в следующих примерах, мы должны использовать командную строку и НПМ устанавливать пакеты в наших проектах .

PostCSS Плагин Пример Установка Link

npm i postcss-focus -D

Плагины могут быть переданы в метод непосредственно;Однако, ради чистоты, мы можем построить массив и передать его в качестве аргумента.В массиве, мы можем включать необходимые requireзаявления, которые возвращают плагины и что затем вызывается сразу.Если вы хотели бы узнать больше об этой концепции, посмотрите через “Функции как первоклассная граждан в JavaScript12“Райан Christiani .

require('postcss-focus')()

Модифицированный код Грунт, с нашей вновь созданной processorArrayмассивы, ниже: 

var processorArray = [
    require('postcss-plugin')()
];

// Snipped for brevity
styles: {
      options: {
        processors: processorArray
      },
      dist: {
        src: 'path/to/dev/style.css',
        dest: 'path/to/prod/style.css'
      }
    }

А вот модифицированный код Глоток: 

var processorArray = [
    require('postcss-plugin')()
];

gulp.task('styles', function () {
    gulp.src('path/to/dev/style.css')
        .pipe(postcss(processorArray))
        .pipe(gulp.dest('path/to/prod'))
});

Plugins

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

“Подождите!CSS, файл? “Да, файл CSS.Потому PostCSS превращает нашу CSS, мы не должны использовать специализированную —просто традиционный CSS.Если вы знакомы с препроцессоров, то он может чувствовать себя неестественно оставить .sass.scss.stylили .lessфайлы за и вернуться к .css,Но, на самом деле, это не превращение —это преобразование .

Для обработки наши стили с нашими вновь установленных плагинов PostCSS, мы можем запустить наши бегунов задач с grunt stylesи gulp styles, соответственно.Наш файл развитие CSS будут обрабатываться через плагин PostCSS и плагины условии, а затем будет выводиться на нашем указанный каталог продукции .

Ниже приведены несколько плагинов, примечания, которые могут быть полезны, как вы начать с PostCSS.Включены инструкции по установке и использованию плагина .

Autoprefixer

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

Вот, как установить этот плагин с помощью командной строки: 

npm i autoprefixer-core -D

Когда мы добавляем плагин для нашего массива, мы можем предоставить объект, который содержит массив браузера объема, что проект нужно будет поддерживать.Список опций, которые могут быть предоставлены находится в Счетом Browserslist на GitHub14.

Давайте добавим плагин Autoprefixer нашим процессоров: 

var processorsArray = [
  // Snipped for brevity
  require('autoprefixer-core')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20']  })
];

Соответствующие префиксы будет выводиться на любых свойств CSS и ценностей в наших стилей, которые в них нуждаются, в соответствии с объектом, предоставленной .

Вот CSS развитие: 

.item {
  display: flex;
  flex-flow: row wrap;
}

А вот трансформируется выход: 

.item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

Использование Будущие синтаксисы С CSSNext

CSS4 скоро будет на нас, и с ним приходитфункции, такие как родной variables15, пользовательских СМИ queries16, пользовательских selectors17и новый псевдо-links18,В то время как они еще не …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.