MENOS - Estender

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 Extend 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 na extensão, 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	Definição do escopo / extensão 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 pelo css.
3	Combinar Estilos / Um Mixin Mais Avançado Usando extend, podemos combinar os mesmos estilos de um seletor particular em outro seletor.

↰ Previous page Next page ↱