注释
//单行注释
/*
多行注释
多行注释
多行注释
*/
变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为:
#header {
width: 10px;
height: 20px;
}
混合
混合(Mixin)将一组属性从一个规则集混入到另一个规则集
第一种:将.border的样式直接引入.container,直接引用即可。
.container{
width: 100px;
height: 100px;
background: red;
.border;
}
.border{
border: 1px solid black;
}
编译后的CSS代码
.container {
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
}
.border {
border: 1px solid black;
}
第二种:将.border(参数)引进.container
.container{
width: 100px;
height: 100px;
background: red;
.border(2px);
}
.border(@borderWidth){
border: solid black @borderWidth;
}
编译后的CSS代码
.container {
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
}
.border {
border :solid black 2px;
}
第三种:基于第二种,将参数给定默认参数
.border(默认参数)传入.container
不给参数就按照默认参数,给参数就按照给定参数。
.container{
width: 100px;
height: 100px;
background: red;
.border();
}
.border(@borderWidth: 10px;){
border: solid black @borderWidth;
}
编译后的CSS代码
.container {
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
}
.border {
border :solid black 10px;
}
嵌套
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
less书写
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
& 表示当前选择器的父级:
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
@规则嵌套和冒泡
@ 规则(例如 @media 或 @supports)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡。
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
编译为:
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
运算
一般运算是用在px和color,color相对少用
@fontSize:14px;
@color: #ccc;
.container{
font-size: @fontSize + 10;
color: @color + 10;
}
//解析成CSS
.container {
font-size: 24px;
color: #d6d6d6;
}
作用域
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
与 CSS 自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
导入
@import "library"; // library.less
@import "typo.css";