Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Estendendo a linguagem CSS com pré-processadores

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Cléverton Heming Cléverton Heming
October 20, 2015
Technology
0
120

Estendendo a linguagem CSS com pré-processadores

Pré-processadores permitem adicionar funcionalidades na linguagem CSS, como variáveis, mixins, regras aninhadas, funções e muitas outras técnicas.

Avatar for Cléverton Heming

Cléverton Heming

October 20, 2015
Tweet

More Decks by Cléverton Heming

See All by Cléverton Heming
Grunt - Automatização de tarefas
Avatar for Cléverton Heming clevertonh
0
96

Other Decks in Technology

See All in Technology
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
Avatar for oracle4engineer oracle4engineer
PRO
2
14k
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
100
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
210
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
コンテナセキュリティの最新事情 ~ 2026年版 ~
Avatar for Kyohei Mizumoto kyohmizu
6
2.3k
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
130
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
1
170
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
Avatar for Jun Naito jonnojun
1
250
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
420
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
770
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k
生成AIと余白 〜開発スピードが向上した今、何に向き合う？〜
Avatar for KAKEHASHI kakehashi
PRO
0
160

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
130
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
72

Transcript

  1. Pré-processadores {CSS} Cléverton Heming

  2. O que são pré-processadores?

  3. Um pré-processador é um programa que recebe texto e efetua

    conversões léxicas. Fonte: Wikipédia

  4. What?

  5. Mas o que é uma conversão léxica?

  6. Conversões léxicas são o mesmo que pegar um texto em

    português, escrito de forma informal, (por exemplo, com gírias e sem uma pontuação correta) e transforma-lo em um texto escrito de forma formal.

  7. E como isso pode me ajudar em escrever CSS?

  8. Alguns motivos

  9. Alguns motivos Variáveis Mixins Regras Aninhadas Operadores Funções Importação Condições

    Loop

  10. Alguns problemas ao escrever CSS

  11. Muitos prefixos

  12. Arquivos muito grandes

  13. Valores repetidos

  14. Alguns pré-processadores

  15. None
  16. None
  17. None
  18. None

  19. O que vamos utilizar

  20. None

  21. Exemplos

  22. Links Software desktop windows http://winless.org Conversor CSS em LESS http://css2less.cc/

    http://css2less.co/ Elementos LESS http://lesselements.com/

  23. Perguntas?