执行时用js编译less
<style type="text/less">
#wrap{
width: 500px;
height: 500px;
border: 1px solid;
.inner{
width: 100px;
height: 100px;
background: pink;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
变量
// @定义的 选择器,属性名,url 使用时必须 @{xx}使用 .
// 属性值不能@{}使用 会报错
@color:pink;
@selector:wrap;
@margin:margin;
@background_url:'http://xx.jpg';
.@{selector}{
@{margin}:20px;
color:@color;
background-image: url('@{background_url}');
}
变量的延迟加载
{}是less的作用域 赋值时取的是作用域内变量最终的结果 ,当前作用域不存在变量取上层作用域最终结果
@size:10;
.wrap{
border: @size px solid; //10px
.inner{
@size:1px;
border: @size solid; //20px
@size:20px;
}
}
//编译结果
.wrap {
border: 10 px solid;
}
.wrap .inner {
border: 20px solid;
}
嵌套规则
//以.inner为基准的伪类 用&符开头&就相当于.inner本身 不写会视为子选择器
.inner{
width: 100px;
height: 100px;
background:@color;
&:hover{
background: black;
}
}
混合 (提取公共代码 跟函数很像的东西 可以传参,以.开头)
<!--普通混合 编译时会被当成类选择器 加入css文件 -->
@color:pink;
.common{
width: 100px;
height: 100px;
}
.wrap{
.inner1{
.common;
}
.inner2{
.common;
}
}
<!--不带参数的混合 编译时不会被当成类选择器加入css文件-->
.common(){....}
<!--带参数的混合 编译时不会被当成类选择器加入css文件-->
//除非是有默认值的形参 否则一旦定义了形参 就算混合内部没用上这个形参 调用时不传实参也会报错
//形参的默认值 可以是其他变量
@color:#fff;
.common(@margin,@c:@color){
width: 100px;
height: 100px;
background:@c;
margin: @margin;
&:hover{
background: black;
}
}
.wrap{
.inner1{
.common(10px,#666);
}
.inner2{
.common(20px);
border: 1px solid;
}
}
<!--命名参数-->
// 调用时 无视参数的顺序 指定参数的值
@color:#fff;
.common(@margin,@pd:10px,@c:@color){
width: 100px;
height: 100px;
background:@c;
margin: @margin;
padding:@pd;
&:hover{
background: black;
}
}
.wrap{
.inner1{
.common(@margin:20px);
}
.inner2{
.common(@pd:20px,@margin:30px);
border: 1px solid;
}
}
<!--匹配模式--->
//可以将匹配混合集的公共代码提取,名字一致 写了@_后(形参个数也必须一致) 一旦混合被匹配上会自动调用
.sjx(@_,@ww,@cc){
width: 0px;
height: 0px;
overflow: hidden;
border-width: @ww;
}
.sjx(T,@width,@color){
//border-width: @width;
border-style:solid dashed dashed dashed;
border-color:@color transparent transparent transparent ;
}
.sjx(R,@width,@color){
//border-width: @width;
border-style:dashed solid dashed dashed;
border-color:transparent @color transparent transparent ;
}
.wrap{
.inner{
.sjx(T,20px,yellow);//根据标识 调用匹配上的混合
}
}
<!-- arguments 混合内部使用实参时不用一个个写 一次性写完 鸡肋的一个功能-->
.border(@w,@style,@c){
border: @arguments;
}
.wrap .sjx{
.border(1px,solid,black)
}
继承
//继承的灵活性不好 但是性能好 , 与混合相比(混合编译后css相当于复制粘贴) 继承则不会出现重复的代码
.juzhong{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover{
background: red!important;
}
.juzhong .test{
color: red;
}
.inner{
&:extend(.juzhong all); //all表示 以.juzhong开头的全部继承 (这里:hover .test都会继承)
&:nth-child(1){
width: 100px;
height: 100px;
background: pink;
}
&:nth-child(2){
width: 50px;
height: 50px;
background: yellow;
}
}
//最终生成的css文件,就是 分组选择器
.juzhong,
.wrap .inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover,
.wrap .inner:hover {
background: red!important;
}
.juzhong .test,
.wrap .inner .test {
color: red!important;
}
.wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
}
.wrap .inner:nth-child(1) {
width: 100px;
height: 100px;
background: pink;
}
.wrap .inner:nth-child(2) {
width: 50px;
height: 50px;
background: yellow;
}
避免编译
margin: ~"calc(10+10)"; ~" xxx"里的内容 不会被less编译
引入其他less文件
@import './xx.less'; //可以将一些混合写入其他文件 使用时引入这个文件就行
