[MÚSICA]
Esta lição em particular trata de pré-processadores CSS,
em particular Less e Sass.
Agora, obviamente, esses tópicos têm mais a ver com CSS e
definição de classes CSS, mas seria inapropriado
para mim completar um curso Bootstrap sem
aprofundar um pouco nos pré-processadores CSS.
Simplesmente porque Bootstrap é construído usando Sass para sua fonte.
Então, vamos examinar brevemente os pré-processadores CSS,
o que eles são, como eles são úteis na definição de classes CSS,
e por que o Bootstrap faz uso deles.
Como você provavelmente entende de sua experiência anterior com CSS,
CSS é ótimo para definir estilos e
aplicar repetidamente esses estilos a vários elementos HTML.
E é assim que usamos CSS quando definimos nossas páginas web.
Mas quando você olha para o próprio código CSS,
você começa a perceber rapidamente as limitações do CSS.
Especialmente se você está vindo de um plano de fundo de programação, você percebe que
CSS não tem o que você normalmente espera em uma linguagem de programação, como variáveis,
aninhamento de seletores, variáveis, expressões e funções.
Isso significa que escrever código CSS torna-se complicado, e
manter o código CSS torna-se complicado por causa da
falta da sintaxe tradicional de linguagem de programação.
Agora, é aqui que os pré-processadores CSS vêm em nosso resgate.
Existem vários pré-processadores CSS populares que tentam resolver algumas
das deficiências do CSS, suportando muitos desses recursos.
Dois em particular que é de interesse para nós são Less e Sass.
Analisaremos esses dois com mais detalhes nesta lição.
Agora, quando você define suas classes CSS usando uma
dessas linguagens de pré-processador como Less ou
Sass, então eles eventualmente têm que ser convertidos em CSS,
mas isso pode ser feito automaticamente antes que o CSS seja usado em sua página web.
O que essas linguagens de pré-processamento nos trazem é
mais sintaxe de linguagem de programação, como veremos nos próximos slides.
Vamos examinar Less e Sass brevemente.
Em particular, a razão para darmos uma olhada nisso é porque o próprio Bootstrap
usa Sass para definir sua fonte para suas classes CSS.
E assim, se você entrar em personalização Bootstrap,
então você teria que trabalhar com código Sass.
Bootstrap 3, que era a versão anterior do Bootstrap, usou Less,
e, portanto, eu pensei que seria uma coisa apropriada para cobrir tanto Less quanto
Sass, porque eles são praticamente semelhantes entre si
em termos de suas capacidades e a forma como a sintaxe é definida.
Os recursos típicos que os pré-processadores CSS trazem é o suporte para
variáveis, seletores de aninhamento, expressões, funções e mixins.
Então vamos olhar para alguns deles com alguns exemplos nos próximos slides.
A primeira coisa que veremos são variáveis.
Agora, em muitas classes CSS que você define,
você pode ter algum uso repetido de determinadas quantidades.
Pode valer a pena se você definir algumas variáveis que
contêm essas quantidades e usar essas variáveis na definição de suas classes CSS.
Então é aí que as variáveis vêm em seu resgate.
Aqui, vamos olhar para ambos os códigos Less e Scs.
Scs é uma versão do Sass,
versão mais popular da sintaxe Sass, então é por isso que eu me concentrar em Scs aqui.
Então, se você definir variáveis em Menos,
você irá prosseguir o nome da variável com um sinal @.
No caso de Scs, você usará um cifrão antes do nome da variável.
E uma vez que você definir essas variáveis,
você pode então usar essas variáveis quando você definir as classes.
Como você vê no exemplo, onde definimos o navbar-inverso como fundo,
ou a altura do item carrossel como variáveis.
Agora, a vantagem de definir variáveis no início de sua classe CSS
é que há um único ponto onde você pode atualizar um valor, e
ele irá atualizar automaticamente todas as classes CSS que usam essa variável.
Normalmente, a forma como usamos variáveis em linguagens de programação.
Variáveis nas linguagens de pré-processador CSS também podem ter seu próprio escopo.
Muitas vezes, quando você define classes CSS, especialmente quando você
tem que definir classes que estão aninhadas dentro de outras classes
, então, muito em breve seu código CSS fica muito complicado.
Então é aqui que o aninhamento é suportado por seus pré-processadores CSS.
Então, como você pode ver, você pode definir, por exemplo, uma classe de carrossel, e
dentro de uma classe de carrossel, você pode definir uma classe de item de carrossel.
E da mesma forma, a subclasse de imagem dentro da classe de item de carrossel.
Então aqui você pode ver que cada um deles está aninhado dentro de uma classe anterior.
Com variáveis, você pode manter um valor de cada vez em uma variável.
Suponha que você tenha um grupo de variáveis que resumiram juntos
declarar um conjunto de declarações CSS, que é onde fazemos uso de mixins.
Em Menos você define um mixin dando-lhe um nome,
e em Sass você simplesmente precede isso com um @mixin na
frente do nome da declaração mixin.
E dentro de um mixin, você pode definir um monte de declarações CSS
que podem ser reutilizadas para várias classes CSS.
Como você vê neste exemplo aqui, definimos a margem zero
como um mixin, tanto em Less quanto em Sass.
Observe a variação menor na sintaxe em cada um desses casos.
E, em seguida, você pode usar esse mixin na definição de classes CSS adicionais.
Então aqui você pode ver que para o cabeçalho da linha, definimos a margem zero como
um mixin no cabeçalho da linha, o que significa que todas
essas propriedades da margem zero serão herdadas por essa classe de cabeçalho de linha.
Os próprios mixins podem assumir parâmetros adicionais se desejar defini-los.
Então, neste caso, estou definindo
uma variação do mixin de margem zero que vimos no slide anterior.
Aqui, este mixin de margem zero leva dois parâmetros,
pad up down e pad esquerdo direito.
E com Less, você pode até especificar o valor padrão para ele,
mas com Scs você precisa especificar explicitamente os valores.
Então, aqui estamos definindo duas propriedades CSS diferentes, a margem e o
preenchimento, e então o próprio preenchimento usa os parâmetros para o nosso mixin lá.
Então, nesse caso, você pode usar esses mixins como você vê
nas duas classes CSS definidas abaixo do cabeçalho da linha e
do conteúdo da linha especificando seus valores de parâmetro
quando você incluir esse mixin em seu cluster CSS.
Não só isso, você pode até executar operações matemáticas em
variáveis predefinidas quando você usá-las dentro de suas classes CSS.
Então aqui você pode ver que eu defini dois itens de carrossel diferentes
com dois tamanhos diferentes, e assim
você pode ver que as alturas de cada um deles são definidas de forma diferente.
Em um caso eu estou usando a altura predefinida, em outro caso eu
estou multiplicando essa altura e, em seguida, usá-lo para definir a
propriedade height dentro do meu item carrossel para a classe item-grande.
Portanto, este tipo de operações matemáticas em
variáveis também é permitido em linguagens de pré-processador CSS.
Outros recursos que os pré-processadores CSS incluem
são funções que permitem definir funções matemáticas, Less strings.
Você também pode fazer operações de cores e operações de mistura de cores usando essas funções
e fazer uso delas quando você definir suas classes CSS.
Isso é um pouco avançado, então eu não vou entrar em muitos detalhes lá.
Além disso, você pode inserir classes predefinidas de pré-processador CSS em outras classes.
Então, por exemplo, se você tiver uma classe Less conforme definido, e
você pode inserir esse arquivo em outro arquivo Less.
Da mesma forma, se você tiver definido arquivos Scs,
poderá importá-los para outros arquivos Scs usando a operação de importação.
A sintaxe é a mesma para Less e Sass.
Agora que vimos algumas características das linguagens de pré-processador CSS, vamos
agora examinar como podemos realmente fazer uso delas fazendo alguns exercícios.
Primeiro, faremos um exercício baseado em Less.
Depois seguiremos isso com um exercício baseado em Sass.
[ MUSIC]