LESS 合并空間
描述
這是merge的另一個特性,它添加了屬性值和空格。
例子
下面的示例演示了在LESS文件中使用合并空間功能:
<!doctype html> <head> <title>Merge Space</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h2>Example of Merge Space</h2> <p class="class">Hello World!!!Welcome to Tutorialspoint...</p> </body> </html>
接下來,創(chuàng)建文件 style.less 。
style.less
.mixin() { transform+_: scale(1); } .class { .mixin(); transform+_: rotate(2deg); }
合并使用+或+ _標(biāo)志來避開每個連接上意外的連接。 transform 屬性修改CSS格式化模型的空間,并可用于旋轉(zhuǎn),縮放,移動等元素。
您可以使用以下命令將 style.less 編譯為 style.css :
lessc style.less style.css
接下來執(zhí)行上面的命令,它將用下面的代碼自動創(chuàng)建 style.css 文件:
style.css
.class { transform: scale(1) rotate(2deg); }
輸出
讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:
在merge_space.html文件中保存上述HTML代碼。
在瀏覽器中打開此HTML文件,將顯示如下輸出。