{"id":2051,"date":"2017-03-07T15:00:45","date_gmt":"2017-03-07T18:00:45","guid":{"rendered":"https:\/\/blog.umbler.com\/?p=2051"},"modified":"2018-12-10T12:17:45","modified_gmt":"2018-12-10T14:17:45","slug":"introducao-ao-postcss","status":"publish","type":"post","link":"https:\/\/blog.umbler.com\/br\/introducao-ao-postcss\/","title":{"rendered":"Introdu\u00e7\u00e3o ao PostCSS"},"content":{"rendered":"<p>A primeira pergunta que eu fa\u00e7o \u00e9 se voc\u00ea j\u00e1 come\u00e7ou a utilizar PostCSS em seus projetos? Se voc\u00ea respondeu &#8220;sim&#8221;, parab\u00e9ns!<\/p>\n<p>Caso ainda n\u00e3o tenha come\u00e7ado a utilizar, n\u00e3o se preocupe, vamos come\u00e7ar a aprender agora.\u00a0<a href=\"https:\/\/postcss.org\/\" target=\"_blank\" rel=\"nofollow noopener\">PostCSS<\/a>, como ele mesmo se define, \u00e9 uma ferramenta para transformar <strong>CSS<\/strong> com <strong>JavaScript<\/strong>.<\/p>\n<p>O PostCSS \u00e9 diferente dos pr\u00e9-processadores que existem no mercado como <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Sass<\/a>, <a href=\"https:\/\/lesscss.org\/\" target=\"_blank\" rel=\"nofollow noopener\">Less<\/a> e <a href=\"https:\/\/stylus-lang.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Stylus<\/a>, ele apenas transforma o CSS acess\u00edvel ao JavaScript e, assim, torna poss\u00edvel a escrita de novos plugins, ou deixa dispon\u00edvel a utiliza\u00e7\u00e3o\/contribui\u00e7\u00e3o de algum plugin j\u00e1 existente.<\/p>\n<div class=\"alert alert-warning\"><strong>Aten\u00e7\u00e3o:\u00a0<\/strong>Toda e qualquer informa\u00e7\u00e3o descrita nesse artigo tem como intuito auxiliar na orienta\u00e7\u00e3o do aprendizado da ferramenta, mas n\u00e3o \u00e9 a documenta\u00e7\u00e3o oficial, podendo conter falhas e\/ou estar desatualizado. Para evitar quaisquer problemas leia sempre a <a href=\"https:\/\/github.com\/postcss\/postcss\/tree\/master\/docs\" target=\"_blank\" rel=\"nofollow noopener\">documenta\u00e7\u00e3o oficial<\/a>.<\/div>\n<h2>Instala\u00e7\u00e3o<\/h2>\n<p>PostCSS \u00e9 um utilit\u00e1rio de linha de comando e pode ser instalado atrav\u00e9s do <code>npm<\/code>.<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">shell\r\n$ npm install -g postcss<\/code><\/pre>\n<h2>Configura\u00e7\u00e3o<\/h2>\n<p>O PostCSS pode ser utilizado de diversas maneiras, como por exemplo:<\/p>\n<ul>\n<li>Adicionado aos nossos Task Runners;<\/li>\n<li>Utilizando um Loader do <a href=\"https:\/\/webpack.github.io\/\" target=\"_blank\" rel=\"noopener\">webpack<\/a>;<\/li>\n<li>Atrav\u00e9s da linha de comando (CLI).<\/li>\n<\/ul>\n<p>N\u00e3o explicaremos como fazer a utiliza\u00e7\u00e3o atrav\u00e9s de cada uma das poss\u00edveis configura\u00e7\u00f5es, mas, caso seja necess\u00e1rio ou haja alguma d\u00favida, podemos sempre consultar a <a href=\"https:\/\/github.com\/postcss\/postcss#usage\" target=\"_blank\" rel=\"nofollow noopener\">documenta\u00e7\u00e3o de utiliza\u00e7\u00e3o<\/a> no site do PostCSS.<\/p>\n<h2>Conceitos<\/h2>\n<p>Depois da instala\u00e7\u00e3o e configura\u00e7\u00e3o, \u00e9 hora de codificar.\u00a0Vamos conhecer alguns dos conceitos utilizados no PostCSS e como aplic\u00e1-los:<\/p>\n<ol>\n<li>Vari\u00e1veis<\/li>\n<li>Importa\u00e7\u00f5es<\/li>\n<li>Seletores Aninhados<\/li>\n<\/ol>\n<h3>Vari\u00e1veis<\/h3>\n<p>Vari\u00e1veis servem para armazenar valores, que muitas vezes se repetem.\u00a0Com a utiliza\u00e7\u00e3o de vari\u00e1veis, podemos reaproveitar o c\u00f3digo e prover uma f\u00e1cil manuten\u00e7\u00e3o.\u00a0Voc\u00ea pode usar vari\u00e1veis dentro de valores, seletores e par\u00e2metros da regra.<\/p>\n<p>Exemplos:<br \/>\nDeclara\u00e7\u00e3o e utiliza\u00e7\u00e3o de uma vari\u00e1vel<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">$colorRed = red;\r\np {\r\n color: $colorRed;\r\n}<\/code><\/pre>\n<p>Interpola\u00e7\u00e3o de Vari\u00e1veis = Inje\u00e7\u00e3o de vari\u00e1veis em strings<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">$side: top;\r\n$offset: 15px;\r\n.button {\r\n padding-$(side): $offset;\r\n}<\/code><\/pre>\n<p>Vejamos uma poss\u00edvel solu\u00e7\u00e3o que faz a otimiza\u00e7\u00e3o do seguinte trecho de c\u00f3digo, utilizando o conhecimento sobre vari\u00e1veis.<\/p>\n<h4>Ruim<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">.nav {\r\n  width: calc(6 * 120px); \/* n\u00famero de .nav-item na tela * largura de cada item. *\/\r\n  border-bottom: 1px solid #056ef0;\r\n}\r\n.nav-item {\r\n  color: black;\r\n  padding-top: 30px; \/* o padding \u00e9 a largura do item \/ 4; *\/\r\n  transition: color .3s ease-in-out;\r\n}\r\n.nav-item:hover {\r\n color: #056ef0;\r\n}<\/code><\/pre>\n<h4>Bom<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">$navItem: 120px;\r\n$colorBlack: black;\r\n$colorBlue: #056ef0;\r\nnav {\r\n  width: calc(6 * $navItem);\r\n  border-bottom: 1px solid $colorBlue;\r\n}\r\n.nav-item {\r\n  color: $colorBlack;\r\n  padding-top: calc($navItem \/ 4);\r\n  transition: color .3s ease-in-out;\r\n}\r\n.nav-item:hover {\r\n color: $colorBlue;<\/code><\/pre>\n<h2>Plugins utilizados<\/h2>\n<p>Para este conceito, fizemos a utiliza\u00e7\u00e3o de um plugin conhecido como <a href=\"https:\/\/github.com\/postcss\/postcss-simple-vars\" target=\"_blank\" rel=\"nofollow noopener\">simple-vars<\/a>.<\/p>\n<h3>Importa\u00e7\u00f5es<\/h3>\n<p>As importa\u00e7\u00f5es s\u00e3o bastante utilizadas pois trazem diversos benef\u00edcios, como, por exemplo, o reaproveitamento de c\u00f3digo e estrutura\u00e7\u00e3o\/separa\u00e7\u00e3o dos arquivos de uma forma bastante flex\u00edvel.<br \/>\nCada equipe define as suas prefer\u00eancias e metodologias a serem utilizadas em seus projetos, sendo assim, manter os arquivos separados contribui para uma boa manuten\u00e7\u00e3o do c\u00f3digo.<br \/>\nAo utilizarmos o plugin <code>postcss-import<\/code> o PostCSS ir\u00e1 utilizar as regras do plugin ao utilizarmos o <code>@import <\/code>e n\u00e3o mais as regras nativas do CSS.<\/p>\n<h4>Exemplos<\/h4>\n<p>Declara\u00e7\u00e3o de vari\u00e1veis em um arquivo espec\u00edfico de vari\u00e1veis:<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">\/* variables.css *\/\r\n$colorPrimary = black;\r\n$colorSecundary = #056ef0;<\/code><\/pre>\n<p>Utiliza\u00e7\u00e3o do <code>@import<\/code> e respectivamente das vari\u00e1veis<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">\/* main.css *\/\r\n@import 'variables'\r\nbody {\r\n  background-color $colorSecundary;\r\n}\r\nh1 {\r\n  color $colorPrimary;\r\n}\r\n.button {\r\n  border-radius 5px;\r\n}<\/code><\/pre>\n<p>\u00c9 poss\u00edvel fazer a importa\u00e7\u00e3o utilizando o conceito de m\u00f3dulos do NodeJS com o nosso plugin. Podemos navegar pelos diret\u00f3rios do projeto, e at\u00e9 mesmo no <code>node_modules<\/code> para importarmos um arquivo de estilos.<br \/>\nVejamos uma poss\u00edvel solu\u00e7\u00e3o que faz a separa\u00e7\u00e3o dos arquivos de uma forma interessante, utilizando o conhecimento sobre imports.<\/p>\n<h4>Ruim<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">\/* main.css *\/\r\n$colorPrimary = black;\r\n$colorSecundary = #056ef0;\r\n$colorTertiary = #fff;\r\n$buttonWidth = 100px;\r\n$buttonPadding = 15px;\r\nbody {\r\n  background-color $colorSecundary;\r\n}\r\nh1 {\r\n  color $colorPrimary;\r\n}\r\n.button {\r\n  border-radius 5px;\r\n  width: $buttonWidth;\r\n  padding: $buttonPadding;\r\n  color: $colorPrimary;\r\n  border: 2px solid $colorPrimary;\r\n}\r\n.button:hover {\r\n  border: 2px solid $colorTertiary;\r\n}<\/code><\/pre>\n<h4>Bom<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">\/* variables.css *\/\r\n$colorPrimary = black;\r\n$colorSecundary = #056ef0;\r\n$colorTertiary = #fff;\r\n$buttonWidth = 100px;\r\n$buttonPadding = 15px;\r\n\/* buttons.css *\/\r\n@import 'variables'\r\n.button {\r\n  border-radius 5px;\r\n  width: $buttonWidth;\r\n  padding: $buttonPadding;\r\n  color: $colorPrimary;\r\n  border: 2px solid $colorPrimary;\r\n}\r\n.button:hover {\r\n  border: 2px solid $colorTertiary;\r\n}\r\n\/* main.css *\/\r\n@import 'buttons'\r\nbody {\r\n  background-color $colorSecundary;\r\n}\r\nh1 {\r\n  color $colorPrimary;\r\n}<\/code><\/pre>\n<h4>Plugins utilizados<\/h4>\n<p>Para este conceito, fizemos a utiliza\u00e7\u00e3o de um plugin conhecido como <a href=\"https:\/\/github.com\/postcss\/postcss-import\" target=\"_blank\" rel=\"nofollow noopener\">postcss-import<\/a>.<\/p>\n<h3>Seletores Aninhados<\/h3>\n<p>Este conceito apresenta como aninhar uma regra de estilo dentro de outra, com o seletor da regra filho relativo ao seletor da regra pai. Al\u00e9m de aumentar a modularidade e a capacidade de manuten\u00e7\u00e3o dos nossos arquivos de estilo, esse recurso permite que estilos relacionados sejam agregados em uma \u00fanica estrutura dentro de um arquivo CSS, melhorando a legibilidade e a facilidade de manuten\u00e7\u00e3o.<\/p>\n<p>A W3C tem uma especifica\u00e7\u00e3o pr\u00f3pria de como utilizar o nested <a href=\"https:\/\/tabatkins.github.io\/specs\/css-nesting\/\" target=\"_blank\" rel=\"nofollow noopener\">CSS Nesting Module Level 3<\/a>, e h\u00e1 um plugin conhecido <a href=\"https:\/\/github.com\/jonathantneal\/postcss-nesting\" target=\"_blank\" rel=\"noopener\">CSS Nesting<\/a>para PostCSS que segue essa especifica\u00e7\u00e3o. Todavia utilizaremos o plugin conhecido como PostCSS Nested que segue as regras do Sass.<\/p>\n<h4>Exemplos<\/h4>\n<p>Declara\u00e7\u00e3o de um bloco com seletores aninhados:<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">.nav {\r\n  background: black;\r\n  &amp;__list {\r\n    background: red;\r\n    &amp;__item {\r\n      background: white;\r\n    }\r\n  }\r\n  &amp;__link {\r\n    background: blue;\r\n    &amp;--active {\r\n      background: green;\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<p>Ap\u00f3s processado, teremos o seguinte resultado:<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">.nav {\r\n  background: black;\r\n}\r\n.nav__list {\r\n  background: red;\r\n}\r\n.nav__list__item {\r\n  background: white;\r\n}\r\n.nav__link {\r\n  background: blue;\r\n}\r\n.nav__link--active {\r\n  background: green;\r\n}<\/code><\/pre>\n<p>\u00c9 poss\u00edvel fazer diversas combina\u00e7\u00f5es capazes de trazerem diversos benef\u00edcio, mas \u00e9 claro que h\u00e1 alguns problemas. Vejamos uma poss\u00edvel solu\u00e7\u00e3o para otimizar o c\u00f3digo aninhado abaixo, utilizando o conhecimento sobre Nested.<\/p>\n<h4>Ruim<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">.form {\r\n  background-color: #ddd;\r\n}\r\n.form .button, .form .input {\r\n  width: 50%;\r\n  display: block;\r\n}\r\n.button {\r\n  background-color: #06f;\r\n  color: #fff;\r\n  font-size: 1.000em;\r\n  font-weight: 500;\r\n}\r\n.input {\r\n  border: 1px solid #fff;\r\n  color: #000;\r\n  font-weight: 500;\r\n}\r\n.button:hover, .input:hover {\r\n  opacity: .75;\r\n}<\/code><\/pre>\n<h4>Bom<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">.form {\r\n  background-color: #ddd;\r\n  &amp; .button,\r\n  &amp; .input {\r\n    width: 50%;\r\n    display: block;\r\n  }\r\n}\r\n.button {\r\n  background-color: #06f;\r\n  color: #fff;\r\n  font-size: 1.000em;\r\n  font-weight: 500;\r\n  &amp;:hover {\r\n    opacity: .75;\r\n  }\r\n}\r\n.input {\r\n  border: 1px solid #fff;\r\n  color: #000;\r\n  font-weight: 500;\r\n  &amp;:hover {\r\n    opacity: .75;\r\n  }\r\n}<\/code><\/pre>\n<h4>Plugins utilizados<\/h4>\n<p>Para este conceito, fizemos a utiliza\u00e7\u00e3o de um plugin conhecido como <a href=\"https:\/\/github.com\/postcss\/postcss-nested\" target=\"_blank\" rel=\"noopener\">PostCSS Nested<\/a>.<\/p>\n<h2>Conclus\u00e3o<\/h2>\n<p>Essa foi uma breve introdu\u00e7\u00e3o sobre alguns conceitos b\u00e1sicos e importantes do PostCSS.<\/p>\n<p>Sabendo que o PostCSS &#8220;apenas&#8221; torna o CSS acess\u00edvel em JavaScript, podemos compreender que ele nos tr\u00e1s inumeras possibilidades em forma de plugins e ferramentas personalizadas. Em resumo, o PostCSS \u00e9 mais bem definido como um ecossistema de plugins e ferramentas.<\/p>\n<p>Como sabemos, n\u00e3o existe bala de prata, e cada equipe pode ter uma ou diversas solu\u00e7\u00f5es para seus problemas, mas n\u00e3o deve ser responsabilidade de uma \u00fanica ferramenta resolver todos os problemas.<\/p>\n<p>Ent\u00e3o, agora que chegamos at\u00e9 aqui, ser\u00e1 que voc\u00ea se sentiria confiante para utilizar ele em seus projetos?<br \/>\nEspero que sim!<\/p>\n<p>Se voc\u00ea ficou curioso e quer aprender mais, o primeiro passo recomendado \u00e9 seguir a <a href=\"https:\/\/github.com\/postcss\/postcss\/tree\/master\/docs\" target=\"_blank\" rel=\"noopener\">documenta\u00e7\u00e3o oficial<\/a> e come\u00e7ar a codificar \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A primeira pergunta que eu fa\u00e7o \u00e9 se voc\u00ea j\u00e1 come\u00e7ou a utilizar PostCSS em seus projetos? Se voc\u00ea respondeu &#8220;sim&#8221;, parab\u00e9ns! Caso ainda n\u00e3o tenha come\u00e7ado a utilizar, n\u00e3o se preocupe, vamos come\u00e7ar a aprender agora.\u00a0PostCSS, como ele mesmo se define, \u00e9 uma ferramenta para transformar CSS com JavaScript. O PostCSS \u00e9 diferente dos [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":5385,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[249],"class_list":["post-2051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","tag-postcss"],"_links":{"self":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/2051"}],"collection":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/comments?post=2051"}],"version-history":[{"count":0,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/2051\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media\/5385"}],"wp:attachment":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media?parent=2051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/categories?post=2051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/tags?post=2051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}