Less学习--注释、变量、转义、可变插值

注释

可以使用单行注释和多行注释

但只有多行注释能被解析

变量variable

在样式表中多次被引用的值可以将其定义为变量这样就易于维护

@nice-color: #5B83AD; /*用@定义一个变量*/
@light-color: @nice-color + #111111; /*颜色可以进行加减*/

#header_group{
	color: @light-color;
}

也可以用变量名定义变量

@pig:"today you are a pig";
@message:"pig";	 //这里写的必须是变量名 类似于二级指针
p{
	content: @@message;
}
@car:"I hac a car today";
@messages:"car"; //这里写的必须是变量名 类似于二级指针
div{
	content: @@messages;
}

定义一个URL

@imgURL:'../img';
body{
	background: url(@imgURL);
	//background: url("@imgURL");
	//加不加引号不影响最终结果
}

定义引入声明标准写法

@themes:"./../selfStudyLanguageOfLess"; 
//定义一个根路径变量
@import "@themes/demo08.css";

可变插值

@{}可以引用一个变量使其插入到样式

@my-selector:banner;
@widthPro:width;
.@{my-selector}{
	@{widthPro}:10px;
}

转义~

转义允许将任何字符串作为属性值或变量值
注意：除了插值外，里面的任何字符将原样输出

.werid-element{
	content: ~"/*something just like this*/";
	width:~"10px";
	height: ~"20px";
}