Less(Learner Style Sheets)是向后兼容css扩展语言。
变量(Variables)
1 @width: 10px; 2 @height: @width + 10px; 3 header{ 4 width: @width; 5 height: @height; 6 }
编译后等同于:
1 header{ 2 width: 10px; 3 height:20px; 4 }
混合(Mixins)
1 .bordered{ 2 border-top: 1px solid black; 3 border-bottom: 1px solid black; 4 } 5 6 a{ 7 .bordered(); 8 }
嵌套(Nesting)
1 #aa{ 2 color: black; 3 #bb{ 4 font-size: 20px; 5 } 6 .cc{ 7 width: 300px; 8 } 9 }
#aa{ color: black; #bb{ font-size: 20px; } .cc{ width: 300px; &:hover{ height:300px; } } }
适配屏幕(@supports、@media)
1 .component { 2 width: 300px; 3 @media (min-width: 768px) { 4 width: 600px; 5 @media (min-resolution: 192dpi) { 6 background-image: url(/img/retina2x.png); 7 } 8 } 9 @media (min-width: 1280px) { 10 width: 800px; 11 } 12 }
运算(Operations)
1 @color: #224488 / 2; //results in #112244 2 3 @var: 50vh/2; 4 width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
1 @min768: (min-width: 768px); 2 .element { 3 @media @min768 { 4 font-size: 1.2rem; 5 } 6 }
函数(Functions)
1 #bundle() { 2 .button { 3 display: block; 4 border: 1px solid black; 5 background-color: grey; 6 &:hover { 7 background-color: white; 8 } 9 } 10 .tab { ... } 11 .citation { ... } 12 }
1 #header a { 2 color: orange; 3 #bundle.button(); // can also be written as #bundle > .button 4 }
Maps
1 #colors() { 2 primary: blue; 3 secondary: green; 4 } 5 6 .button { 7 color: #colors[primary]; 8 border: 1px solid #colors[secondary]; 9 }
作用域(Scope)
1 @var: red; 2 3 #page { 4 #header { 5 color: @var; // white 6 } 7 @var: white; 8 }
1 @import "xx.css";