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 =. |
Ele produz string de escape como - |
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. |
Ele produz string de escape como - |
3 | % format Esta função formata uma string. Ele pode ser escrito com o seguinte formato - |
Ele produz a string formatada como - |
4 | replace É usado para substituir o texto em uma string. Ele usa alguns parâmetros -
|
Ele substitui a string como - |
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. |
ele arredonda o número para - |
2 | floor Ele arredonda o número para o próximo inteiro mais baixo. |
ele arredonda o número para - |
3 | percentage Ele transforma o número de ponto flutuante em string de porcentagem. |
ele converte o número em string de porcentagem como - |
4 | round Ele arredonda um número de ponto flutuante. |
ele converte o número em valor de arredondamento como - |
5 | sqrt Ele retorna a raiz quadrada de um número. |
define a raiz quadrada de um número como - |
6 | abs Ele fornece o valor absoluto de um número. |
ele exibe o valor absoluto como - |
7 | sin Ele retorna radianos em números. |
ele calcula o valor do seno como - |
8 | asin Ele especifica o arco seno (inverso do seno) de um número que retorna um valor entre -pi / 2 e pi / 2. |
ele calcula o valor asin como - |
9 | cos Ele retorna o cosseno do valor especificado e determina radianos em números sem unidades. |
ele calcula o valor do cos como - |
10 | acos Ele especifica arco cosseno (inverso do cosseno) de um número que retorna um valor entre 0 e pi. |
ele calcula o valor acos como - |
11 | tan Ele especifica a tangente do número. |
ele calcula o valor de tan como - |
12 | atan Ele especifica o arco tangente (inverso da tangente) de um número especificado. |
ele exibe o valor atan como - |
13 | pi Ele retorna o valor pi. |
determina o valor de pi como - |
14 | pow Ele especifica o valor do primeiro argumento elevado à potência do segundo argumento. |
especifica o valor da potência como - |
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. |
ele retorna o valor do módulo como - |
16 | min Ele especifica o menor valor de um ou mais argumentos. |
ele retorna o valor mínimo como - |
17 | max Ele especifica o valor mais alto de um ou mais argumentos. |
ele retorna o valor máximo como - |
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. |
|
2 | isstring Recebe um valor como parâmetro e retorna verdadeiro , se for uma string ou falso caso contrário. |
|
3 | iscolor Leva um valor como parâmetro e retorna verdadeiro se o valor for uma cor ou falso se não for. |
|
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. |
|
5 | isurl Ele recebe um valor como parâmetro e retorna verdadeiro , se o valor for url, ou falso, se não for. |
|
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. |
|
7 | isem Recebe um valor como parâmetro e retorna verdadeiro , se o valor for um valor em ou falso, se não for. |
|
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. |
|
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. |
|
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. |
|
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 -
|
ele converte cores com valores rgb como - |
2 | rgba Ele determina a cor dos valores de vermelho, verde, azul e alfa. Possui os seguintes parâmetros -
|
ele converte o objeto de cor com valores rgba como - |
3 | argb Ele define a representação hexadecimal da cor em #AARRGGBBformato. Ele usa o seguinte parâmetro -
|
ele retorna a cor argb como - |
4 | hsl Ele gera a cor a partir dos valores de matiz, saturação e luminosidade. Tem os seguintes parâmetros -
|
ele retorna o objeto de cor usando valores HSL como - |
5 | hsla Ele gera a cor de matiz, saturação, luminosidade e valores alfa. Possui os seguintes parâmetros -
|
ele especifica o objeto de cor usando valores HSLA como - |
6 | hsv Produz a cor a partir dos valores de matiz, saturação e valor. Ele contém os seguintes parâmetros -
|
ele converte o objeto de cor com valores hsv como - |
7 | hsva Ele produz a cor de matiz, saturação, valor e valores alfa. Ele usa os seguintes parâmetros -
|
ele especifica o objeto de cor com valores hsva como - |
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. |
Compila no CSS conforme mostrado abaixo - |
2 | saturation No espaço de cores HSL, o canal de saturação é extraído do objeto de cor. |
Compila no CSS conforme mostrado abaixo - |
3 | lightness No espaço de cores HSL, o canal de luminosidade é extraído do objeto de cor. |
Compila no CSS conforme mostrado abaixo - |
4 | hsvhue No espaço de cores HSV, o canal de matiz é extraído do objeto de cor. |
Compila no CSS conforme mostrado abaixo - |
5 | hsvsaturation No espaço de cores HSL, o canal de saturação é extraído do objeto de cor. |
Compila no CSS conforme mostrado abaixo - |
6 | hsvvalue No espaço de cores HSL, o canal de valor é extraído do objeto de cor. |
Compila no CSS conforme mostrado abaixo - |
7 | red O canal vermelho é extraído do objeto colorido. |
Compila no CSS conforme mostrado abaixo - |
8 | green O canal verde é extraído do objeto colorido. |
Compila no CSS conforme mostrado abaixo - |
9 | blue O canal azul é extraído do objeto colorido. |
Compila no CSS conforme mostrado abaixo - |
10 | alpha O canal alfa é extraído do objeto de cor. |
Compila no CSS conforme mostrado abaixo - |
11 | luma o valor luma é calculado a partir de um objeto colorido. |
Compila no CSS conforme mostrado abaixo - |
12 | luminance O valor de luma é calculado sem correção de gama. |
Compila no CSS conforme mostrado abaixo - |
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 ...]
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. |
|
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 (;). |
|
3 | Makefile Ele gera uma lista de dependências de importação de makefile para stdout como saída. |
|
4 | No Color Desativa a saída colorida. |
|
5 | No IE Compatibility Ele desativa as verificações de compatibilidade do IE. |
|
6 | Disable Javascript Desabilita o javascript em menos arquivos. |
|
7 | Lint Ele verifica a sintaxe e relata erros sem qualquer saída. |
|
8 | Silent Ele interrompe forçosamente a exibição de mensagens de erro. |
|
9 | Strict Imports Força avalia as importações. |
|
10 | Allow Imports from Insecure HTTPS Hosts Ele importa dos hosts HTTPS inseguros. |
|
11 | Version Ele exibe o número da versão e sai. |
|
12 | Compress Isso ajuda a remover os espaços em branco e compactar a saída. |
|
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. |
|
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. |
|
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. |
|
16 | Source Map Less Inline Todos os arquivos Less devem ser incluídos no mapa de origem. |
|
17 | Source Map Map Inline Ele especifica que no css de saída o arquivo de mapa deve ser embutido. |
|
18 | Source Map URL Um URL tem permissão para substituir os pontos no arquivo de mapa no css. |
|
19 | Rootpath Ele define caminhos para regravação de URL em importações e urls relativos. |
|
20 | Relative URLs Em arquivos importados, a URL é reescrita de forma que a URL seja sempre relativa ao arquivo base. |
|
21 | Strict Math Ele processa todas as funções matemáticas em seu css. Por padrão, ele está desligado. |
|
22 | Strict Units Ele permite unidades mistas. |
|
23 | Global Variable É definida uma variável que pode ser referenciada pelo arquivo. |
|
24 | Modify Variable Isso é diferente da opção de variável global; ele move a declaração no final do seu arquivo less. |
|
25 | URL Arguments Para avançar para cada URL, um argumento pode ser especificado. |
|
26 | Line Numbers O mapeamento de origem embutido é gerado. |
|
27 | Plugin Ele carrega o plugin. |
|
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. |