LESS - Loops
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.