Общие плагины PostCSS и описание синтаксиса

предисловие

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

Что такое постCSS

PostCSS — это инструмент для преобразования кода CSS с помощью инструментов и плагинов JavaScript.

• PostCSS — это система плагинов для обработки CSS;
• CSS можно преобразовывать и обрабатывать различными способами;
• Переложите нудную и сложную работу на программу;
• Освободите разработчиков.

Как используется PostCSS

• PostCSS обычно не используется отдельно, а интегрируется с существующими инструментами сборки;
• PostCSS можно интегрировать с основными инструментами сборки, такими как Webpack, Grunt и Gulp;
• После завершения интеграции выберите плагин PostCSS, соответствующий функциональным требованиям, и настройте его.

Общие плагины PostCSS

Существует множество плагинов для PostCSS, и вы можете выбрать разные плагины в соответствии с реальной сценой.

Какие плагины существуют для PostCSS?

• Адрес запроса плагина:www.postcss.parts/
• Список часто используемых столбцов плагина:GitHub.com/post CSS/сломанный…

Список плагинов PostCSS

• Автопрефиксер: автозаполнение личного префикса браузера
• precss: Предварительная обработка CSS (интегрируйте функции Sass, LESS или Stylus, синтаксис в основном такой же, как у Sass)
• postcss-import: интегрировать несколько файлов CSS через @import
• css-mqpacker: объединяет идентичные правила медиа-запросов CSS в одно.
• cssnano: сжатие файлов CSS.
• postcss-color-rgba-fallback: Создайте схему понижения для цветов RGBA (добавить альтернативные цвета)
• postcss-opacity: Обеспечьте решение для понижения непрозрачности (добавьте свойства фильтра в браузер IE)
• node-pixrem: заставить IE8 поддерживать модуль rem
• postcss-pseudoelements: псевдоэлемент::Перевести в:(IE8 не поддерживает::)

Введение в синтаксис PostCSS

Далее в основном представлен синтаксис плагина precss, который включает в себя плагин Autoprefixer и плагин postcss-preset-env.

Синтаксис плагина автопрефиксера

Автопрефиксер: автозаполнение личного префикса браузера, вы можете обратиться к префиксу браузераCanIUse.

/*源代码*/
p{     
    transform: scale(1);     
    animation: ani 1s linear; 
}

/*编译后代码*/
p{     
    -webkit-transform:scale(1);             
    transform:scale(1);     
    -webkit-animation:ani 1s linear;             
    animation:ani 1s linear; 
} 

Знакомство с синтаксисом плагина Postcss-preset-env

postcss-preset-env: поддерживает современный синтаксис css.

• Сбросить все атрибуты ярлыка

  /*源代码*/
  a{     
      all: initial; 
  }
  

  /*编译后代码*/
  a{     
      -webkit-animation:none 0s ease 0s 1 normal none running;     
      -webkit-backface-visibility:visible;     
      -o-border-image:none;    
      ……
  }
  

• Унифицируйте стили каждого состояния якоря

  /*源代码*/ 
  a:any-link{     
      background-color: yellow;
  } 
  

  /*编译后代码*/
  a:-webkit-any-link{     
      background-color:#ff0;
  } 
  a:-moz-any-link{     
      background-color:#ff0;
  } 
  a:link,a:visited{     
      background-color:#ff0; 
  }
  

• пользовательский медиа-запрос

  /*源代码*/ 
  @custom-media --narrow-window (max-width: 30em); 
  @media (--narrow-window) { } 
  

  /*编译后代码*/
  @media (max-width: 30em) { }
  

• пользовательская константа

  /*源代码*/ 
  :root{     
      --some-length: 32px; 
  } 
  p{     
      height: var(--some-length);     
      width: var(--some-length); 
  }
  

  /*编译后代码*/
  :root{     
      --some-length:32px;
  } 
  p{     
      height:32px;     
      height:var(--some-length);     
      width:32px;     
      width:var(--some-length); 
  } 
  

• пользовательский селектор

  /*源代码*/ 
  @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading {     
      margin-block: 0; 
  }
  

  /*编译后代码*/
  h1,h2,h3,h4,h5,h6{     
      margin-top:0;     
      margin-bottom:0;
  }
  

• Поддержка вложенных правил

  /*源代码*/
  article{
     &p{
         color: #333;
     }
  }
  

  /*编译后代码*/
  article p {
      color: #333;
  }
  

• сокращение от переполнения

  /*源代码*/
  html{     
      overflow: hidden auto;
  } 
  

  /*编译后代码*/
  html{     
      overflow-x:hidden;     
      overflow-y:auto;     
      overflow:hidden auto;
  } 
  

Введение в синтаксис плагина precss

precssПоддерживает синтаксис, подобный sass, и поддерживает синтаксис будущего, включая компонент postcss-preset-env.

• можно использовать вложение&символ, скопируйте родительский селектор в дочерний селектор

  /*源代码*/
  article {     
      margin-top: 20px;     
      &p{         
          color: #333;     
      }
  } 
  

  /*编译后代码*/
  article{     
      margin-top:20px;
  } 
  article p{         
      color:#333;
  } 
  

• использовать$объявление переменной

  /*源代码*/
  $text_color: #232323; 
  $border_comn: 1px solid red; 
  body{     
      color: $text_color;     
      border: $border_comn;
  }
  

  /*编译后代码*/
  body{     
      color:#232323;     
      border:1px solid red;
  }
  

• использовать@ifа также@elseконтролировать цикл

  /*源代码*/
  $column_layout: 2; 
  .column{     
      @if $column_layout == 2{         
          width: 50%;         
          float: left;     
      }@else{         
          width: 100%;    
      }
  } 
  

  /*编译后代码*/
  .column{         
      width:50%;         
      float:left;
  }
  

• использовать@forа также@eachездить на велосипеде
  • @for цикл: используйте переменную счетчика, чтобы установить период цикла

    /*源代码*/
    @for $i from 1 to 5{     
        p:nth-of-type($i){         
            margin-left: calc(100% / $i);     
        } 
    } 
    

    /*编译后代码*/
    p:first-of-type{         
        margin-left:100%;     
    } 
    p:nth-of-type(2){         
        margin-left:50%;
    } 
    p:nth-of-type(3){         
        margin-left:33.33333%;     
    } 
    p:nth-of-type(4){         
        margin-left:25%;
    } 
    p:nth-of-type(5){         
        margin-left:20%;
    } 
    

    /*源代码*/
    @for $count from 1 to 5 by 2 {     
        .col-$count {         
            width: $count%;     
        }
    }  
    

    /*编译后代码*/
    .col-1{         
        width:1%;     
    } 
    .col-3{         
        width:3%;     
    } 
    .col-5{         
        width:5%;
    } 
    

  • @каждый цикл: период цикла представляет собой список столбцов, а не число

    /*源代码*/
    $social: twitter,facebook,youtube; 
    @each $icon in ($social){     
        .icon-$(icon){         
            background: url('img/$(icon).png');     
        }
    } 
    

    /*编译后代码*/
    .icon-twitter{         
        background:url(img/twitter.png);    
    } 
    .icon-facebook{         
        background:url(img/facebook.png);     
    } 
    .icon-youtube{         
        background:url(img/youtube.png);     
    } 
    

• mixin создает функцию шаблона css
  • пройти через@mixin mixin_name($arg1, $arg2) {...}объявить
  • использовать@include mixin_name($arg1, $arg2)звонить

    /*源代码*/
    @mixin heading-text($color: #242424, $font-size: 4em) {   
        color: $color;   
        font-size: $font-size; 
    } 
    h1, h2, h3 {   
        @include heading-text; 
    } 
    .some-heading-component>:first-child{   
        @include heading-text(#111111, 6em);
    }
    

    /*编译后代码*/
    h1,h2,h3{   
        color:#242424;   
        font-size:4em;
    } 
    .some-heading-component>:first-child{   
        color:#111;   
        font-size:6em;
    }
    

• Создайте шаблон css через @extend

  /*源代码*/
  %thick-border {   
      border: thick dotted red; 
  } 
  .modal {   
      @extend %thick-border;   
      color: red;
  }
  

  /*编译后代码*/
  .modal{
      border:thick dotted red;color:red;
  } 
  

• @at-root генерирует код для root

  /*源代码*/
  .parent {     
      font-size: 20px;   
      @at-root{     
          .child {       
              font-size: 25px;     
          }   
      }
  }
  

  /*编译后代码*/
  .child{       
      font-size:25px;     
  } 
  .parent{     
      font-size:20px;
  } 
  

• Прямая ссылка на значение свойства css, например, @color

  /*源代码*/
  .Test {   
      margin-left: 20px;   
      margin-right: @margin-left;   
      color: red;   
      background: @color url('test.png');   
      line-height: 1.5;   
      font-size: @(line-height)em;
  }
  

  /*编译后代码*/
  .Test{   
      margin-left:20px;   
      margin-right:20px;   
      color:red;   
      background:red url(test.png);   
      line-height:1.5;   
      font-size:1.5em; 
  } 
  

Пользовательские компоненты PostCSS

Самый простой состав плагина PostCSS выглядит следующим образом:

var postcss = require('postcss'); 
module.exports = postcss.plugin('PLUGIN_NAME', function (opts) {     
        opts = opts || {};     
        // 传⼊入配置相关的代码     
        return function (root, result) {         
            // 转化CSS 的功能代码     
        }; 
}); 

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

• root (css): это также весь сегмент кода CSS, включая несколько правил;
• правило: содержит фрагмент кода в рамках класса CSS;
• узлы: относится к нескольким частям decl в середине {} в правиле;
• decl: однострочный CSS, то есть часть со свойствами и значениями;
• значение свойства: пара ключ-значение