LESS - Guia Rápido

LESS é um pré-processador CSS que permite uma folha de estilo personalizável, gerenciável e reutilizável para o site. LESS é uma linguagem de folha de estilo dinâmica que estende a capacidade do CSS. LESS também é compatível com navegadores diferentes.

O pré-processador CSS é uma linguagem de script que estende CSS e é compilada em uma sintaxe CSS regular, para que possa ser lida por seu navegador. Ele fornece funcionalidades como variáveis , funções , mixins e operações que permitem construir CSS dinâmico.

Por que MENOS?

Vamos agora entender por que usamos LESS.

  • O LESS oferece suporte para a criação de CSS mais limpo e compatível com vários navegadores de forma mais rápida e fácil.

  • O LESS é projetado em JavaScript e também criado para ser usado ao vivo , que compila mais rápido do que outros pré-processadores CSS.

  • O LESS mantém seu código de forma modular, o que é muito importante, tornando-o legível e facilmente alterável.

  • Uma manutenção mais rápida pode ser alcançada pelo uso de variáveis MENOS .

História

LESS foi desenhado por Alexis Sellierem 2009. LESS é um código aberto. A primeira versão do LESS foi escrita em Ruby; nas versões posteriores, o uso de Ruby foi substituído por JavaScript.

Características

  • Um código mais limpo e legível pode ser escrito de maneira organizada.

  • Podemos definir estilos e podem ser reutilizados em todo o código.

  • LESS é baseado em JavaScript e é um superconjunto de CSS.

  • LESS é uma ferramenta ágil que resolve o problema de redundância de código.

Vantagens

  • LESS gera facilmente CSS que funciona em todos os navegadores.

  • LESS permite que você escreva código melhor e bem organizado usando aninhamento .

  • A manutenção pode ser alcançada mais rapidamente pelo uso de variáveis .

  • O LESS permite que você reutilize as classes inteiras facilmente, referenciando-as em seus conjuntos de regras.

  • LESS oferece o uso de operações que tornam a codificação mais rápida e economizam tempo.

Desvantagens

  • Leva tempo para aprender se você é novo no pré-processamento de CSS.

  • Devido ao forte acoplamento entre os módulos, mais esforços devem ser feitos para reutilizar e / ou testar os módulos dependentes.

  • O LESS tem menos framework em comparação com o pré-processador mais antigo como o SASS, que consiste nos frameworks Compass , Gravity e Susy .

Neste capítulo, vamos entender, passo a passo, como instalar o LESS.

Requisitos do sistema para LESS

  • Operating System - Plataforma cruzada

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Instalação de LESS

Vamos agora entender a instalação do LESS.

Step 1 - precisamos NodeJspara executar MENOS exemplos. Para baixar NodeJs, abra o linkhttps://nodejs.org/en/, você verá uma tela conforme mostrado abaixo -

Baixe a versão mais recente dos recursos do arquivo zip.

Step 2- Execute a configuração para instalar o Node.js em seu sistema.

Step 3- Em seguida, instale LESS no servidor via NPM (Node Package Manager). Execute o seguinte comando no prompt de comando.

npm install -g less

Step 4 - Após a instalação bem-sucedida do LESS, você verá as seguintes linhas no prompt de comando -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Exemplo

A seguir está um exemplo simples de LESS.

ola.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Vamos agora criar um arquivo style.less que é bastante semelhante ao CSS, a única diferença é que ele será salvo com a extensão .less . Ambos os arquivos, .html e .less, devem ser criados dentro da pastanodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Compile o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Quando você executa o comando acima, o arquivo style.css é criado automaticamente. Sempre que você alterar o arquivo LESS, é necessário executar o comando acima nocmde então o arquivo style.css será atualizado.

O arquivo style.css terá o seguinte código quando você executar o comando acima -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Resultado

Vamos agora realizar as seguintes etapas para ver como o código acima funciona -

  • Salve o código html acima no hello.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

É um grupo de propriedades CSS que permite usar propriedades de uma classe em outra classe e inclui o nome da classe como suas propriedades. No LESS, você pode declarar o mixin da mesma forma que o estilo CSS usando o seletor de classe ou id. Ele pode armazenar vários valores e pode ser reutilizado no código sempre que necessário.

Exemplo

O exemplo a seguir demonstra o uso de regras aninhadas no arquivo LESS -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no nested_rules.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

Você pode aninhar as diretivas, como mídia e quadro - chave , da mesma maneira que aninha os seletores. Você pode colocar a diretiva no topo e seus elementos relativos não serão alterados dentro de seu conjunto de regras. Isso é conhecido como processo de borbulhamento.

Exemplo

O exemplo a seguir demonstra o uso das diretivas aninhadas e bubbling no arquivo LESS -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no nested_directives_bubbling.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

LESS fornece suporte para algumas operações aritméticas, como mais (+), menos (-), multiplicação (*) e divisão (/) e podem operar em qualquer número, cor ou variável. As operações economizam muito tempo quando você usa variáveis ​​e tem vontade de trabalhar em matemática simples.

Exemplo

O exemplo a seguir demonstra o uso de operações no arquivo LESS -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no operations.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

Ele cria seletores dinamicamente e usa a propriedade ou o valor da variável como string arbitrária.

Exemplo

O exemplo a seguir demonstra o uso de escape no arquivo LESS -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

p {
   color: ~"green";
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima, ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

p {
   color: green;
}

Qualquer coisa escrita dentro de ~ "some_text" será exibida como some_text após compilar o código LESS para o código CSS.

Resultado

Vamos agora realizar as seguintes etapas para ver como o código acima funciona -

  • Salve o código html acima no escaping.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

LESS mapeia o código JavaScript com manipulação de valores e usa funções predefinidas para manipular aspectos dos elementos HTML na folha de estilo. Ele fornece várias funções para manipular cores, como função redonda, função do piso, função do teto, função de porcentagem, etc.

Exemplo

O exemplo a seguir demonstra o uso de funções no arquivo LESS -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Agora execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no functions.html Arquivo.

  • Abra este arquivo HTML em um navegador, exibido, você receberá a seguinte saída.

Descrição

Os namespaces são usados ​​para agrupar os mixins sob um nome comum. Usando namespaces, você pode evitar conflito de nomes e encapsular um grupo de mixins de fora.

Exemplo

O exemplo a seguir demonstra o uso de namespaces e acessadores no arquivo LESS -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no namespaces_accessors.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

O escopo da variável especifica o local da variável disponível. As variáveis ​​serão pesquisadas no escopo local e, se não estiverem disponíveis, o compilador pesquisará no escopo pai.

Exemplo

O exemplo a seguir demonstra o uso de namespaces e acessadores no arquivo LESS -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no scope.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

Os comentários tornam o código claro e compreensível para os usuários. Você pode usar o estilo de bloco e os comentários embutidos no código, mas quando compilar o código LESS, os comentários de uma única linha não aparecerão no arquivo CSS.

Exemplo

O exemplo a seguir demonstra o uso de comentários no arquivo LESS -

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Agora execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no comments.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

É usado para importar o conteúdo dos arquivos LESS ou CSS.

Exemplo

O exemplo a seguir demonstra o uso da importação no arquivo LESS -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Agora crie o arquivo myfile.less .

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Agora crie o arquivo style.less .

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

O arquivo myfile.less que será importado para style.less do caminhohttps://www.tutorialspoint.com/less/myfile.less

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no importing.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Neste capítulo, discutiremos as variáveis ​​em LESS. LESS permite que variáveis sejam definidas com um símbolo @. A atribuição da variável é feita com umcolon(:).

A tabela a seguir demonstra o uso de variáveis LESS em detalhes.

Sr. Não. Uso e descrição das variáveis
1 Visão geral

A repetição do mesmo valor muitas vezes pode ser evitada pelo uso de variáveis .

2 Interpolação Variável

As variáveis também podem ser usados em outros lugares, como nomes seletor , nomes de propriedade , URL s e @import declarações.

3 Nomes de Variáveis

Podemos definir variáveis ​​com um nome de variável que consiste em um valor.

4 Carregamento lento

No carregamento lento, as variáveis ​​podem ser usadas mesmo quando não são.

5 Variáveis ​​Padrão

A variável padrão tem a capacidade de definir uma variável apenas quando ainda não estiver definida. Este recurso não é necessário porque as variáveis ​​podem ser facilmente substituídas definindo-as posteriormente.

Extend é uma pseudo classe MENOS que estende outros estilos de seletor em um seletor usando :extend seletor.

Exemplo

O exemplo a seguir demonstra o uso de extend no arquivo LESS -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Você pode compilar o extend.less arquivo para extend.css usando o comando a seguir -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no extend_syntax.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Extend Syntax

A extensão é colocada em um conjunto de regras ou anexada a um seletor. É semelhante a uma pseudo classe contendo uma ou mais classes, que são separadas por vírgula. Usando a palavra-chave opcionalall, cada seletor pode ser seguido.

Exemplo

O exemplo a seguir demonstra o uso da sintaxe de extensão no arquivo LESS -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no extend_syntax.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

A tabela a seguir lista todos os tipos de sintaxe de extensão que você pode usar em LESS -

Sr. Não. Tipos e descrição
1 Estender anexado ao seletor

Extend está conectado a um seletor que se parece com uma pseudo classe com seletor como parâmetro.

2 Estender Conjunto de Regras Internas

o &:extend(selector) a sintaxe pode ser inserida no corpo do conjunto de regras.

3 Estendendo seletores aninhados

Os seletores aninhados são combinados usando o seletor de extensão .

4 Correspondência Exata com Estender

Por padrão, extend procura a correspondência exata entre os seletores.

5 enésima expressão

A forma da enésima expressão é importante para estender, caso contrário, trata o seletor como diferente.

6 Estender "tudo"

Quando a palavra-chave all for finalmente identificada noextend o argumento LESS corresponde a esse seletor como parte de outro seletor.

7 Interpolação de seletor com extensão

o extend pode ser conectado ao seletor interpolado.

8 Escopo / Estender dentro de @media

Extend corresponde ao seletor apenas que está presente na mesma declaração de mídia.

9 Detecção de Duplicação

Ele não pode detectar a duplicação de seletores.

A seguir estão os tipos de casos de uso para extensão

Sr. Não. Tipos e descrição
1 Caso de uso clássico

O caso de uso clássico é usado para evitar adicionar a classe base em LESS.

2 Reduzindo o tamanho CSS

Extend é usado para mover o seletor até as propriedades que você deseja usar; isso ajuda a reduzir o código gerado por css.

3 Combinando Estilos / Um Mixin Mais Avançado

Usando extend, podemos combinar os mesmos estilos de um seletor particular em outro seletor.

Mixins são semelhantes a funções em linguagens de programação. Mixins são um grupo de propriedades CSS que permitem que você use propriedades de uma classe para outra classe e inclui o nome da classe como suas propriedades. No LESS, você pode declarar um mixin da mesma forma que o estilo CSS usando o seletor de classe ou id. Ele pode armazenar vários valores e pode ser reutilizado no código sempre que necessário.

A tabela a seguir demonstra o uso de mixins LESS em detalhes.

Sr. Não. Uso e descrição de Mixins
1 Sem saída do Mixin

Os mixins podem desaparecer na saída simplesmente colocando os parênteses a seguir.

2 Seletores em Mixins

Os mixins podem conter não apenas propriedades, mas também podem conter seletores.

3 Namespaces

Os namespaces são usados ​​para agrupar os mixins sob um nome comum.

4 Namespaces protegidos

Quando a guarda é aplicada ao namespace, os mixins definidos por ele são usados ​​apenas quando a condição de guarda retorna verdadeira.

5 A palavra-chave! Important

A palavra-chave ! Important é usada para substituir a propriedade particular.

Exemplo

O exemplo a seguir demonstra o uso de mixins no arquivo LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

Você pode compilar o style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no less_mixins.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Os parênteses são opcionais ao chamar mixins. No exemplo acima, ambas as declarações.p1(); e .p1; Faça a mesma coisa.

Descrição

Os mixins paramétricos usam um ou mais parâmetros que estendem a funcionalidade do LESS, pegando argumentos e suas propriedades para personalizar a saída do mixin quando mixados em outro bloco.

Por exemplo, considere um simples trecho de código MENOS -

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

Aqui estamos usando o mixin paramétrico como .border com três parâmetros - largura, estilo e cor. Usando esses parâmetros, você pode personalizar a saída do mixin com o valor dos parâmetros passados.

A tabela a seguir descreve os diferentes tipos de mixins paramétricos junto com a descrição.

Sr. Não. Tipos e descrição
1 Mixins com vários parâmetros

Os parâmetros podem ser separados por vírgulas ou ponto e vírgula.

2 Parâmetros Nomeados

Mixins fornecem valores de parâmetros em vez de posições usando seus nomes.

3 @arguments Variable

Quando um mixin é chamado, os @arguments incluem todos os argumentos passados.

4 Argumentos avançados e a variável @rest

O Mixin recebe um número variável de argumentos usando .....

5 Correspondência de padrões

Mude o comportamento do mixin passando parâmetros para ele.

Neste capítulo, vamos entender a importância de Mixins as Functions. Assim como as funções, os mixins podem ser aninhados, podem aceitar parâmetros e retornar valores também.

A tabela a seguir demonstra o uso de mixins como funções em detalhes.

Sr. Não. Uso e descrição de Mixins
1 Escopo Mixin

Mixins consistem em variáveis; eles podem ser usados ​​no escopo do chamador e são visíveis.

2 Mixin e valores de retorno

Mixins são semelhantes a funções e as variáveis ​​que são definidas em um mixin se comportam como os valores de retorno.

3 Mixin dentro de outro mixin

Sempre que um mixin é definido dentro de outro mixin, ele também pode ser usado como valor de retorno.

Descrição

O conjunto de regras separado contém conjuntos de regras como propriedades, conjuntos de regras aninhados, declaração de variáveis, mixins, etc. Ele é armazenado em uma variável e incluído em outra estrutura; todas as propriedades do conjunto de regras são copiadas para essa estrutura.

Exemplo

O exemplo a seguir mostra como passar um conjunto de regras para mixin no arquivo LESS -

pass_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no passing_ruleset.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Escopo

Todas as variáveis ​​e mixins no conjunto de regras separado estão disponíveis onde quer que o conjunto de regras seja chamado ou definido. Caso contrário, o chamador e os escopos de definição estão disponíveis por padrão. O escopo da declaração tem prioridade quando ambos os escopos contêm o mesmo mixin ou variável. O corpo do conjunto de regras separado é definido no escopo da declaração. Ele não altera seu escopo depois que o conjunto de regras desanexado é copiado de uma variável para outra.

A tabela a seguir lista todos os tipos de escopo -

Sr. Não. Tipos e descrição
1 Definição e visibilidade do escopo do chamador

Variáveis ​​e mixins são definidos dentro do conjunto de regras separado.

2 A referência não modificará o escopo do conjunto de regras desvinculado

Apenas fornecendo as referências, o conjunto de regras não acessa nenhum novo escopo.

3 O desbloqueio modificará o escopo do conjunto de regras desvinculado

O conjunto de regras desanexado pode acessar o escopo sendo importado para ele.

Descrição

o @importdiretiva é usada para importar os arquivos no código. Ele espalha o código LESS por diferentes arquivos e permite manter a estrutura do código facilmente. Você pode colocar as instruções @import em qualquer lugar do código.

Por exemplo, você pode importar o arquivo usando @importpalavra-chave como @import "file_name.less" .

Extensões de arquivo

Você pode usar as instruções @import dependendo das diferentes extensões de arquivo, como -

  • Se você estiver usando a extensão .css , ela será considerada CSS e a instrução @import permanecerá como está.

  • Se contiver qualquer outra extensão, será considerado MENOS e será importado.

  • Se não houver extensão LESS, ele será anexado e incluído como arquivo LESS importado.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Exemplo

O exemplo a seguir demonstra o uso de variável no arquivo SCSS -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Em seguida, crie o arquivo import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Agora, crie o arquivo style.less .

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

O import_dir.less arquivo serão importadas para style.less arquivo do caminhohttps://www.tutorialspoint.com/less/import_dir.less.

Você pode compilar o style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no import_directives.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Neste capítulo, vamos entender a importância de Import Optionsem MENOS. LESS oferece o@import instrução que permite que as folhas de estilo importem folhas de estilo LESS e CSS.

As tabelas a seguir listam as diretivas de importação que serão implementadas nas instruções de importação.

Sr. Não. Opções e descrição de importação
1 referência

Ele usa um arquivo LESS apenas como referência e não o produzirá.

2 na linha

Ele permite que você copie seu CSS na saída sem ser processado.

3 Menos

Ele tratará o arquivo importado como o arquivo LESS normal, independentemente da extensão do arquivo.

4 css

Ele tratará o arquivo importado como o arquivo CSS normal, independentemente da extensão do arquivo.

5 uma vez

Ele importará o arquivo apenas uma vez.

6 múltiplo

Ele importará o arquivo várias vezes.

7 opcional

Ele continua compilando mesmo que o arquivo a ser importado não seja encontrado.

Mais de uma palavra-chave pode ser usada no @import declaração, no entanto, você deve usar vírgulas para separar as palavras-chave.

Por exemplo -

@import (less, optional) "custom.css";

Descrição

Se você deseja combinar valores simples ou número de argumentos em expressões, você pode fazer uso de protetores. Está associado à declaração do mixin e inclui a condição anexada a um mixin. Cada mixin terá um ou mais guardas separados por vírgula; um guarda deve ser colocado entre parênteses. LESS usa mixins protegidos em vez deif/else declarações e realiza cálculos para especificar o mixin correspondente.

A tabela a seguir descreve os diferentes tipos de protetores de mixins junto com a descrição.

Sr. Não. Tipos e descrição
1 Operadores de comparação de guarda

Você pode usar o operador de comparação (=) para comparar números, strings, identificadores, etc.

2 Operadores lógicos de guarda

Você pode usar a palavra-chave e para contornar os operadores lógicos com protetores.

3 Funções de verificação de tipo

Ele contém as funções integradas para determinar os tipos de valor para os mixins correspondentes.

4 Mixins condicionais

LESS usa a função padrão para combinar o mixin com outras combinações de mixagem.

Exemplo

O exemplo a seguir demonstra o uso de guardas de mixin no arquivo LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Agora, crie o arquivo style.less .

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Você pode compilar o style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no mixin-guard.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

Guardas são usados ​​para combinar valores simples ou vários argumentos em expressões. É aplicado aos seletores CSS. É uma sintaxe para declarar o mixin e chamá-lo imediatamente. Para trazer oifdeclaração de tipo; junte-se a isso com recurso&, que permite agrupar vários guardas.

Exemplo

O exemplo a seguir demonstra o uso de css guarda no arquivo LESS -

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.style {
   background-color: blue;
   color: white;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no css_guard.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Neste capítulo, vamos entender como os Loops funcionam no LESS. A instrução de loops nos permite executar uma instrução ou grupo de instruções várias vezes. Várias estruturas iterativas / loop podem ser criadas quando o mixin recursivo se combina comGuard Expressions e Pattern Matching.

Exemplo

O exemplo a seguir demonstra o uso de loops no arquivo LESS -

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no loop_example.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Descrição

Este recurso no LESS permite a adição de valores a uma lista separada por vírgulas ou espaços de várias propriedades usando uma única propriedade. Ele pode ser usado para propriedades de fundo e transformação.

A tabela a seguir descreve os dois tipos de funções com suporte no recurso Mesclar.

Sr. Não. Tipos e descrição
1 Vírgula

Ele adiciona valor de propriedade no final.

2 Espaço

Ele adiciona valor de propriedade com espaço.

Neste capítulo, vamos entender como Parent Selectorstrabalhos. É possível fazer referência ao seletor pai usando o&operador (e comercial). Os seletores pais de uma regra aninhada são representados pelo& operador e é usado ao aplicar uma classe de modificação ou pseudo classe a um seletor existente.

A tabela a seguir mostra os tipos de seletor pai -

Sr. Não. Tipos e descrição
1 Múltiplo &

o & representará o seletor mais próximo e também todos os seletores pais.

2 Alteração da ordem do seletor

Anexar um seletor aos seletores herdados (pai) é útil quando a ordem do seletor é alterada.

3 Combinatorial Explosion

o & também pode produzir todas as permutações possíveis de seletores em uma lista separada por vírgulas.

Exemplo

O exemplo a seguir demonstra o uso do seletor pai no arquivo LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

No exemplo acima, & refere-se ao seletor a.

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no parent_selector1.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

O operador Seletores pai tem muitos usos, como, quando você precisa combinar os seletores da regra aninhada de outra forma que não o padrão. Outro uso típico de&é gerar nomes de classes repetidamente. Para mais informações clique aqui .

As funções diversas consistem em um grupo de funções de um tipo diferente.

A tabela a seguir lista todos os tipos de funções diversas -

Sr. Não. Funções e descrição
1 cor

É uma string que representa as cores.

2 tamanho da imagem

É usado para examinar a dimensão da imagem do arquivo.

3 Largura da imagem

Ele examina a largura da imagem do arquivo.

4 Altura da imagem

Ele examina a altura da imagem do arquivo.

5 converter

Um número é convertido de uma unidade para outra.

6 dados - uri

O uri de dados é um esquema de identificador uniforme de recursos (URI) que obtém um recurso embutido nas páginas da web.

7 padrão

A função padrão retorna true apenas quando está disponível dentro da condição de guarda e não combina com nenhum outro mixin.

8 unidade

A função padrão retorna verdadeiro apenas quando está disponível dentro da condição de guarda e não corresponde a nenhum outro mixin

9 obter - unidade

A função get - unit retorna sua unidade onde o argumento está presente com número e unidades.

10 svg - gradiente

svg-gradient é uma transição de uma cor para outra. Ele pode adicionar muitas cores ao mesmo elemento.

Descrição

Less suporta algumas das funções de string listadas abaixo -

  • escape
  • e
  • formato%
  • replace

A tabela a seguir descreve as funções de string acima junto com a descrição.

Sr. Não. Tipos e descrição Exemplo
1

Escape

Ele codifica uma string ou informação usando a codificação de URL em caracteres especiais. Você não pode codificar alguns caracteres, como, , / , ? , @ , & , + , ~ , ! , $ , ' e alguns caracteres que você pode codificar, como \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ e =.

escape("Hello!! welcome to Tutorialspoint!")

Ele produz string de escape como -

Hello%21%21%20welcome%20to%20Tutorialspoint%21
2

e

É uma função string que usa string como parâmetro e retorna a informação sem aspas. É um escape CSS que usa ~ valores de escape de "algum conteúdo" e números como parâmetros.

filter: e("Hello!! welcome to Tutorialspoint!");

Ele produz string de escape como -

filter: Hello!! welcome to Tutorialspoint!;
3

% format

Esta função formata uma string. Ele pode ser escrito com o seguinte formato -

%(string, arguments ...)
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

Ele produz a string formatada como -

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

É usado para substituir o texto em uma string. Ele usa alguns parâmetros -

  • string - Ele pesquisa a string e a substitui.

  • pattern - Pesquisa o padrão de expressão regular.

  • replacement - Substitui a string que corresponde ao padrão.

  • flags - Esses são sinalizadores de expressão regular opcionais.

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

Ele substitui a string como -

"Welcome, to Tutorialspoint!"

Descrição

LESS consiste em funções de lista que são usadas para especificar o comprimento da lista e a posição do valor na lista.

A tabela a seguir lista as funções de lista usadas em LESS -

Sr. Não. Descrição da função
1 comprimento

Terá como parâmetro uma lista de valores separados por vírgulas ou espaços.

2 Extrair

Ele retornará o valor em uma posição especificada em uma lista.

Descrição

As funções matemáticas incluem métodos que são usados ​​para realizar operações numéricas, como redondo, raiz quadrada, valor de potência, módulo, porcentagem, etc.

A tabela a seguir mostra as funções matemáticas usadas em LESS -

Sr. Não. Descrição da função Exemplo
1

ceil

Ele arredonda o número para o próximo inteiro mais alto.

ceil(0.7)

ele arredonda o número para -

1
2

floor

Ele arredonda o número para o próximo inteiro mais baixo.

floor(3.3)

ele arredonda o número para -

3
3

percentage

Ele transforma o número de ponto flutuante em string de porcentagem.

percentage(0.2)

ele converte o número em string de porcentagem como -

20%
4

round

Ele arredonda um número de ponto flutuante.

round(3.77)

ele converte o número em valor de arredondamento como -

4
5

sqrt

Ele retorna a raiz quadrada de um número.

sqrt(25)

define a raiz quadrada de um número como -

5
6

abs

Ele fornece o valor absoluto de um número.

abs(30ft)

ele exibe o valor absoluto como -

30ft
7

sin

Ele retorna radianos em números.

sin(2)

ele calcula o valor do seno como -

0.90929742682
8

asin

Ele especifica o arco seno (inverso do seno) de um número que retorna um valor entre -pi / 2 e pi / 2.

asin(1)

ele calcula o valor asin como -

1.5707963267948966
9

cos

Ele retorna o cosseno do valor especificado e determina radianos em números sem unidades.

cos(2)

ele calcula o valor do cos como -

-0.4161468365471424
10

acos

Ele especifica arco cosseno (inverso do cosseno) de um número que retorna um valor entre 0 e pi.

acos(1)

ele calcula o valor acos como -

0
11

tan

Ele especifica a tangente do número.

tan(60)

ele calcula o valor de tan como -

0.320040389379563
12

atan

Ele especifica o arco tangente (inverso da tangente) de um número especificado.

atan(1)

ele exibe o valor atan como -

0.7853981633974483
13

pi

Ele retorna o valor pi.

pi()

determina o valor de pi como -

3.141592653589793
14

pow

Ele especifica o valor do primeiro argumento elevado à potência do segundo argumento.

pow(3,3)

especifica o valor da potência como -

27
15

mod

Ele retorna o módulo do primeiro argumento em relação ao segundo argumento. Ele também lida com números negativos e de ponto flutuante.

mod(7,3)

ele retorna o valor do módulo como -

1
16

min

Ele especifica o menor valor de um ou mais argumentos.

min(70,30,45,20)

ele retorna o valor mínimo como -

20
17

max

Ele especifica o valor mais alto de um ou mais argumentos.

max(70,30,45,20)

ele retorna o valor máximo como -

70

Neste capítulo, vamos entender a importância de Type Functionsem MENOS. Eles são usados ​​para determinar o tipo do valor.

A tabela a seguir mostra as funções de tipo usadas em LESS.

Sr. Não. Funções de tipo e descrição Exemplo
1

isnumber

Leva um valor como parâmetro e retorna verdadeiro , se for um número ou falso caso contrário.

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
2

isstring

Recebe um valor como parâmetro e retorna verdadeiro , se for uma string ou falso caso contrário.

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
3

iscolor

Leva um valor como parâmetro e retorna verdadeiro se o valor for uma cor ou falso se não for.

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
4

iskeyword

Ele recebe um valor como parâmetro e retorna verdadeiro , se o valor for uma palavra-chave, ou falso, se não for.

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
5

isurl

Ele recebe um valor como parâmetro e retorna verdadeiro , se o valor for url, ou falso, se não for.

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
6

ispixel

Ele recebe um valor como parâmetro e retorna verdadeiro , se o valor for um número em pixels ou falso caso contrário.

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
7

isem

Recebe um valor como parâmetro e retorna verdadeiro , se o valor for um valor em ou falso, se não for.

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
8

ispercentage

Toma um valor como parâmetro e retorna verdadeiro se o valor estiver em porcentagem ou falso , se o valor não estiver em porcentagem.

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
9

isunit

Ele retornará verdadeiro se um valor for um número em unidades especificadas fornecidas como parâmetro ou retornará falso se o valor não for um número em unidades especificadas.

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
10

isruleset

Ele recebe um valor como parâmetro e retorna verdadeiro , se o valor for um conjunto de regras, ou falso, caso contrário.

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

Descrição

LESS fornece várias funções de cores úteis para alterar e manipular cores de maneiras diferentes. LESS oferece suporte a algumas das funções de definição de cores, conforme mostrado na tabela abaixo -

Sr. Não. Descrição da função Exemplo
1

rgb

Ele cria cores a partir de valores de vermelho, verde e azul. Tem os seguintes parâmetros -

  • red - Contém número inteiro entre 0 - 255 ou porcentagem entre 0 - 100%.

  • green - Contém número inteiro entre 0 - 255 ou porcentagem entre 0 - 100%.

  • blue - Contém número inteiro entre 0 - 255 ou porcentagem entre 0 - 100%.

rgb(220,20,60)

ele converte cores com valores rgb como -

#dc143c
2

rgba

Ele determina a cor dos valores de vermelho, verde, azul e alfa. Possui os seguintes parâmetros -

  • red - Contém número inteiro entre 0 - 255 ou porcentagem entre 0 - 100%.

  • green - Contém número inteiro entre 0 - 255 ou porcentagem entre 0 - 100%.

  • blue - Contém número inteiro entre 0 - 255 ou porcentagem entre 0 - 100%.

  • alpha - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

rgba(220,20,60, 0.5)

ele converte o objeto de cor com valores rgba como -

rgba(220, 20, 60, 0.5)
3

argb

Ele define a representação hexadecimal da cor em #AARRGGBBformato. Ele usa o seguinte parâmetro -

  • color - Especifica o objeto de cor.

argb(rgba(176,23,31,0.5))

ele retorna a cor argb como -

#80b0171f
4

hsl

Ele gera a cor a partir dos valores de matiz, saturação e luminosidade. Tem os seguintes parâmetros -

  • hue - Contém número inteiro entre 0 - 360 que representa graus.

  • saturation - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

  • lightness - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

hsl(120,100%, 50%)

ele retorna o objeto de cor usando valores HSL como -

#00ff00
5

hsla

Ele gera a cor de matiz, saturação, luminosidade e valores alfa. Possui os seguintes parâmetros -

  • hue - Contém número inteiro entre 0 - 360 que representa graus.

  • saturation - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

  • lightness - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

  • alpha - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

hsla(0,100%,50%,0.5)

ele especifica o objeto de cor usando valores HSLA como -

rgba(255, 0, 0, 0.5);
6

hsv

Produz a cor a partir dos valores de matiz, saturação e valor. Ele contém os seguintes parâmetros -

  • hue - Contém número inteiro entre 0 - 360 que representa graus.

  • saturation - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

  • value - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

hsv(80,90%,70%)

ele converte o objeto de cor com valores hsv como -

#7db312
7

hsva

Ele produz a cor de matiz, saturação, valor e valores alfa. Ele usa os seguintes parâmetros -

  • hue - Contém número inteiro entre 0 - 360 que representa graus.

  • saturation - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

  • value - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

  • alpha - Contém número entre 0 - 1 ou porcentagem entre 0 - 100%.

hsva(80,90%,70%,0.6)

ele especifica o objeto de cor com valores hsva como -

rgba(125, 179, 18, 0.6)

Neste capítulo, entenderemos a importância das funções do canal de cores no LESS. O LESS suporta algumas funções embutidas que definem o valor de um canal. O canal define o valor dependendo da definição da cor. As cores HSL possuem canal de matiz, saturação e luminosidade e as cores RGB possuem canal de vermelho, verde e azul. A tabela a seguir lista todas as funções do canal de cores -

Sr. Não. Descrição da função Exemplo
1

hue

No espaço de cores HSL, o canal de matiz é extraído do objeto de cor.

background: hue(hsl(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 75;
2

saturation

No espaço de cores HSL, o canal de saturação é extraído do objeto de cor.

background: saturation(hsl(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 90%;
3

lightness

No espaço de cores HSL, o canal de luminosidade é extraído do objeto de cor.

background: lightness(hsl(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 30%;
4

hsvhue

No espaço de cores HSV, o canal de matiz é extraído do objeto de cor.

background: hsvhue(hsv(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 75;
5

hsvsaturation

No espaço de cores HSL, o canal de saturação é extraído do objeto de cor.

background: hsvsaturation(hsv(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 90%;
6

hsvvalue

No espaço de cores HSL, o canal de valor é extraído do objeto de cor.

background: hsvvalue(hsv(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 30%;
7

red

O canal vermelho é extraído do objeto colorido.

background: red(rgb(5, 15, 25));

Compila no CSS conforme mostrado abaixo -

background: 5;
8

green

O canal verde é extraído do objeto colorido.

background: green(rgb(5, 15, 25));

Compila no CSS conforme mostrado abaixo -

background: 15;
9

blue

O canal azul é extraído do objeto colorido.

background: blue(rgb(5, 15, 25));

Compila no CSS conforme mostrado abaixo -

background: 25;
10

alpha

O canal alfa é extraído do objeto de cor.

background: alpha(rgba(5, 15, 25, 1.5));

Compila no CSS conforme mostrado abaixo -

background: 2;
11

luma

o valor luma é calculado a partir de um objeto colorido.

background: luma(rgb(50, 250, 150));

Compila no CSS conforme mostrado abaixo -

background: 71.2513323%;
12

luminance

O valor de luma é calculado sem correção de gama.

background: luminance(rgb(50, 250, 150));

Compila no CSS conforme mostrado abaixo -

background: 78.53333333%;

Descrição

LESS fornece várias funções de operação úteis para alterar e manipular cores de maneiras diferentes e obter parâmetros nas mesmas unidades. LESS oferece suporte a algumas das funções de operação de cores, conforme mostrado na tabela abaixo -

Sr. Não. Diretivas e descrição
1 saturar

Varia a intensidade ou saturação de uma cor no elemento.

2 dessaturar

Ele diminui a intensidade ou saturação de uma cor no elemento.

3 iluminar

Aumenta a luminosidade de uma cor no elemento.

4 escurecer

Varia a intensidade ou saturação de uma cor no elemento.

5 aparecimento gradual

Aumenta a opacidade dos elementos selecionados.

6 desaparecer

Diminui a opacidade dos elementos selecionados.

7 desvaneça

É usado para definir a transparência de uma cor para os elementos selecionados.

8 girar

É usado para girar o ângulo de uma cor para os elementos selecionados.

9 misturar

Ele mistura as duas cores junto com a opacidade.

10 matiz

Ele mistura a cor com o branco conforme você diminui a proporção da cor.

11 sombra

Ele mistura a cor com o preto conforme você diminui a proporção da cor.

12 escala de cinza

Ele descarta a saturação de uma cor nos elementos selecionados.

13 contraste

Ele define o contraste para as cores no elemento.

Neste capítulo, vamos entender o Color Blending Functionsem MENOS. Essas são operações semelhantes usadas em editores de imagem como Photoshop, Fireworks ou GIMP, que combinam suas cores CSS com suas imagens.

A tabela a seguir mostra as funções de mistura de cores usadas no LESS.

Sr. Não. Funções e descrição
1 multiplicar

Ele multiplica duas cores e retorna uma cor resultante.

2 tela

Leva duas cores e retorna uma cor mais brilhante. Funciona em oposição à função de multiplicação .

3 sobreposição

Ele gera resultado combinando o efeito de multiplicação e tela .

4 luz suave

Funciona de forma semelhante à sobreposição, mas usa apenas uma parte da cor, que destaca suavemente a outra cor.

5 luz dura

Funciona de forma semelhante à sobreposição, mas o papel das cores é invertido.

6 diferença

Ele subtrai a segunda cor de entrada da primeira cor de entrada.

7 exclusão

Funciona de forma semelhante à função de diferença , mas com contraste inferior.

8 média

Ele calcula a média de duas cores de entrada por canal (RGB).

9 negação

Funciona em oposição à função de diferença , que subtrai a primeira cor da segunda cor.

Usando a linha de comando, podemos compilar o arquivo .less para .css .

Instalando o lessc para uso global

O seguinte comando é usado para instalar o lessc com npm (gerenciador de pacotes do nó) para tornar o lessc disponível globalmente.

npm install less -g

Você também pode adicionar uma versão específica após o nome do pacote. Por exemplonpm install [email protected] -g

Instalando para Desenvolvimento de Nó

O seguinte comando é usado para instalar a versão mais recente do lessc na pasta do seu projeto.

npm i less -save-dev

Ele também é adicionado ao devDependencies em seu projeto package.json.

Versões beta do lessc

É marcado como beta quando o lessc estrutura é publicada para npmAqui, a nova funcionalidade é desenvolvida periodicamente. less -v é usado para obter a versão atual.

Instalando uma versão de desenvolvimento não publicada do lessc

O commit-ish deve ser especificado, quando procedemos à instalação de uma versão não publicada de lessc e as instruções precisam ser seguidas para identificar um URL git como uma dependência. Isso garantirá que você esteja usando a versão correta do leesc para o seu projeto.

Uso do lado do servidor e da linha de comando

bin/lesscinclui binário no repositório. Ele funciona com Windows, OS X e nodejs em * nix.

Uso de linha de comando

A entrada é lida de stdin quando a fonte é definida como traço ou hífen (-).

lessc [option option = parameter ...]  [destination]

Por exemplo, podemos compilar .less para .css usando o seguinte comando -

lessc stylesheet.less stylesheet.css

Podemos compilar .less para .css por e reduza o resultado usando o seguinte comando.

lessc -x stylesheet.less stylesheet.css

Opções

A tabela a seguir lista as opções usadas no uso da linha de comando -

Sr. Não. Opções e descrição Comando
1

Help

A mensagem de ajuda é exibida com as opções disponíveis.

lessc -help
lessc -h
2

Include Paths

Inclui os caminhos disponíveis para a biblioteca. Esses caminhos podem ser referenciados de forma simples e relativa nos arquivos Less. Os caminhos nas janelas são separados por dois pontos (:) ou ponto e vírgula (;).

lessc --include-path = PATH1;PATH2
3

Makefile

Ele gera uma lista de dependências de importação de makefile para stdout como saída.

lessc -M
lessc --depends
4

No Color

Desativa a saída colorida.

lessc --no-color
5

No IE Compatibility

Ele desativa as verificações de compatibilidade do IE.

lessc --no-ie-compat
6

Disable Javascript

Desabilita o javascript em menos arquivos.

lessc --no-js
7

Lint

Ele verifica a sintaxe e relata erros sem qualquer saída.

lessc --lint
lessc -l
8

Silent

Ele interrompe forçosamente a exibição de mensagens de erro.

lessc --silent
lessc -s
9

Strict Imports

Força avalia as importações.

lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

Ele importa dos hosts HTTPS inseguros.

lessc --insecure
11

Version

Ele exibe o número da versão e sai.

lessc -version
lessc -v
12

Compress

Isso ajuda a remover os espaços em branco e compactar a saída.

lessc -x
lessc --compress
13

Source Map Output Filename

Ele gera o mapa de origem em menos. Se a opção sourcemap for definida sem o nome do arquivo, ela usará o mapa de extensão com o nome do arquivo Less como fonte.

lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

Rootpath é especificado e deve ser adicionado aos caminhos de arquivo Less dentro do mapa de origem e também ao arquivo de mapa que é especificado em seu css de saída.

lessc --source-map-rootpath = dev-files/
15

Source Map Basepath

É especificado um caminho que deve ser removido dos caminhos de saída. O caminho de base é o oposto da opção de caminho de raiz.

lessc --source-map-basepath = less-files/
16

Source Map Less Inline

Todos os arquivos Less devem ser incluídos no mapa de origem.

lessc --source-map-less-inline
17

Source Map Map Inline

Ele especifica que no css de saída o arquivo de mapa deve ser embutido.

lessc --source-map-map-inline
18

Source Map URL

Um URL tem permissão para substituir os pontos no arquivo de mapa no css.

lessc --source-map-url = ../my-map.json
19

Rootpath

Ele define caminhos para regravação de URL em importações e urls relativos.

lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

Em arquivos importados, a URL é reescrita de forma que a URL seja sempre relativa ao arquivo base.

lessc -ru
lessc --relative-urls
21

Strict Math

Ele processa todas as funções matemáticas em seu css. Por padrão, ele está desligado.

lessc -sm = on
lessc --strict-math = on
22

Strict Units

Ele permite unidades mistas.

lessc -su = on
lessc --strict-units = on
23

Global Variable

É definida uma variável que pode ser referenciada pelo arquivo.

lessc --global-var = "background = green"
24

Modify Variable

Isso é diferente da opção de variável global; ele move a declaração no final do seu arquivo less.

lessc --modify-var = "background = green"
25

URL Arguments

Para avançar para cada URL, um argumento pode ser especificado.

lessc --url-args = "arg736357"
26

Line Numbers

O mapeamento de origem embutido é gerado.

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

Ele carrega o plugin.

lessc --clean-css
lessc --plugin = clean-css = "advanced"

Less é usado no navegador quando você deseja compilar o arquivo Less dinamicamente quando necessário e não no servidor; isso ocorre porque less é um arquivo javascript grande.

Para começar, precisamos adicionar o script LESS para usar LESS no navegador -

<script src = "less.js"></script>

Para encontrar as tags de estilo na página, precisamos adicionar a seguinte linha na página. Ele também cria as tags de estilo com o css compilado.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Opções de configuração

Antes da tag de script, as opções podem ser definidas no objeto less programaticamente. Isso afetará todo o uso programático de less e as tags de link iniciais.

Por exemplo, podemos definir a opção conforme a seguir -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Também podemos definir a opção em outro formato na tag de script, conforme especificado abaixo -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Você também pode adicionar essas opções às tags de link.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Os pontos que precisam ser considerados para opções de atributos são -

  • window.less <script tag <link tag são o nível de importância.

  • Os atributos de dados não podem ser gravados em camelo; as opções de tag de link são representadas como opções de tempo.

  • Os atributos de dados com valores não string devem ser JSON válidos.

Modo Assistir

O modo de observação pode ser ativado definindo a opção env para desenvolvimento e chamando less.watch () após o arquivo less.js ser adicionado. Se você quiser que o modo de observação seja ativado temporariamente, adicione #! Watch ao URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Modificar Variáveis

A modificação do tempo de execução da variável LESS está habilitada. O arquivo LESS é recompilado quando o novo valor é chamado. O código a seguir mostra o uso básico de modificar variáveis ​​-

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Depurando

Podemos adicionar a opção ! DumpLineNumbers: mediaquery à opção url ou dumpLineNumbers como mencionado acima. A opção mediaquery pode ser usada com FireLESS (exibe o nome do arquivo LESS original e o número da linha dos estilos CSS gerados pelo LESS.)

Opções

Antes de carregar o arquivo de script less.js, as opções devem ser definidas em um objeto less global .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>
  • async- É um tipo booleano. Os arquivos importados são solicitados com a opção assíncrona ou não. Por padrão, é falso.

  • dumpLineNumbers- É um tipo de string. No arquivo css de saída, as informações da linha de origem são adicionadas quando dumpLineNumbers é definido. Ajuda a depurar a origem da regra específica.

  • env- É um tipo de string. O env pode ser executado em desenvolvimento ou produção. O desenvolvimento é definido automaticamente quando o URL do documento começa comfile:// ou está presente em sua máquina local.

  • errorReporting - Quando a compilação falha, o método de relatório de erros pode ser definido.

  • fileAsync- É um tipo booleano. Quando uma página está presente com um protocolo de arquivo, ela pode solicitar se deseja importar de forma assíncrona ou não.

  • functions - É o tipo de objeto.

  • logLevel- É um tipo de número. Ele exibe o nível de registro no console javascript.

    • 2: Informações e erros

    • 1: Erros

    • 0: nada

  • poll- No modo relógio, o tempo é exibido em milissegundos entre as pesquisas. É um tipo inteiro; por padrão, é definido como 1000.

  • relativeUrls- Os URLs se ajustam para serem relativos; por padrão, esta opção é definida como falsa. Isso significa que os URLs já são relativos ao arquivo sem entrada. É um tipo booleano.

  • globalVars- Insere a lista de variáveis ​​globais no código. A variável do tipo de string deve ser incluída entre aspas

  • modifyVars- É diferente da opção de variável global. Ele move a declaração no final do seu arquivo less.

  • rootpath - Ele define caminhos no início de cada recurso de URL.

  • useFileCache- Usa cache de arquivo por sessão. O cache em menos arquivos é usado para chamar modifyVars onde todos os menos arquivos não serão recuperados novamente.

LESS é compatível com navegadores diferentes. Suporta navegadores modernos como Google Chrome, Mozilla Firefox, Safari e Internet Explorer e permite reutilizar elementos CSS e escrever MENOS código com a mesma semântica. Você deve ter cuidado com as implicações de desempenho ao usar LESS no lado do cliente e ao exibir o JavaScript para evitar quaisquer problemas cosméticos, como

  • Erros de ortografia,
  • Mudanças de cor,
  • Texture
  • Look
  • Links, etc.

Compile os arquivos MENOS no lado do servidor para melhorar os níveis de desempenho do site.

O PhantomJS não implementa a função Function.prototype.bind , então você precisa usar o mecanismo es5 shim JavaScript para executar no PhantomJS. Os usuários podem fazer ajustes com variáveis ​​para afetar o tema e mostrá-los em tempo real usando MENOS do lado do cliente na produção.

Se você deseja executar o LESS em navegadores mais antigos, use o mecanismo es-5 shim JavaScript, que adiciona recursos de JavaScript compatíveis com o LESS. Você pode usar atributos no script ou tags de link usando JSON.parse, que deve ser suportado pelo navegador.

Neste capítulo, vamos entender como um Plugin pode ser carregado para expandir a funcionalidade do site. Plugins podem ser usados ​​para tornar seu trabalho mais fácil.

Linha de comando

Para instalar o plugin usando a linha de comando, você primeiro precisa instalar o plugin lessc. O plugin pode ser instalado usando less-plugin no início. A seguinte linha de comando irá ajudá-lo a instalar o plugin clean-css -

npm install less-plugin-clean-css

Diretamente, você pode usar o plugin instalado usando o seguinte comando -

lessc --plugin = path_to_plugin = options

Usando um Plugin em Código

No Node, o plugin é necessário e é passado em um array como um plugin de opção para o less.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

No navegador

Antes do script less.js, o autor do plugin deve incluir o arquivo javascript na página.

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Lista de menos plugins

A tabela a seguir lista os plug-ins disponíveis no LESS.

Pós-processador / Plug-ins de recursos

Sr. Não. Plugins e descrição
1 Autoprefixer

É usado para adicionar prefixos ao CSS após a tradução do LESS.

2 CSScomb

Ajuda a melhorar a manutenção da sua folha de estilo.

3 clean-css

Ele minimiza a saída CSS de LESS.

4 CSSWring

Ele compacta ou minimiza a saída CSS do LESS.

5 css-flip

É usado para gerar o CSS da esquerda para a direita (LTR) ou da direita para a esquerda (RTL).

6 funções

Ele escreve a função de LESS no próprio LESS.

7 glob

É usado para importar vários arquivos.

8 group-css-media-queries

Ele faz o pós-processamento para menos.

9 inline-urls

Converte automaticamente o URL em dados uri.

10 npm-import

Ele importa do pacote npm por menos.

11 por favor

É usado para pós-processar Less.

12 rtl

LESS é invertido de ltr (da esquerda para a direita) para rtl (da direita para a esquerda).

Importadores de framework / biblioteca

Sr. Não. Importadores e descrição
1 Bootstrap

O código LESS de bootstrap é importado antes do código LESS personalizado.

2 Bower Resolve

Arquivos LESS são importados dos pacotes do Bower.

3 CSS cardinal para less.js

Antes do código LESS personalizado, o código LESS para Cardinal é importado.

4 Flexbox Grid

Importador de biblioteca ou Framework mais comumente importado.

5 Sistema de grade flexível

Importa o Sistema de Rede Flexível.

6 Iônico

Ele importa a estrutura iônica.

7 Lesshat

Ele importa os mixins Lesshat.

8 Esqueleto

Ele importa o esqueleto menos código.

Bibliotecas de funções

Sr. Não. Importadores e descrição
1 funções de cores avançadas

É usado para encontrar cores mais contrastantes.

2 cubo helicoidal

Usando o valor de correção de gama de 1, a função cubehelix pode retornar uma cor entre as duas cores.

3 listas

Lista a biblioteca de funções de manipulação.

Para Autores de Plugin

MENOS permite que um autor combine com menos.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager fornece um titular que pode adicionar gerenciadores de arquivos, pós-processadores ou visitantes.

  • setOptions função passa a string.

  • printUsage função é usada para explicar as opções.

O principal ponto de uso programático no LESS é a função less.render. Esta função usa o seguinte formato em MENOS -

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

a função também pode ser escrita da seguinte maneira -

less.render(css, options, function(error, output) {})

As opções são um argumento opcional que retorna umpromise quando você não especifica o retorno de chamada e retorna um promisequando você especifica o retorno de chamada. Você pode exibir o arquivo lendo-o em uma string e definir os campos de nome de arquivo do arquivo principal.

O Sourcemap opção permite opções Sourcemap conjunto como sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles e sourceMapFileInline . O ponto que precisa ser considerado é que o Sourcemap opção não está disponível para o less.js.

Você pode obter acesso ao registro adicionando um ouvinte, conforme mostrado no formato abaixo -

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

As funções definidas acima são opcionais. Se um erro for exibido, ele passará o erro paracallback ou promisepresente no less.render .

Neste capítulo, entenderemos a importância dos compiladores online no LESS. Compiladores online são usados ​​para compilar menos código em código css. Ferramentas de compiladores online ajudam facilmente a gerar o código css. A seguir estão os menos compiladores online disponíveis -

  • winless.org/online-less-compiler

  • lesstester.com

  • dopefly.com/less-converte

  • lessphp.gpeasy.com/demo

  • leafo.net/lessphp/editor

  • estFiddle

IDEs / Playgrounds da Web on-line com menos suporte

A seguir estão os IDEs da Web online disponíveis com menos suporte.

Sr. Não. IDEs e descrição da Web online
1 CSSDeck Labs

Este é um lugar onde você pode facilmente criar casos de teste que envolvem código HTML, CSS, JS.

2

CodePen

Este é um playground para a web de front-end.

3 Salada de Violino

Este é um lugar onde você pode adicionar um código existente no ambiente.

4 JS Bin

Isso ajuda o código Javascript e CSS.

5 jsFiddle

Este é um editor da web online.

Neste capítulo, entenderemos as GUIs do LESS . Você pode usar diferentes ferramentas LESS para sua plataforma. Para uso da linha de comando e ferramentas, clique neste link .

A tabela a seguir lista os compiladores GUI que oferecem suporte a várias plataformas.

Sr. Não. Ferramentas e descrição
1 Crunch 2!

Suporta plataformas como Windows, Mac e Linux . Ele fornece editor com compilação integrada.

2

Mixture

É uma ferramenta de prototipagem rápida e geração estática de sites usada por designers e desenvolvedores. É rápido, eficiente e funciona bem com o seu editor. Ele reúne uma coleção de ferramentas e práticas recomendadas incríveis.

3 SIMPLES

É um compilador LESS minimalista. Ele fornece funcionalidade de arrastar, soltar e compilar. SimpLESS oferece suporte à prefixação de seu CSS usando prefixr, que é o recurso exclusivo do SimpLESS. Ele é construído na plataforma Titanium.

4 Coala

É usado para compilar LESS, SASS e CoffeeScript. Ele fornece recursos como suporte para notificação de erro de compilação e suporte para opções de compilação.

A tabela a seguir lista os compiladores GUI que oferecem suporte à plataforma Windows.

Sr. Não. Ferramentas e descrição
1 Prepros

É uma ferramenta que compila LESS, SASS, Compass, Stylus, Jade e muito mais.

2 Sem ganho

Inicialmente era um clone do LESS.app, ele tem várias configurações e tem uma abordagem mais completa de recursos. Ele suporta começar com argumentos de linha de comando.

A tabela a seguir lista os compiladores GUI que oferecem suporte à plataforma OS X.

Sr. Não. Ferramentas e descrição
1 CodeKit

t é o sucessor de LESS.app e suporta LESS entre muitas outras linguagens de processamento como SASS, Jade, Markdown e mais.

2 LiveReload

Ele edita CSS e altera imagens instantaneamente. SASS, LESS, CoffeeScript e outros funcionam bem.

A tabela a seguir lista os compiladores GUI que oferecem suporte à plataforma OS X.

Sr. Não. Ferramentas e descrição
1 Plessc

É interface gráfica para o lessc. Possui recursos como visualizador de log, compilação automática, abertura do arquivo LESS com o editor escolhido e suporte a mapa de origem.

Neste capítulo, entenderemos a importância dos editores e plug - ins no LESS. Um Editor é um sistema ou programa que permite ao usuário editar texto. Plugin é um software usado para expandir a funcionalidade do site.

Vamos agora discutir editores e IDEs para LESS.

Sr. Não. Editores e IDEs e descrição
1 Crunch!

Suporta plataformas cruzadas como Windows, Mac e Linux . Ele fornece editor com compilação integrada.

2 Mindscape Web Workbench

Ele fornece edição CoffeeScript, SASS, Compass e LESS e torna o desenvolvimento web moderno fácil no Visual Studio.

3 NetBeans

É um IDE de código aberto baseado em Java. Isso ajuda no desenvolvimento rápido de seus aplicativos para desktop, móveis e web, bem como aplicativos HTML5 que envolvem HTML, JavaScript e CSS.

4 TextMate

É um editor de texto gráfico de propósito geral para Mac OS X. Ele apresenta personalizações declarativas, macros graváveis, fragmentos, integração de shell, guias de documentos abertos e um sistema de pacote extensível.

5 Vim

O pacote vim adiciona funcionalidades como recuo, destaque e preenchimento automático para a linguagem de folha de estilo dinâmica LESS.

6 Emacs

Ele contém less-css-model que fornece um modo Emacs para LESS CSS (lesscss.org); Emacs suporta compilar ao salvar.

7 jetBrains WebStorm e PhpStorm

WebStrom é um IDE leve e poderoso. Ele está perfeitamente equipado para o desenvolvimento complexo do lado do cliente e do servidor com Node.js. PhpStorm é um IDE de PHP, que oferece suporte a compreensão profunda de código e fornece assistência de codificação de alto nível e suporte para todas as principais ferramentas e estruturas.

8 Colchetes

É um editor de código leve, poderoso e de código aberto que ajuda web designers e desenvolvedores front-end.

9 CodeLobster

É um ambiente de desenvolvimento integrado portátil (IDE) principalmente para PHP. Ele também suporta HTML, CSS e desenvolvimento de JavaScript e plugins estão disponíveis para Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii e CakePHP.

10 IDE KineticWing

É um IDE rápido, limpo, leve e portátil. É um pacote de desenvolvimento em tamanho real que ajuda você a trabalhar de forma inteligente e rápida.

11 nodeMirror

É um IDE de código aberto e facilmente personalizável. Ele utiliza CodeMirror.net, pty.js e outras bibliotecas.

12 Ferramentas de kit HTML

Este é um editor da web moderno para HTML5, CSS3, JavaScript e muito mais. Com isso, você pode editar, visualizar, validar publicar e gerenciar projetos de um editor moderno compatível com os padrões.

Sublime Text 2 e 3

O texto sublime oferece opções diferentes para LESS, conforme listado na tabela a seguir -

Sr. Não. Opções e descrição
1 Menos sublime

A sintaxe LESS para texto sublime fornece destaque de sintaxe para arquivos .less , junto com trechos.

2 Sublime-Less-to-CSS

Plugin de texto sublime 2 e 3 para compilar arquivos .less para CSS ao salvar. Isso requerlessc instalado no PATH.

3 Menos construção sublime

Sistema de compilação LESS para texto sublime 2 que fornece dois sistemas de compilação para arquivos LESS, ambos minimizados e não minimizados.

4

SublimeOnSaveBuild

É um plug-in simples para texto sublime 2 para acionar uma compilação quando você clica em Salvar. Funciona bem com pré-processadores como LESS, Compass e quaisquer outros.

Eclipse

O Eclipse tem dois plug-ins para LESS, conforme listado na tabela a seguir -

Sr. Não. Plugins e descrição
1 Eclipse Less Plugin

Ao estender o IDE Eclipse, este plug-in fornece recursos úteis para editar e compilar folhas de estilo LESS.

2 Plugin Transpiler

Este plugin do Eclipse transpila automaticamente seus arquivos como LESS, SASS, CoffeeScript, etc.

Estúdio visual

O Visual Studio tem as seguintes opções diferentes para LESS -

Sr. Não. Opções e descrição
1 CSS é menos

Esta extensão abre menos arquivos com o serviço de linguagem CSS.

2 Web Essentials 2012

Esta extensão permite que você execute tarefas comuns com muito mais facilidade e adiciona recursos úteis ao Visual Studio para desenvolvedores da web.

3 Web Essentials 2013

Ele estende o Visual Studio com muitos recursos novos que não são específicos para uma linguagem ou editor específico.

4 Ferramentas da Web 2013

Isso ajuda você nas tarefas de desenvolvimento que envolvem ASP.NET

Dreamweaver

Os pontos a seguir devem ser considerados ao trabalhar com o Dreamweaver .

  • É um aplicativo da Adobe usado por designers e desenvolvedores da Web para criar aplicativos e sites.

  • É capaz de funcionar em várias plataformas, incluindo navegadores, dispositivos e tablets.
  • Os designers da Web usam o Dreamweaver para criar protótipos de sites.

  • DMXzone Less CSS Compiler faz todos os recursos de LESS CSS diretamente no Dreamweaver.

Notepad ++ 6.x

Os pontos a seguir devem ser considerados ao trabalhar no Notepad ++ .

  • Notepad ++ é um editor de texto e editor de código-fonte gratuito que suporta edição em abas, ou seja, trabalhar com vários arquivos abertos em uma única janela.

  • LESS para Notepad ++ é um arquivo xml que fornece destaque de sintaxe ou coloração para arquivos .less. Para obter mais informações, clique neste link .

  • Para instalar o Notepad ++ clique neste link .

Compiladores Node.js

A seguir estão os compiladores Node.js usados ​​para LESS.

grunt-contrib-less

Grunt é um executor de tarefas do Node. Ele irá compilar suas folhas de estilo toda vez que você enviar alterações para seus arquivos LESS.

sem montar

assemble-less é um plugin grunt poderoso para compilar arquivos LESS para CSS. A menor tarefa puxa o modelo JSON e Lo - traço (sublinhado) para definir os pacotes LESS, componentes de IU, folhas de estilo compactadas ou temas.

sem gole

É MENOS plugin para Gulp. gulp-minify-css é usado para minimizar seu CSS. gulp-sourcemaps é usado para gerar a biblioteca sourcemaps.

RECREIO

É uma ferramenta de código aberto que se baseia no LESS e ajuda a otimizar seu código CSS. Ele mantém o código CSS livre de erros, limpo e gerenciável.

autoless

É um observador de arquivos .less . Ele contém rastreamento de dependência e notificação de plataforma cruzada.

Conectar Middleware para Less.js

É usado para permitir o processamento para conectar a estrutura JS de arquivos LESS. Ele compila o arquivo de origem mediante solicitação e armazena em cache os dados compilados para a próxima solicitação.

Outras Tecnologias

A seguir estão algumas outras tecnologias que ajudam a compilar um código LESS.

Wro4j Runner CLI

Você pode baixar o wro4j-runner.jar e pode compilar seu código LESS em CSS usando o seguinte comando -

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

Você pode visitar o seguinte link para saber mais sobre Wro4j Runner CLI

CSS :: LESSp

Este módulo é usado para analisar e compilar o arquivo LESS em um arquivo CSS. A seguir está o comando usado para compilar -

lessp.pl styles.less > styles.css

Você pode visitar o seguinte link para saber mais sobre CSS :: LESSp

Windows Script Host

A seguir está o compilador de linha de comando que será executado no Windows.

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

Você pode visitar o seguinte link para saber mais sobre Less.js para Windows

sem ponto

A seguir está um compilador de linha de comando para executar sem ponto no Windows.

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

Você pode visitar o seguinte link para saber mais sobre dotless

Componentes e estruturas de interface do usuário / tema

LESS oferece suporte a algumas das estruturas de IU / Tema, conforme listado na tabela a seguir -

Sr. Não. Estrutura e descrição
1 1pxdeep

É um tema plano do Bootstrap 3 que fornece controles de esquema de cores poderosos.

2 Bootflat

É uma estrutura de código aberto baseada no Bootstrap.

3 BootPress

É uma estrutura PHP baseada em arquivo simples CMS

4 Bootstrap

É uma poderosa estrutura de front-end móvel para um desenvolvimento web mais rápido e fácil.

5 Tema do Bootstrap a11y

Ele fornece acessibilidade fácil para desenvolvimento web.

6 Bootswatch

É um tema de código aberto que fornece temas gratuitos para Bootstrap.

7 Cardeal

É uma estrutura CSS que prioriza os dispositivos móveis que permite manter CSS para sites, interfaces de usuário e aplicativos responsivos.

8 CSSHorus

É uma biblioteca que facilita o desenvolvimento de sites mobile.

9 UI plana grátis

É baseado no Bootstrap 3, que contém componentes básicos e complexos e fornece design de tema para o Bootstrap.

10 tamanho da frente

É uma estrutura de front-end que contém um conjunto de ferramentas para construir widgets.

11

InContent

Ele especifica a descrição da imagem usando CSS3 e SASS / LESS.

12 Tinta

Ele cria interfaces da web responsivas.

13 JBST

É um poderoso framework de tema usado para criar temas filhos para WordPress e usado como construtor de sites autônomo.

14 KNACSS

É usado para desenvolver projetos HTML / CSS usando folhas de estilo responsivas e extensíveis.

15 Kube

É uma estrutura CSS usada por designers e desenvolvedores profissionais.

16 Metro UI CSS

É uma estrutura de frontend usada para criar o Windows Metro Style nos projetos.

17 Pré

É um framework CSS que usa LESS.

18 prelúdio

É um framework CSS de front-end que usa LESS.

19 Esquema

É uma estrutura leve e ágil que ajuda a construir sites complexos.

20 IU semântica

É uma estrutura de interface de usuário que cria layouts responsivos usando HTML.

21 UIkit

É uma estrutura de front-end que inclui componentes HTML, CSS e JS e é fácil de usar e desenvolver aplicativos da web.

22

ngBoilerplate

É um sistema de construção baseado em grunhido usado para projetos AngularJS.

23 menos ferroviário

É uma linguagem de folha de estilo dinâmica que usa Less.js para projetos Rails.

24 Pequenino

É uma estrutura de frontend que contém componentes de bootstrap HTML, CSS e JavaScript para o desenvolvimento de projetos web responsivos.

Sistemas de grade

LESS suporta estruturas de sistemas de grade conforme listado na tabela a seguir -

Sr. Não. Estrutura e descrição
1 Sistema de grade flexível

É um framework CSS que cria projetos web de forma flexível.

2 adaptGrid

É um sistema de grade responsivo para o desenvolvimento de aplicações web.

3 Fluidable

É um sistema de grade responsivo leve baseado no pré-processador LESS.

4 Golden Grid System

É um sistema de grade para design responsivo.

5 MENOS Grade Zen

Ele é usado para resolver problemas de arredondamento de sub pixel.

6 Order.less

É uma biblioteca LESS usada para alinhamento, sistema de grade e escalas modulares.

7 responsavelmente

É um sistema de grade personalizável e autônomo.

8 Boilerplate responsivo

É um sistema de grade leve usado para criar web design responsivo para os sites.

9 Semantic.gs

É a distribuição padrão do navegador da web para seu sistema operacional.

Bibliotecas Mixin

LESS fornece bibliotecas de mixin conforme listado na tabela a seguir -

Sr. Não. Estrutura e descrição
1 3L

Ele fornece os recursos CSS3 mais recentes para o pré-processador LESS.

2 animar

É uma biblioteca usada para animações de navegador usadas nos projetos.

3 Clearless

Ele usa mixins LESS reutilizáveis ​​sem destruir o estilo e criar tamanho excessivo nas folhas de estilo.

4 Css3LessPlease

Ele converte css3please.com em MENOS mixins e o elemento obterá mudanças instantâneas quando você executar o CSS.

5 CssEffects

Ele fornece efeitos de estilo CSS escritos como mixins MENOS.

6 Cssowl

É uma biblioteca mixin que suporta LESS, SASS e Stylus.

7 cubo.less

É um cubo animado 3D criado usando apenas CSS.

8 tRRtoolbelt.less

É uma biblioteca que fornece mixins e funções para realizar ações em arquivos LESS.

9 Husa

É baseado em LESS, o que permite escrever código LESS de forma mais eficiente.

10 Hexágono

Ele cria hexágonos CSS com tamanho e cor.

11 sem teto

É uma biblioteca mixin que contém funções úteis para o Less.js.

12

LESS Elements

É uma coleção de mixins para o pré-processador LESS.

13 MENOS chapéu

É uma biblioteca mixin que ajuda a exportar CSS para todos os navegadores e cria um número de sombras, gradientes e animações etc.

14 Lessley

É um conjunto de testes escrito em LESS.

15 LESS-bidi

É uma coleção de mixins MENOS que fornece estilo bidirecional sem duplicação de código.

16

LESS-Mix

É uma biblioteca mixin escrita em LESS.

17 media-query-to-type

Ele é usado para criar consultas de mídia que permitem que o Internet Explorer 8 e versões anteriores acessem o conteúdo.

18 More-Colors.less

Ele fornece variáveis ​​para manipulação de cores ao projetar aplicativos da web.

19 mais ou menos

É uma biblioteca que permite escrever código CSS para compatibilidade entre navegadores.

20 Mais ou menos

É uma combinação de Compass e Twitter Bootstrap que fornece mais para MENOS usando CSS3 e mixins de navegador cruzado.

21 mais ou menos

Ele fornece mixins poderosos para less.js.

22 normalize.less

Ele fornece CSS normalizado usando LESS.

23 Oban

É uma coleção de mixins que acelera o processo de desenvolvimento da aplicação web.

24 Pré-inicialização

É um conjunto de serviços LESS que usa mixins e variáveis ​​para escrever melhor CSS e é formado a partir do Bootstrap.

25 prelúdio-mixins

É uma biblioteca de mixin MENOS.

26 Shape.LESS

Ele fornece vários mixins para especificar várias formas para a aplicação.