最近在开发中使用了less,总结一下less一些常用的方法:
1.可以定义变量 SASS允许使用变量,所有变量以$开头。 $blue : #1875e7; div { color : $blue; } 如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。 $side : left; .rounded { border-#{$side}-radius: 5px; } 2.可以嵌套 SASS允许选择器嵌套。比如,下面的CSS代码: div h1 { color : red; } 可以写成: div { hi { color:red; } } 3,继承 SASS允许一个选择器,继承另一个选择器。比如,现有class1: .class1 { border: 1px solid #ddd; } class2要继承class1,就要使用@extend命令: .class2 { @extend .class1; font-size:120%; } 4.可以混入 Mixin有点像C语言的宏(macro),是可以重用的代码块。 使用@mixin命令,定义一个代码块。 @mixin left { float: left; margin-left: 10px; } 使用@include命令,调用这个mixin。 div { @include left; } mixin的强大之处,在于可以指定参数和缺省值。 @mixin left($value: 10px) { float: left; margin-right: $value; } 使用的时候,根据需要加入参数: div { @include left(20px); } 5.可以定义函数 SASS允许用户编写自己的函数。 @function double($n) { @return $n * 2; } #sidebar { double(5px); }