Home-theater-designers
Less CSS é um pré-processador de CSS robusto e dinâmico que atraiu atenção e popularidade significativas nos últimos anos. Como um pré-processador, ele serve como uma extensão do 'Vanilla CSS', a linguagem de estilo CSS tradicional usada no desenvolvimento da Web, fornecendo uma variedade de recursos e funcionalidades adicionais que aprimoram a experiência geral de estilo.
Vídeo MUO do dia ROLE PARA CONTINUAR COM O CONTEÚDO
Se você é bem versado em escrever CSS padrão, pode fazer a transição perfeita para usar menos CSS sem uma curva de aprendizado acentuada. Essa compatibilidade facilita a manutenção do seu conhecimento existente de CSS enquanto aproveita os recursos avançados do Less.
O que são funções e por que são importantes?
Na programação, uma função é um bloco de código que executa uma tarefa específica. Você também pode reutilizá-lo em outro lugar no programa. As funções geralmente recebem dados, os processam e retornam os resultados.
Eles facilitam a redução de código duplicado em um programa. Por exemplo, digamos que você tenha um programa que calcula o desconto com base no preço inserido pelo usuário. Em um linguagem como JavaScript , você poderia implementá-lo assim:
function checkDiscount(price, threshold){
if (price >= threshold){
let discount = 5/100 * price;
return `Your discount is $${discount}`;
} else {
return `Sorry, this item does not qualify for a discount. `
}
}
Então você pode chamar a função e passar no preço e a limite .
let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))
Ao abstrair a lógica de verificação de descontos, o programa não é apenas legível, mas agora você tem um bloco de código reutilizável que processa o desconto e retorna o resultado. Há muito mais que as funções podem fazer, mas isso é apenas o básico.
Compreendendo funções em menos CSS
No CSS tradicional, há um conjunto muito limitado de funções disponíveis para você como desenvolvedor. Uma das funções mais populares em CSS é o calc() função matemática que faz exatamente o que parece - executa cálculos e usa o resultado como um valor de propriedade em CSS.
p{
background-color: red;
width: calc(13px - 4px);
}
No Less CSS, existem várias funções que fazem mais do que apenas operações aritméticas. Uma função que você pode encontrar em Less é a se função. O se função recebe três parâmetros: uma condição e dois valores. O bloco de código abaixo mostra como você pode usar esta função:
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
No bloco de código acima, o compilador Less verifica se a variável largura (definido pelo @ símbolo) é maior que a variável altura . Se a condição for verdadeira, a função retorna o primeiro valor após a condição (10px). Caso contrário, a função retorna o segundo valor (20px).
Após a compilação, a saída CSS deve ser algo como isto:
div {
margin: 20px;
}
Como usar um booleano em menos
Um booleano é uma variável que tem dois valores possíveis: verdadeiro ou falso . Com o boleano() função em Less, você pode armazenar o valor verdadeiro ou falso de uma expressão em uma variável para uso posterior. Veja como funciona.
@text-color: red;
@bg-color: boolean(@text-color = red);
No bloco de código acima, o compilador Less verifica se cor do texto é vermelho. Então o bg-color variável armazena o valor.
div{
background-color: if(@bg-color,green,yellow);
}
O bloco de código acima compila para algo como isto:
div {
background-color: green;
}
Substituindo o texto dentro de uma string com a função replace()
A sintaxe para o substituir() a função fica assim:
replace(string, pattern, replacement, flags)
corda representa a string que você deseja pesquisar e substituir. padrão é a string a ser procurada. padrão também pode ser uma expressão regular, mas geralmente é uma string. Após uma correspondência bem-sucedida, o compilador Less CSS substitui esse padrão com o substituição .
Opcionalmente, o substituir() função também pode conter o bandeiras parâmetro para sinalizadores de expressão regular.
@string: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
O bloco de código acima deve resultar no seguinte após a compilação:
div::before {
content: "Hi";
}
Listar funções em menos CSS
Em Less CSS, você usa vírgulas ou espaços para definir uma lista de valores. Por exemplo:
@groceries: "bread", "banana", "potato", "milk";
Você pode usar o comprimento() função para avaliar o número de elementos na lista.
@result: length(@groceries);
Você também pode usar o extrair() função para extrair o valor em uma determinada posição. Por exemplo, se você deseja obter o terceiro elemento no mantimentos lista, você faz o seguinte:
@third-element: extract(@groceries, 3);
Ao contrário das linguagens de programação regulares em que o índice da lista começa em 0, o índice inicial de uma lista em Less CSS é sempre 1.
Outra função de lista que pode ser útil ao criar sites com Less é a faixa() função. Leva em três parâmetros. O primeiro parâmetro especifica a posição inicial no intervalo. O segundo parâmetro indica a posição final e o último parâmetro especifica o valor de incremento ou decremento entre cada item do intervalo. Se não for fornecido, o valor padrão é 1.
div {
margin: range(10px, 40px, 10);
}
O bloco de código acima deve ser compilado para o seguinte:
div {
margin: 10px 20px 30px 40px;
}
Como você pode ver, o compilador Less CSS começa a partir de 10px, aumentando o valor anterior em 10, até atingir a posição final (40px).
Construindo um site simples com menos funções CSS
É hora de reunir tudo o que você aprendeu e criar um projeto simples com menos CSS. Crie uma pasta e adicione index.htm e estilo.menos arquivos.
Abra o index.htm arquivo e adicione o seguinte código HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>
No bloco de código acima, há um pai 'recipiente' div com um vazio h1 elemento. O origem atributo no roteiro A tag aponta para o caminho para o compilador Less CSS.
Sem isso roteiro tag, o navegador não conseguirá entender seu código. Como alternativa, você pode instalar o Less CSS no seu computador via Gerenciador de pacotes de nós (NPM) , executando o seguinte comando no terminal:
npm install -g less
Sempre que estiver pronto para compilar o .menos arquivo, basta executar o comando abaixo, certificando-se de especificar o arquivo no qual o compilador deve gravar a saída.
lessc style.less style.css
No estilo.menos arquivo, crie duas variáveis, a saber: largura do recipiente e container-bg-color para representar a largura e a cor de fundo do 'recipiente' div respectivamente.
@container-width: 50rem;
@container-bg-color: yellow;
Em seguida, crie três variáveis, a saber: corda , padrão, e substituição . Em seguida, adicione os estilos para o 'recipiente' div e a h1 elemento.
@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";
.container{
width: @container-width;
background-color: @container-bg-color;
padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
border: solid;
}
h1:first-child::after{
content: replace(@string,@pattern,@replacement);
}
No bloco de código acima, o faixa() função define o preenchimento propriedade no 'recipiente' div . O compilador Less deve compilar o estilo.menos arquivo no seguinte:
.container {
width: 50rem;
background-color: yellow;
padding: 20px 40px 60px 80px;
border: solid;
}
h1:first-child::after {
content: "Hello from the inhabitants of Pluto!";
}
Quando você abre o index.htm arquivo no navegador, isso é o que você deve ver:
Melhore sua produtividade com pré-processadores CSS
Em linguagens de programação regulares, as funções reduzem a quantidade de código que você precisa escrever e minimizam os erros. Os pré-processadores CSS, como o Less, fornecem vários recursos que facilitam a escrita do código CSS.
como tornar um arquivo de áudio menor
Os pré-processadores CSS são úteis ao trabalhar com arquivos grandes. Eles facilitam a depuração de problemas, melhorando assim a produtividade do desenvolvedor.