Os Pré-Processadores CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 45 Min 48 Seg Tempo restante da oferta: 04 45 48 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Os Pré-Processadores CSS [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Os Pré-Processadores CSS Nesse artigo veremos o que são, pra que servem e quais os pré-processadores CSS mais utilizados. Aprenda a dar super poderes ao CSS [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/PRE-PROCESSADORES-CSS.jpg) Os pré-processadores é um tema que pode causar muita confusão. Principalmente para quem está começando e quer entender esse conceito. Porém, muitas empresas trabalham com algum pré-processador em seus projetos devido a alta capacidade de escalabilidade e organização. Hoje, entederemos de vez o que são os pré-processadores CSS. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## O que são os pré-processadores CSS? Os pré-processadores CSS são uma forma de estilizar elementos HTML, com uma sintaxe e possibilidades diferentes do que usar o CSS puro. Eles permitem, por exemplo, a criação de mixins, funções e sintaxe de aninhamento de estilizações. Os mixins são uma forma de criar um conjunto de estilizações padrões para reutiliza-las no decorrer da estilização, podendo ser facilmente adaptada para qualquer mudança caso necessário. Além do mais, os mixins nos permitem criar parâmetros customizáveis, criando assim, uma flexbilidade gigantesca na hora de estilizar elementos. As funções, diferente dos mixins, nos permite retornar algum valor como estilização. Elas são geralmente usadas para realizar transformações em valores ou para fornecer um valor dinâmico para uma propriedade CSS. Esses são apenas dois pontos positivos dos pré-processadores, esses dois tópicos entre outras funcionalidades disponíveis na hora de utilizar-los abordaremos ao longo do artigo. [ ![CSS - Sass](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/sass.svg) Curso CSS - Sass Conhecer o curso ](https://www.treinaweb.com.br/curso/css-sass-avancado) ## Principais pré-processadores Sabemos o que é, e algumas vantagens em relação ao CSS puro, porém, quantos pré-processadores existem? É dificil dizer um número exato devido ao grande avanço da tecnologia dos dias atuais. Entretanto, existe uma lista de pré-processadores mais utilizados no mercado, que de fato é o mais importante. Os mais utilizados são: [Sass](https://sass-lang.com "Sass"), [Less](https://lesscss.org "Less") e [Stylus](https://stylus-lang.com "Stylus"), sendo o primeiro o mais utilizado e provavelmente o mais conhecido pelos desenvolvedores. Vamos conhece-los. ### Sass Disparado, o pré-processador mais utilizados por desenvolvedores que fazem uso desse tipo ferramenta. Sass é um abrevisão de “Syntactically Awesome Stylesheets”, que traduzindo é “Folhas de Estilo Sintaticamente Incríveis”. Ele foi criado em 2006 por Hampton Catlin. Ele foi criado para suprir alguns pontos que o CSS puro ainda não possuia. Mas, ainda hoje é uma ferramenta poderosíssima. #### Características No Sass temos uma forma de escrever um tanto diferente da convencional. É que com Sass não usamos as `{}` chaves para adicionar as propriedades, precisamos apenas aninhar corretamente os estilos um nível para dentro do seletor. Tornando assim um estilo mais rápido de ser escrito e com a possibilidade de escalar facilmente o código. O aninhamento também nos permite criar estilos para os elementos filhos. Os `imports` são fundamentais no Sass, possibilitando fracionar partes dos seus estilos em arquivos diferentes. Aumentando ainda mais a organização. Também podemos usar os mixins e funções com Sass, assim como, todos os outros pré-processadores. Aqui está um exemplo de CSS puro para Sass ```css .container { background-color: brown; width: 100%; } .item { width: 100px; height: 100px; transition: .5s; } .item:hover { transform: scale(1.05); } ``` ```sass .container background-color: brown width: 100% .item width: 100px height: 100px transition: .5s &:hover transform: scale(1.05) ``` Nesse exemplo, podemos ver claramente o aninhamento sendo aplicado. Lembrando que, a classe `.item` precisa ser um elemento filho da classe `.container` para funcionar corretamente. #### Scss O Scss é um tipo de arquivo que aceita a sintaxe tanto do Sass, como vimos no exemplo, como também aceita a sintaxe do CSS puro. Permitindo assim, misturar o melhor dos dois mundos. Ele permite escrever de uma forma que estamos acostumados, porém com a possibilidade de fazer tudo que o Sass faz. Uma exelente opção pra quem quer aprender o Sass é começar com o Scss. ### Less O Less foi criado por Alexis Sellier, em 2009. Alexis desenvolveu o Less como uma linguagem de estilo dinâmica para o JavaScript, que compila para CSS. Sua intenção era tornar a escrita e a manutenção de estilos CSS mais eficientes e flexíveis. Desde então, o Less ganhou popularidade e é amplamente utilizado na indústria do desenvolvimento web. O Less possui uma sintaxe bem similar ao CSS tradicional. Porém, com ele, você tem todas as vantagens que citamos até então, como, por exemplo, mixins, funções e opção de declaração aninhada. Aqui está um exemplo, de um estilo CSS padrão e o mesmo estilo com Less. ```css .container { background-color: brown; width: 100%; } .item { width: 100px; height: 100px; transition: .5s; } .item:hover { transform: scale(1.05); } ``` ```sass .container { background-color: brown; width: 100%; } .item { width: 100px; height: 100px; transition: .5s; &:hover { transform: scale(1.05); } } ``` [ ![HTML5 + CSS3 - Propriedades e seletores avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados) ### Stylus O único da nossa lista de pré-processadores que tem grande diferença de sintaxe. O Stylus foi desenvolvido por TJ Holowaychuk em 2010. Ele é conhecido por sua sintaxe minimalista e flexível, que permite escrever estilos de forma concisa e legível. Assim como, os anteriores que vimos aqui, o Stylus, também possui todos os recursos que vimos até então. Entretanto, sua sintaxe não se utiliza das `{}` chaves, `:` dois pontos ou `;` ponto e virgula. É provavel, que, para iniciantes, possa ser um tanto confuso. Porém, para desenvolvedores mais experiêntes pode ajudar bastante. Vamos ver o mesmo exemplo, porém, dessa vez com Stylus. Isso dará uma boa percepção da diferença entre os pré-processadores. ```css .container { background-color: brown; width: 100%; } .item { width: 100px; height: 100px; transition: .5s; } .item:hover { transform: scale(1.05); } ``` ```stylus .container background-color brown width 100% .item width 100px height 100px transition .5s &:hover transform scale(1.05) ``` ## Como utilizar os pré-processadores CSS em meus projetos? Precisamos ter em mente, que para usar os pré-processadores, que vimos até então, precisamos transformar esses arquivos em um arquivo CSS, que é entendido pelos navegadores. Para isso, é necessário um compilador para transformar o código escrito nessas linguagens em CSS puro. O Sass possui diferentes opções de compiladores, cada um com suas características e recursos específicos. Como por exemplo, o [Dart Sass](https://sass-lang.com/dart-sass "Dart Sass") e o [LibSass](https://sass-lang.com/libsass "LibSass"). O Less também possui uma variedade de compiladores disponíveis. Como, por exemplo, [Less.js](https://lesscss.org/usage/ "Less.js"), [Prepros](https://prepros.io "Prepros"), entre outros. O Stylus tem seu próprio compilador chamado `Stylus Compiler`. É uma implementação em [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript") que pode ser executada no navegador ou no [Node.js](https://www.treinaweb.com.br/blog/node-js-por-que-voce-deve-conhecer-essa-tecnologia "Node.js"). Você pode instalá-lo usando o gerenciador de pacotes [npm](https://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele "npm"). [ ![Desenvolvedor Especialista Front-end](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Especialista Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-front-end) ## Conclusão Vale lembrar, que todos esses pré-processadores foram criados quando o CSS puro ainda era muito limitado. Hoje em dia, com várias atualizações, o CSS já faz muitas coisas que antes, só era possível com o uso desses pré-processadores. Entretanto, muitas empresas, ainda utilizam de algum pré-processador em seus projeto. Em conclusão, os pré-processadores CSS, como Sass, Less e Stylus, são ferramentas poderosas que oferecem uma série de recursos avançados para a estilização páginas web. Além disso, os compiladores específicos para cada pré-processador garantem que o código seja transformado em CSS válido e compatível com os navegadores. No entanto, é importante ter em mente que o uso de pré-processadores CSS adiciona uma camada extra de complexidade e requer familiaridade com a sintaxe e os recursos oferecidos. Com o devido domínio dessas ferramentas, os desenvolvedores podem criar estilos mais eficientes, modulares e flexíveis, melhorando a produtividade e a qualidade dos projetos web. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-BLOG-2-2.jpg) ](https://api.whatsapp.com/send/?phone=5544988609539&text=Olá,+li+o+artigo+no+blog+e+gostaria+de+saber+mais+sobre+a+TreinaWeb.) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #sass ](https://www.treinaweb.com.br/blog/tag/sass) - [ #Desenvolvimento Front-End ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-front-end) - [ #Less ](https://www.treinaweb.com.br/blog/tag/less) - [ #Stylus ](https://www.treinaweb.com.br/blog/tag/stylus) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/organizando-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ ITCSS - Organizando melhor o CSS ](https://www.treinaweb.com.br/blog/itcss-organizando-melhor-o-css) Você já teve dificuldade com a organização e escalabilidade do seu CSS? Veja como a arquitetura ITCSS pode te ajudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/principais-tecnicas-de-testes-funcionais-400x280.png) [ Testes e Projetos ](https://www.treinaweb.com.br/blog/categoria/testes-e-projetos) 6 anos atrás ## [ Principais técnicas de testes funcionais ](https://www.treinaweb.com.br/blog/principais-tecnicas-de-testes-funcionais) Existem vários métodos que podem ser aplicados na hora de optar pelo teste funcional. Neste artigo vamos comentar brevemente sobre as principais técnicas de testes funcionais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12132017/introducao-swoole-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Introdução ao Swoole, framework PHP assíncrono baseado em corrotinas ](https://www.treinaweb.com.br/blog/introducao-ao-swoole-framework-php-assincrono-baseado-em-corrotinas) Uma Introdução ao Swoole, framework PHP assíncrono baseado em corrotinas e comparação dele com o modelo tradicional que usa um servidor web (nginx, apache etc) com PHP-FPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/caminhos-certifica--o-400x280.jpg) [ Certificações ](https://www.treinaweb.com.br/blog/categoria/certificacoes) 10 anos atrás ## [ Os caminhos das certificações Microsoft (parte 1) ](https://www.treinaweb.com.br/blog/os-caminhos-das-certificacoes-microsoft-parte-1) Veja como funcionam as trilhas e sub-trilhas de certificação da Microsoft para desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/BOOTSTRAP-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Bootstrap? ](https://www.treinaweb.com.br/blog/o-que-e-bootstrap) Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 6 anos atrás ## [ Page Builders para WordPress: o que são e como podem nos ajudar? ](https://www.treinaweb.com.br/blog/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar) Saiba o que são os Page Builders para WordPress e como eles podem te ajudar a criar sites e blogs incríveis! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/03/Sem-Titulo-2-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 2 anos atrás ## [ Vantagens de utilizar frameworks no desenvolvimento de software ](https://www.treinaweb.com.br/blog/vantagens-de-utilizar-frameworks-no-desenvolvimento-de-software) Usar frameworks no desenvolvimento de software significa mais eficiência e padronização. Confira neste artigo como eles podem otimizar seu trabalho e acelerar seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Principais estruturas de dados na Golang ](https://www.treinaweb.com.br/blog/principais-estruturas-de-dados-na-golang) Neste artigo iremos conhecer quais são, como podemos declarar e como utilizar as principais estruturas de dados na Golang. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/o-que-sao-dados-estruturados-e-nao-estruturados-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 6 anos atrás ## [ O que são dados estruturados e não estruturados? ](https://www.treinaweb.com.br/blog/o-que-sao-dados-estruturados-e-nao-estruturados) Confira neste artigo o que são dados estruturados, não estruturados e semiestruturados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/24120107/streams-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Stream Wrappers personalizados no PHP ](https://www.treinaweb.com.br/blog/stream-wrappers-personalizados-no-php) Veja como Stream Wrappers personalizados podem ser criados em PHP para se trabalhar com streams usando as funções nativas da linguagem. A SDK para PHP da AWS e do Google Cloud utilizam, bem como outros serviços. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 45min 48s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58