// less中文https://less.bootcss.com//* ****************************** 变量variable ************************************* */// 根底篇@variable_width: 10px;.variable_test { width: @variable_width;}// 进阶篇@variable_name: banner;.@{variable_name} { color: red; // background: $color;//新属性v3.0.0}.variable_img { background:url("../@{variable_name}/icon.png");}/* ****************************** parent selector & **************************************/// 根底篇a { color: red; &:hover { color: blue; }}.button { width: 20px; &-ok { width: 40px; } .pre & { width: 60px; }}// 进阶篇.link { &+& { // .link+.link color: red; } & & { // .link .link color: green; } && { // .link.link color: blue; } &, &ish { // .link,.linkish color: cyan; }}.grand { .parent { //这里的&代表 .grand .parent &>& { // .grand .parent>.grand .parent color: red; } & & { // .grand .parent .grand .parent color: green; } && { // .grand .parent.grand .parent color: blue; } &, &ish { // .grand .parent,.grand .parentish color: cyan; } }}p,a { border-top: 2px dotted #366; &+& { // 编译后果 // p+p, // p+a, // a+p, // a+a, border-top: 0; }}/* ****************************** :extend **************************************/// :extend有诸多应用形式，也有诸多限度nav ul { &:extend(.inline); // .inline,nav ul {color: red;} background: blue;}.inline { color: red;}.cool { &:extend(.inline, .bucket);}pre:hover,.some-class { &:extend(div pre); // pre:hover:extend(div pre),.some-class:extend(div pre) {}}[title=identifier] { color: blue;}.noQuote:extend([title=identifier]) { // [title=identifier],.noQuoteP}.a.b.test,.test.c { color: orange;}.test { &:hover { color: green; }}.replacement:extend(.test all) { // .a.b.test,.test.c,.a.b.replacement,.replacement.c {} // .test:hover,.replacement:hover{}}.bucket { color: blue;}@{variable}:extend(.bucket) {}@variable: .selector;@media screen { .selector { color: blue; } @media (min-width: 1023px) { .selector { color: blue; } }}.topLevel:extend(.selector) {}/* ****************************** Merge & **************************************/.merge_mixin() { box-shadow+: inset 0 0 10px #555;}.merge_myclass { .merge_mixin(); box-shadow+: 0 0 20px black;}.merge_trans() { transform+_: scale(2);}.merge_myclass { .merge_trans(); transform+_: rotate(15deg);}/* ****************************** mixin **************************************/// 根底篇.mixin_red { color: red;}.mixin_theme { .mixin_red();}// 进阶篇// ##、定义一个mixin类:// 形式一:(会在css中输入)// .red {// color: red// }// 形式二:(不会在css中输入).mixin_blue() { color: blue;}.my-hover-mixin() { &:hover { border: 1px solid red; }}button { .my-hover-mixin();}// ##、命名空间:应用#()或者.()，不加()会在css中输入// 调用:// #mixin_parent>.child()// #mixin_parent .child()// #mixin_parent.child()#mixin_parent() { .child { font-size: 16px; }}.mixin_test { #mixin_parent.child()}// mixin传参(分号和逗号都能够，保险起见应用分号).foo (@bg: #f5f5f5; @color: #900) { background: @bg; color: @color;}.unimportant { .foo();}// 将mixin用作function：v3.5.0// .average(@x, @y) {// @result: ((@x + @y) / 2);// }// div {// padding: .average(16px, 50px)[@result];// }// mixin递归(>, >=, =, =<, <) 关键字and not.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration}div { .loop(5)}.generate-columns(4);.generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1));}/* ****************************** insert嵌套 **************************************/// css的写法.insert_header { color: red}.insert_header .logo { color: black}// less写法.insert_header { font-size: 14px; .logo { color: black }}// 例如：革除浮动.clearfix { display: block; zoom: 1; &:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }}// @media嵌套规定.component { @media(min-width:1000px) { font-size: 16px; } @media(min-width:1200px) { font-size: 18px; }}/* ****************************** cal运算 **************************************/// 反对+-*/四则运算,less默认反对单位换算，个别状况以最左侧@cal_add: 5cm + 10mm; // 后果是 6cm@cal_substract: 2 - 3cm - 5mm; // 后果是 -1.5cm@cal_mixCal: 2 + 5px - 3cm; // 后果是 4px@cal_base: 5%;@cal_multiply: @cal_base * 2; // 后果是 10%@cal_other: @cal_base + @cal_multiply; // 后果是 15%@cal_color: #224488 / 2; //后果是 #112244/* ****************************** transfer本义 **************************************/// ~"anything"模式会被原样输入@transfer_min768: ~"(min-width: 768px)";// @min768: (min-width: 768px);//less3.5开始反对简写.element { @media @transfer_min768 { font-size: 1.2rem; }}/* ****************************** fun函数 **************************************/@fun_base: #f04615;@fun_width: 0.5;.fun_class { width: percentage(@fun_width); // returns `50%` color: saturate(@fun_base, 5%); background-color: spin(lighten(@fun_base, 25%), 8); // margin: if((2>1), 5px, 10px); //less3.x才反对}// @fun_colors: blue, green, red;// each(@fun_colors, {// .@{value} {// color: ~"@{value}";// }// });// @fun_set: {// one: blue;// two: green;// three: red;// }// .fun_set {// each(@fun_set, {// @{key}-@{index}: @value;// });// }/* ****************************** map映射 **************************************/#map_colors() { primary: blue; secondary: green;}.map_button { // color: #map_colors[primary]; //less3.x开始反对 // border: 1px solid #map_colors[secondary]; //less3.x开始反对}/* ****************************** scope作用域 **************************************/@scope_var: red;#page { @scope_var: white; #header { color: @scope_var; // white }}/* ****************************** 导入 **************************************/@import "./global.less";/* ****************************** 应用less **************************************//* node */// npm i less/* browser */// <link rel="stylesheet/less" type="text/css" href="styles.less" />// <script src="less.js" type="text/javascript"></script>/*批改变量 less.modifyVars({ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2'}); */// ##、@arguments(备注:@arguments跟传入的参数地位非亲非故)// 示例:// .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {// box-shadow: @arguments;// }// ##、@rest...(示意:残余的参数)// .pad(@top, @right, @rest...) {// padding: @top @right @rest;// }// ##、雷同名字的mixin.mixin(@width) { width: @width;}.mixin(@width, @height: 5) { width: @width; height: @height;}.ya { .mixin(10px);}// ##、迭代// .loop(@width:1) when(@width<10) {// .loop((@width+1)); //下一个迭代// width: (@width*10px); //每一个迭代内的 代码// }