less点滴

Posted 2020-08-29 飘然离去

 

1.简单的嵌套；

less中显示：

css中显示

 2.作为值的变量：

less中：

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

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

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

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

@kuandu:width;

.@{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;
}

 7.嵌套规则：

//传统写法
//header{
// width: 960px;
//}
//header h1 {
// font-size: 18px;
// color: green;
//}
//header .logo{
// width: 300px;
// height: 150px;
// background: darkred;
//}
//header .logo:hover{
// background: forestgreen;
//}

//less写法
//header{
// width: 960px;
// h1{
// font-size: 18px;
// color: green;
// }
// .logo{
// width: 300px;
// height: 150px;
// background: darkred;
// &:hover{
// background: forestgreen;
// }
// }
//}

.a{
.b{
.c{
color: 123;
}
}
}
.a{
.b{
.c&{
color: 123;
}
}
}

p, a, ul, li {
border-top: 2px dotted #366;
& & {
border-top: 0;
}
}

a , b ,c{
& & & {
border-top: 0;
}
}

8.运算：

//.wp{
// margin: 0 auto;
// background: forestgreen;
// width: 450px + 450;
// height: 400 + 400px;
//}

//涉及到优先级，使用()区分优先级
.wp{
margin: 0 auto;
width: (550 - 50)*2 + 24px;
height: 400 + 400px;
background:#ff0000 - 55; //#000021 c8c8c8
}

//rgb模式他的值是 0~255 ，当你的值超过255 ，那么就会以255进行相加操作

9.函数：

.wp {
background: #ff0000;
z-index: blue(#050506);
}

10.命名空间：

//#bgcolor(){
// background: #ffffff;
// .a{
// color: #888888;
// &:hover{
// color: #ff6600;
// }
// .b{
// background: #ff0000;
// }
// }
//}
//
//.wi{
// background: green;
// color: #fff;
// .a{
// color: green;
// background: #ffffff;
// }
//}
//
//.bgcolor1{
// background: #fdfee0;
// #bgcolor>.a;
//}
//.bgcolor2{
// .wi>.a;
//}

//省略>写法
#bgcolor(){
background: #ffffff;
.a{
color: #888888;
&:hover{
color: #ff6600;
}
.b{
background: #ff0000;
}
}
}
.wi {
background: green;
color: #fff;
.a {
color: green;
background: #ffffff;
}
}
.bgcolor1{
background: #fdfee0;
#bgcolor .a;
}
.bgcolor2{
.wi .a;
}

11.作用域：

@clolor:#ffffff;

.bgcolor{
width: 50px;
a{
color: @clolor;
}
}

@clolor:#ff0000;

12.关键字important

.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
font-size: 16px;
font-weight: 900;
}

.unimportant {
.foo();
}
.important {
.foo() !important;
}

13.条件表达式

//.mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5
// background-color: black;
//}
//.mixin (@a) when (lightness(@a) < 50%) {
// background-color: white;
//}
//.mixin (@a) {
// color: @a;
//}
//.class1 { .mixin(#7e7e7e) } //221 > 127.5 >50% background-color: black; 7e7e7e = 126
//.class2 { .mixin(#808080) } //85 <127.5 <50% background-color: white; 808080 = 128

//iscolor,isnumber.....判断值得类型
//.mixin (@a) when (iscolor(@a)) { //255/2=127.5
// background-color: black;
//}
//.mixin (@a) when (isnumber(@a) ) {
// background-color: white;
// shuzi:shuzi;
//}
//.mixin (@a) {
// color: @a;
//}
//.class1 { .mixin(#7e7e7e) } //background-color: black;
//.class2 { .mixin(123) } //background-color: white;

 

//ispixel,ispercentage.....单位检查函数
.mixin (@a) when (ispixel(@a)) {
background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
background-color: white;
}
.mixin (@a) {
width: @a;
}
.class1 { .mixin(960px) } //background-color: black; width:960px
.class2 { .mixin(95%) } //background-color: white;width:95%

14.循环：

//.loop(@counter) when (@counter > 0) {
// .loop((@counter - 1)); // 递归调用自身 4 3 2 1 0
// width: (10px * @counter); // 每次调用时产生的样式代码 50px 40px 30px 20px 10px
//}
//
//div {
// .loop(5); // 调用循环
//}

//.loop(@counter) when (@counter > 0) {
// h@{counter}{
// padding: (10px * @counter);
// }// 每次调用时产生的样式代码
// .loop((@counter - 1)); // 递归调用自身
//}
//
//div {
// .loop(6); // 调用循环
//}

.loop(@counter) when (@counter < 7) {
h@{counter}{
padding: (10px * @counter);
}// 每次调用时产生的样式代码
.loop((@counter + 1)); // 递归调用自身
}

div {
.loop(1); // 调用循环
}

 14.合并属性

//+ 合并以后，以逗号分割属性值
.mixin() {
box-shadow+: inset 0 0 10px #555 ;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}

//+_ 合并以后，以空格分割属性值
.a(){
background+:#f60;
background+_:url("/sss.jod") ;
background+:no-repeat;
background+_:center;
}
.myclass {
.a()
}
//background+_:#f60 url("/sss.jod");

15.其他函数：

//.x(1) { x:11 }
//.x(2) { y:22 }
//.x(@x) when (default()) {z:@x}
//body{
//// background: color("#f60");
//// width: convert(1s,ms);
//// background: data-uri(\'arr.jpg\');
//}
//.div1{
// .x(1)
//}
//.div2{
// .x(123)
//}

//.x(@x) when (ispixel(@x)) {width:@x}
//.x(@x) when not(default()) {padding:(@x/10)}
//
//.div1{
// .x(100px)
//}
//
//.div2{
// .x(100cm);
// color:red;
//}

div{
width: unit(100px);
}

16.字符串函数，长度相关的函数。

div{
// d:escape(\'#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =\');
// filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
// filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
//// width: calc(960px-100px);
// width: calc(~\'960px-100px\');
// height: calc(~\'960px-100px\');
// font-family: %( "%a %a" , "Microsoft", "YaHei");
// font-family: ""Microsoft" "YaHei"";

// font-family: %( "%A %a" , "Microsoft", "YaHei");
// font-family: "%22Microsoft%22 "YaHei"";

// font-family: %( "%s %s" , F60, "YaHei");

// font-family: %( "%s %s" , "Microsoft", "YaHei");
// font-family: "Microsoft YaHei";

//content: replace("Hello, maizi", "maizi", "LESS");
// content: replace("Hello, A", "A", "B");

//n:length(1px solid #0080ff);

@list: "A", "B", "C", "D";
n:extract(@list,4)
}

17.数学函数：

div{
// width: ceil(2.9999999px); //1.ceil()函数 向上取整
// width: floor(2.9999999px); //1.floor()函数 向下取整
// width:percentage( 0.5px); 将浮点数转换为百分比

// 取整和四舍五入
// width:4.5px ;
// width:round(4.5px) ;
//
// width:4.4px ;
// width:round(4.4px) ;

// 计算一个数的平方根，原样保持单位。
// width: sqrt(16px);
// width: sqrt(9px);

// 计算数字的绝对值，原样保持单位。
// top: -999px;
// top: abs(-999px);

// width: sin(1); //1弧度角的正弦值
// width: sin(1deg);//1角度角的正弦值
// width: sin(1grad); //1百分度角的正弦值

// 反正弦值
// width: asin(-0.84147098);
// width: asin(0);
// width: asin(2);

// width: cos(1); //1弧度角的余弦值
// width: cos(1deg);//1角度角的余弦值
// width: cos(1grad); //1百分度角的余弦值

// width: tan(1); //1弧度角的正切值
// width: tan(1deg);//1角度角的正切值
// width: tan(1grad); //1百分度角的正切值

// PI
// width: pi();

// 乘方运算
// width: pow(2px,2);
// width: pow(3px,2);
// width: pow(4px,2);
// width: pow(25px,0.5);

// mod()取余
// width: mod(3px,2);

width: min(3px,2px,1px);
width: max(3px,2px,1px);
}

18.

//如果一个值是一个数字，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (isnumber(@x)) {
// x:@x
//}
//div{
//.m(123);
//.m(ABC);
//}

//如果一个值是一个字符串，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (isstring(@x)) {
// x:@x
//}
//div{
//.m(123);
//.m("ABC");
//}

//如果一个值是一个颜色，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (iscolor(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
//}

//如果一个值是一个关键字，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (iskeyword(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
//}

//如果一个值是一个url地址，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (isurl(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
//}

//如果一个值是带像素长度单位的数字，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (ispixel(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(220cm);
//}

//如果一个值是带em长度单位的数字，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (isem(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(240em);
//}

//如果一个值是带百分比单位的数字，返回\'真(true)\',否则返回\'假(false)\'.
//.m(@x) when (ispercentage(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(240em);
// .m(260%);
//}

//如果一个值是带指定单位的数字，返回\'真(true)\',否则返回\'假(false)\'.
.m(@x) when (isunit(@x,em)) {
x:@x
}
div{
.m(123);
.m(220px);
.m(240em);
.m(280em);
.m(290em);
.m(260%);
}

19.颜色就不看了。