less点滴

1.简单的嵌套；

less中显示：

css中显示

2.作为值的变量：

less中：

@green: #801f77;
@baise:white;

header,footer{
background: @green;
h1{
color: @baise;
}
}

3.作为属性名和选择器名：

//作为选择器和属性名的变量

@kuandu:width;

[email protected]{kuandu}{
@{kuandu}:150px
}

//作为URL的变量
@imgurl:"https://www.baidu.com/img/";
header{
background: @green url("@{imgurl}bdlogo.png");
height: 500px;
}

4.  //定义多个相同名称的变量时

@var: 0;

.class {
@var: 1;
.brass {
@var: 2;
three: @var; //这是的值是3
@var: 3;
}
one: @var; //这是的值是1
}

5.

//基本混合
.font_hn{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
//不带输出的混合，类名后面使用()
.font_hn(){
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}

//带选择器的混合
.my-hover-mixin {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
h1{
.my-hover-mixin();
}

//带参数的混合
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
/*带参数并且有默认值的混合*/
//带参数并且有默认值的混合
.border_you(@color:red){
border: 1px solid @color;
}
h1{
&:hover{
.border_you();
}
}
h2{
&:hover{
.border_you(yellow);
}
}

6.

//基本混合
.font_hn{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
//不带输出的混合，类名后面使用()
.font_hn(){
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}

//带选择器的混合
.my-hover-mixin {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
h1{
.my-hover-mixin();
}

//带参数的混合
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
/*带参数并且有默认值的混合*/
//带参数并且有默认值的混合
.border_you(@color:red){
border: 1px solid @color;
}
h1{
&:hover{
.border_you();
}
}
h2{
&:hover{
.border_you(yellow);
}
}
/*带多个参数的混合*/
//带多个参数的混合
//.mixin(@color; @padding:xxx; @margin: 2) {
// color-3: @color;
// padding-3: @padding;
// margin: @margin @margin @margin @margin;
//}

//.divmaizi{
// .mixin(red;)
//}

//.divmaizi {
// .mixin(1,2,3;something, ele;132);
//}
//.divmaizi {
// .mixin(1,2,3);
//}
.divmaizi {
.mixin(1,2,3;);
}

//如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，
//如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值

/*定义多个具有相同名称和参数数量的混合*/
//.mixin(@color) {
// color-1: @color;
//}
//.mixin(@color; @padding:2) {
// color-2: @color;
// padding-2: @padding;
//}
//.mixin(@color; @padding; @margin: 2) {
// color-3: @color;
// padding-3: @padding;
// margin: @margin @margin @margin @margin;
//}
//
//.some .selector div {
// .mixin(#008000);
//}

//命名参数
/*命名参数*/

.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}

.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
.class3{
.mixin(@padding: 80px;)
}

/*@arguments;*/
.border(@x:solid,@c:red){
border: 21px @arguments;
}
.div1{
.border(solid);
}

//
.border(all,@w: 5px){
border-radius: @w;
}
.border(t_l,@w:5px){
border-top-left-radius: @w;
}
.border(t_r,@w:5px){
border-top-right-radius: @w;
}
.border(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
border-bottom-right-radius: @w;
}

footer{
.border(t_l,10px);
.border(b-r,10px);
background: #33acfe;
}

//混合的返回值
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}

div {
.average(16px, 50px);
padding: @average;
margin: @he;
}