Sass placeholders: o jeito certo
4.7 (372 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,740 students enrolled

Sass placeholders: o jeito certo

Aprenda a usar placeholder selectors do jeito certo e construa uma biblioteca de utilitários CSS.
4.7 (372 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,740 students enrolled
Created by Tárcio Zemel
Last updated 4/2019
Portuguese
Portuguese [Auto-generated]
Price: Free
This course includes
  • 31 mins on-demand video
  • 5 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What you'll learn
  • Entender como placeholder selectors facilitam a codificação
  • Usar placeholder selectors de Sass da maneira certa

  • Tirar vantagem dos placeholder selectors

  • Desenvolver uma biblioteca de utilitários CSS com placeholders
Course content
Expand 15 lectures 35:27
+ Sass: como usar placeholders da maneira certa
15 lectures 35:39

O minicurso não é sobre Sass, em geral, mas cabe uma ligeira recapitulação do porquê usar Sass, que é o melhor pré-processador CSS disponível atualmente, que oferece nosso querido recurso de placeholder selectors.

O que é e por que usar Sass?
02:42
Avisos gerais
02:01

Mesmo alguns que já usam Sass ainda não têm total confiança na escolha entre mixins e placeholders. Quais as diferenças e semelhanças entre eles? Quando usar um ou outro? É exatamente isso que vamos abordar nesta aula.

Mixins ou placeholders?
04:11
Quem é você? :-)
00:28

Para a biblioteca de utilitários de placeholder selectors, iniciemos com possibilidades simples, como negrito, itálico, alinhamento, transformação e decoração de texto e posicionamentos.

Iniciando a biblioteca de utilitários
03:11

Em qualquer biblioteca de placeholder selectors, é importante haver utilitários para se trabalhar com margin e padding. E fica muito mais eficiente quando se usa os facilitadores que Sass tem a oferecer.

Loops para margins e paddings
04:17

Prosseguindo ao desenvolvimento da biblioteca de utilitários de placeholder selectors, nesta aula vamos adicionar alguns recursos para se trabalhar com Flexbox.

Utilitários Flexbox
03:15

Depois de saber como usar placeholder selectors de Sass da maneira certa, vamos a alguns exemplos práticos. Para começar, o desenvolvimento de um simples botão.

Exemplo prático 1: botão
02:32

Para o segundo exemplo prático do minicurso, será desenvolvido um menu. Tudo fica bem mais fácil quando se tem uma biblioteca de utilitários à disposição.  ;-)

Exemplo prático 2: menu
03:02
@extend em media queries
00:27

Para o último exemplo, um widget de perfil. Este já é um exemplo bem mais próximo do que é possível encontrar em projetos "de verdade" que, claro, fica bem mais simples usando placeholder selectors.

Exemplo prático 3: widget de perfil
04:55
Conclusão
00:41
Uma importante consideração sobre o uso de @extend
00:43
Indicações de recursos e conteúdos
00:40
Aula bônus: aprimore suas habilidades no front-end!
02:33
Requirements
  • Conhecimentos básicos de HTML, CSS e Sass
  • Familiaridade com algum editor de códigos
Description

Esse mini curso grátis é só uma amostra do que você pode aprender com a gente!  ;-)

Para mais conteúdos sobre Sass e outras tecnologias web, acesse nosso grupo no Facebook: @desenvolvweb

----------

No minicurso Sass placeholders: o jeito certo, o aluno conhecerá as verdadeira capacidades de placeholder selectors de Sass e, através deste conhecimento, aprenderá a desenvolver uma biblioteca de utilitários CSS para ser usada em qualquer projeto, aprimorando a qualidade geral do front-end e maximizando sua qualidade e facilidade de desenvolvimento.

No final do minicurso, o aluno estará apto a:

  • Entender como placeholder selectors facilitam a codificação

  • Entender quando deve usar mixins ou placeholders

  • Usar placeholder selectors de Sass da maneira certa

  • Tirar vantagem dos placeholder selectors

  • Desenvolver uma biblioteca de utilitários CSS com placeholders

Para você que já trabalha com front-end usando Sass, certamente este minicurso vai ser de grande ajuda. A biblioteca de utilitários CSS que será desenvolvida poderá ser usada no front-end dos mais diversos projetos para facilitar seu desenvolvimento e proporcionar uma codificação mais eficiente e inteligente.

Who this course is for:
  • Este minicurso gratuito é indicado para quem já conhece o básico de Sass e quer saber como usar placeholder selectors para construir uma biblioteca de utilitários.