less学习心得

下面是我学习less的一些心得

大多数都是直接粘贴官网的，不过也加上了自己的一些理解，晚些时候再一个个做demo出来。

// 一、变量的使用// 1-1.可以进行变量与定义和加减乘除运算，同时可以在定义的时候根据前面的变量进行运算@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;@background: #333;@font50: 50px;// 1-2.变量可以在定义时进行运算// Variables@link-color:        #428bca; // sea blue@link-color-hover:  darken(@link-color, 10%);// Usagea,.link {  color: @link-color;}a:hover {  color: @link-color-hover;}.widget {  color: #fff;  background: @link-color;}// 1-3.同时，变量还可以作为选择器的名字// Variables@my-selector: banner;// Usage.@{my-selector} {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}// 1.4 同时，路径也是可以作为一个变量使用的// Variables@images: "../img";// Usagebody {  color: #444;  background: url("@{images}/white-sand.png");}// 1.5 同时，引入文件的时候，也可以使用变量拼接路径// Variables@themes: "../../src/themes";// Usage// @import "@{themes}/tidal-wave.less";// 1.6 作为属性的一部分进行拼接@property: color;.widget {  @{property}: #0ee;  background-@{property}: #999;}// 1.7 可以像php那样进行变量名拼接@fnord:  "I am fnord.";@vars:    "fnord";.contentCon{    content: @@vars;}// 1.7 变量名后声明懒提升.lazy-eval {  width: @varwidth;}@varwidth: @awidth;@awidth: 9%;// 二、样式的使用// 2-1.可以将定好的样式作为一个变量放到另外一个样式里面，使用分号结尾。.header {  color: @light-blue;  font-size: @font50;}.fr {  float: right;}.fl {  float: left;}.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#menu a {  color: #111;  .bordered;}.post a {  color: red;  .bordered;}// 2-2.使用extend直接应用其他样式中的属性，会跟其他选择器生成一个组合选择器// nav ul {//   &:extend(.inline);//   background: blue;// }// .inline {//   color: red;// }//output://nav ul,.inline {//  color: red;//}// 2-3.直接使用extend继承其他属性，其实跟上面的用法一样的nav ul:extend(.inline){    background-color: #f00;}.inline {  color: red;}// 2-4. 多个元素可以直接继承一个元素div .pre {    background-color: #f00;}pre:hover,.some-class {  &:extend(div .pre);}// output：／／.some-class,div .pre,pre:hover{background-color:red}// 2.5 也可以使用嵌套元素进行继承.bucket {  tr { // nested ruleset with target selector    color: blue;  }}.some-class:extend(.bucket tr) {} // nested ruleset is recognized// output：.bucket tr,.some-class {  color: blue;}// 2.6 less中是精确匹配元素的，所以使用*通配符是无效的.a.class,.class.a,.class > .a {  color: blue;}.test:extend(.class) {} // 第一种情况，this will NOT match the any selectors above*.class {  color: blue;}.noStar:extend(.class) {} // 第二种情况，尽管在*.class和.class 等价，但是无法继承。this will NOT match the *.class selector// 2.7 nth选择器如果数字不一样也不能继承，属性选择器只要属性相等就可以匹配:nth-child(1n+3) {  color: blue;}//.child:extend(:nth-child(n+3)) {} //这是无法继承的[title=identifier] {  color: blue;}[title='identifier'] {  color: blue;}[title="identifier"] {  color: blue;}.noQuote:extend([title=identifier]) {}.singleQuote:extend([title='identifier']) {}.doubleQuote:extend([title="identifier"]) {} //这个是完全可以继承的// 2.8 完全继承一个选择器所有同名的选择器.a.b.test,.test.c {  color: orange;}.test {  &:hover {    color: green;  }}.replacement:extend(.test all) {}  //这样的话.replacement会成为跟test一样的选择器，连父类也是一样的// 2.9 范围继承的属性@media print {  .screenClass:extend(.selector) {} // extend inside media  .selector { // this will be matched - it is in the same media    color: black;  }}.selector { // ruleset on top of style sheet - extend ignores it  color: red;}@media screen {  .selector {  // ruleset inside another media - extend ignores it    color: blue;  }}// output：// @media print {//   .selector,//   .screenClass { /*  ruleset inside the same media was extended *///     color: black;//   }// }// .selector {  ruleset on top of style sheet was ignored //   color: red;// }// @media screen {//   .selector { /* ruleset inside another media was ignored *///     color: blue;//   }// }// 2.10 使用情况继承，也就是一个父元素定义初始样式，子类再修改就好.animal {  background-color: black;  color: white;}.bear {  &:extend(.animal);  background-color: brown;}// 2.11 mixin和extend的区别.my-inline-block() {  display: inline-block;  font-size: 0;}.thing1 {  .my-inline-block;}.thing2 {  .my-inline-block; //这个是利用mixin直接复制属性}// output// .thing1 {//   display: inline-block;//   font-size: 0;// }// .thing2 {//   display: inline-block;//   font-size: 0;// }.my-inline-block {  display: inline-block;  font-size: 0;}.thing1 {  &:extend(.my-inline-block);}.thing2 {  &:extend(.my-inline-block); //这个是继承属性，继承的样式会和原来的样式组成组合选择器}// output：// .my-inline-block,// .thing1,// .thing2 {//   display: inline-block;//   font-size: 0;// }// 三、mixin的使用// 3.1 mixin加了（）以后是不进行样式输出的.my-mixin {  color: black;}.my-other-mixin() {  background: white;}.classx {  .my-mixin;  .my-other-mixin;}// output：// .my-mixin {//   color: black;// }// .class {//   color: black;//   background: white;// }// 3.2 mixin使用的时候会连父元素也一起继承了.my-hover-mixin() {  &:hover {    border: 1px solid red;  }}button {  .my-hover-mixin();}// output// button:hover {//   border: 1px solid red;// }// 3.3获取mixin中的子元素的样式#outer {  .inner {    color: red;  }}.coutput {  #outer > .inner;}// 3.4 严格的mixin命名空间@mode: huge;#namespace when (@mode=huge) {  .mixin() { /* */ }}// #namespace {//   .mixin() when (@mode=huge) { /* */ }// }// 3.5 可以让mixin自动添加important的important.foo (@bg: #f5f5f5, @color: #900) {  background: @bg;  color: @color;}.unimportant {  .foo();}.important {  .foo() !important;}// output// .unimportant {//   background: #f5f5f5;//   color: #900;// }// .important {//   background: #f5f5f5 !important;//   color: #900 !important;// }// 3.6 带参数的mixin// 可以在使用的时候传参数.border-radius(@radius) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}#header {  .border-radius(4px); //直接输入参数}.button {  .border-radius(6px);}// 也可以指定一个默认参数// .border-radius(@radius: 5px) {//   -webkit-border-radius: @radius;//      -moz-border-radius: @radius;//           border-radius: @radius;// }// #header {//   .border-radius;  //如果有默认参数，也可以直接调用// }// 3.7 多种参数的mixin.mixin2(@color) {  color-1: @color;}.mixin2(@color; @padding: 2) {  color-2: @color;  padding-2: @padding;}.mixin2(@color; @padding; @margin: 2) {  color-3: @color;  padding-3: @padding;  margin: @margin @margin @margin @margin;}.some .selector div {  .mixin2(#008000);  //只会调用最满足的mixin进行计算，因为第三个mixin2没有带参数无法计算，所以无法形成参数}// 3.8带命名和默认值的参数.mixin(@color: black; @margin: 10px; @padding: 20px) {  color: @color;  margin: @margin;  padding: @padding;}.class1 {  .mixin(@margin: 20px; @color: #33acfe);}.class2 {  .mixin(#efca44; @padding: 40px); //使用的过程中，如果参数有默认值，可以直接调用，也可以不分前后的调用，只要带上参数名就可以了。}// output// .class1 {//   color: #33acfe;//   margin: 20px;//   padding: 20px;// }// .class2 {//   color: #efca44;//   margin: 10px;//   padding: 40px;// }// 3.9 一个带arguments的mixin.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {  -webkit-box-shadow: @arguments;     -moz-box-shadow: @arguments;          box-shadow: @arguments;}.big-block {  .box-shadow(2px; 5px);  //直接输入参数，后面如果带默认参数的话就不用写了}// output// .big-block {//   -webkit-box-shadow: 2px 5px 1px #000;//      -moz-box-shadow: 2px 5px 1px #000;//           box-shadow: 2px 5px 1px #000;// }.mixin3(@a; @rest...){    font-size: @a;    border:@rest;}.small-block {    .mixin3(12px;1px;1px;solid;#f00); //@rest的意思就是出了@a以外的所有输入的参数值都会放到@rest这个变量中,@rest是less中的变量，不能覆盖的。}// output// .small-block {//  font-size: 12px;//  border: 1px 1px solid #f00;// }//3.10 带正则表达式的mixin.mixin4(dark; @color) {  color: darken(@color, 10%);}.mixin4(light; @color) {  color: lighten(@color, 10%);}.mixin4(@_; @color) {  display: block;}@switch: light;.class2 {  .mixin4(@switch; #888);}// output// .class {//   color: #a2a2a2;//   display: block;// }// 3.11 将mixin当成带返回值的函数使用.mixin5() {  @width:  100%;  @height: 200px;}.caller {  .mixin5();  width:  @width;  height: @height; //例子1}// output// .caller {//   width:  100%;//   height: 200px;   // }.average(@x, @y) {  @average: ((@x + @y) / 2);}div {  .average(16px, 50px); // "call" the mixin  padding: @average;    // use its "return" value。 //例子2，可以用来计算屏幕大小变更的时候元素的宽高}// output// div {//   padding: 33px;// }// 3.12 mixin的作用返回会覆盖掉原来调用父级的作用范围.mixin6() {  @size: in-mixin;  @definedOnlyInMixin: in-mixin;}.class6 {  margin: @size @definedOnlyInMixin;  .mixin6();}@size: globaly-defined-value; // callers parent scope - no protection// output// .class {//   margin: in-mixin in-mixin;// }// 3.13 变量在定义的时候就可以当作mixin使用// declare detached ruleset@detached-ruleset1: { background: red; };// use detached ruleset.top {    @detached-ruleset1(); }// output// .top {//   background: red;// }// 3.14父级调用mixin的时候可以完成传递参数，同时，可以在父级内部定义mixin返回值@detached-ruleset: {  caller-variable: @caller-variable; // variable is undefined here  .caller-mixin(); // mixin is undefined here};selector {  // use detached ruleset  @detached-ruleset();   // define variable and mixin needed inside the detached ruleset  @caller-variable: value;  .caller-mixin() {    variable: declaration;  }}// output// selector {//   caller-variable: value;//   variable: declaration;// }// 3.15 不能直接获取其中的具体属性的mixin,意思就是虽然访问到了子集，但是并不能获取其中的元素@detached-1: { scope-detached: @one @two; };.one {  @one: visible;  .two {    @detached-2: @detached-1; // copying/renaming ruleset     @two: visible; // ruleset can not see this variable  }}.use-place {  .one > .two();   @detached-2();}// output// ERROR 1:32 The variable "@one" was not declared.// 正确的修改方式：// .one {//   @one: visible;//   @detached-1: { scope-detached: @one @two; };//   .two {//     @detached-2: @detached-1; // copying/renaming ruleset //     @two: visible; // ruleset can not see this variable//   }// }// .use-place {//   .one > .two(); //   @detached-2();// }// output// .use-place{scope-detached:visible visible}// 四、一些其他原则// 4.1 使用import引入的原则//@import "foo";      // foo.less is imported//@import "foo.less"; // foo.less is imported//@import "foo.php";  // foo.php imported as a Less file 作为less文件引入//@import "foo.css";  // statement left in place, as-is，是css文件就按css引入// 4.1 import的一些属性// Syntax: @import (keyword) "filename";// The following import directives have been implemented:// reference: use a Less file but do not output it// inline: include the source file in the output but do not process it// less: treat the file as a Less file, no matter what the file extension// css: treat the file as a CSS file, no matter what the file extension// once: only include the file once (this is default behavior)// multiple: include the file multiple times// optional: continue compiling when file is not found// More than one keyword per @import is allowed, you will have to use commas to separate the keywords:// Example: @import (optional, reference) "foo.less";// 五、条件判断语句// 为了尽可能的接近@media的使用，使用mixin guard来进行判断// 5.1 多参数进行判断的mixin guard@a: #f00;.mixin (@a) when (lightness(@a) >= 50%) {  background-color: black;}.mixin (@a) when (lightness(@a) < 50%) {  background-color: white;}.mixin (@a) {  color: @a;}// output// .class1 { .mixin(#ddd) }// .class2 { .mixin(#555) }// 5.2 可以进行比较的minxin guard@media: mobile;.mixin (@a) when (@media = mobile) { }.mixin (@a) when (@media = desktop) {  }.max (@a; @b) when (@a > @b) { width: @a }.max (@a; @b) when (@a < @b) { width: @b }// 可以进行逻辑运算的mixin guard.mixin (@a) when (isnumber(@a)) and (@a > 0) {  }  //逻辑与.mixin (@a) when (@a > 10), (@a < -10) {  }//逻辑或.mixin (@b) when not (@b > 0) {  }// 逻辑非// 5.3 使用less自带的检测函数进行函数数值判断// @b:0;// .mixin (@a; @b: 0) when (isnumber(@b)) { }// .mixin (@a; @b: black) when (iscolor(@b)) {}// 下面是一些常用的检测函数// Here are the basic type checking functions:// iscolor// isnumber// isstring// iskeyword// isurl// If you want to check if a value is in a specific unit in addition to being a number, you may use one of:// ispixel// ispercentage// isem// isunit// 5.4 使用default（）的mixin guard.mixin (@a) when (@a > 0) {   }.mixin (@a) when (default()) {  } // matches only if first mixin does not, i.e. when @a <= 0// 六、CSS Guard的使用（less1.5以后带的特性）// 说白了就是定义一个参数，当满足这个参数的时候css样式就生效@my-option: true;.button1 when (@my-option = true) {  color: white;}// 七、循环// 例子1.loop(@counter) when (@counter > 0) {  .loop((@counter - 1));    // next iteration  width: (10px * @counter); // code for each iteration}div {  .loop(5); // launch the loop}// output:// div {//   width: 10px;//   width: 20px;//   width: 30px;//   width: 40px;//   width: 50px;// }// 例子2.generate-columns(4);.generate-columns(@n, @i: 1) when (@i =< @n) {  .column-@{i} {    width: (@i * 100% / @n);  }  .generate-columns(@n, (@i + 1));}// output:// .column-1 {//   width: 25%;// }// .column-2 {//   width: 50%;// }// .column-3 {//   width: 75%;// }// .column-4 {//   width: 100%;// }// 八、属性融合// 1.使用逗号组合.mixin() {  box-shadow+: inset 0 0 10px #555;}.myclass {  .mixin();  box-shadow+: 0 0 20px black;}// output// .myclass {//   box-shadow: inset 0 0 10px #555, 0 0 20px black;// }// 2.使用空格组合.mixin() {  transform+_: scale(2);}.myclass {  .mixin();  transform+_: rotate(15deg);}// output// .myclass {//   transform: scale(2) rotate(15deg);// }// 九、能够充分代表自己的“&”操作符//  例子一、&在自身作用范围可以作为代表自己的可以很多字母.button {  &-ok {    background-image: url("ok.png");  }  &-cancel {    background-image: url("cancel.png");  }  &-custom {    background-image: url("custom.png");  }}// output// .button-ok {//   background-image: url("ok.png");// }// .button-cancel {//   background-image: url("cancel.png");// }// .button-custom {//   background-image: url("custom.png");// }// 例子二，可以看出实际上&这个是代表了.link这个选择器.link {  & + & {    color: red;  }  & & {    color: green;  }  && {    color: blue;  }  &, &ish {    color: cyan;  }}// output// .link + .link {//   color: red;// }// .link .link {//   color: green;// }// .link.link {//   color: blue;// }// .link, .linkish {//   color: cyan;// }//例子三，可以在子元素中调用父类选择器，这样的话可以方便很多操作，例如提高选择器渲染优先权重.header {  .menu {    border-radius: 5px;    .no-borderradius & {      background-image: url('images/button-background.png');    }  }}// output// .header .menu {//   border-radius: 5px;// }// .no-borderradius .header .menu {//   background-image: url('images/button-background.png');// } // 十、其他的一些规则//10.1 嵌套规则,可以在父元素中嵌套使用自元素.header {  width: 1000px;  height: 500px;  backgournd-color: @background;  .navigation {    font-size: @font50;    .fl;  }  .logo {    width: 300px;    height: 400px;    background: @nice-blue;    .fl;  }}//10.2 对于伪类元素可以使用&代替.clearfix {  dispaly: block;  zoom: 1;  &:after {    content: '';    display: block;    font-size: 0;    height: 0;    clear: both;    visibility: hidden;  }}// 10.3 对于规则性的属性可以进行嵌套，自身会进行元素关联和冒泡顶层，例如@media// .screen-color {//  @media screen{//      color: green;//  }//  @media (min-width: 768px) {//      color: red;//  }//  @media tv {//      color: black; //tv值已经废弃//  }// }// 10.4没有条件的规则例如巷font-face或者keyframes也会自动冒泡#a {  color: blue;  @font-face {    src: made-up-url;  }    padding: 2;}@screenparams: 320 360 375 400 414 480 540 600 640 641 !default;@length: 10;// 10.5 使用函数进行屏幕适应//.screenAdapter(resolution ratio:屏幕分辨率)// 计算屏幕响应.screenAdapterFn(@counter) when(@counter <= 640) {  html, body{    @media screen width (max-width: @counter) {      font-size: (@counter/10px);    }  }}//特定屏幕需要特定参数响应.screenAdapterFn(@counter) when(@counter = 641) {  html, body {    @media screen width (max-width: @counter) {      font-size: 72px;    }  }}.screenAdapterFn(320);.screenAdapterFn(360);.screenAdapterFn(375);.screenAdapterFn(400);.screenAdapterFn(414);.screenAdapterFn(480);.screenAdapterFn(540);.screenAdapterFn(600);.screenAdapterFn(640);.screenAdapterFn(641);//10.6 可以进行加减乘除运算，但是最后的话只会按照第二个单位输出// numbers are converted into the same units@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm// conversion is impossible@incompatible-units: 2 + 5px - 3cm; // result is 4px// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%@base: 2cm * 3mm; // result is 6cm@color: #224488 / 2; //results in #112244.bg{    background-color: #112244 + #111; // result is #223355}//10.7 异常字符串的处理.weird-element {  // content: ~"^//* some horrible but needed css hack";}//10.8 使用less自带函数@base: #f04615;@width: 0.5;.class {  width: percentage(@width); // returns `50%`  color: saturate(@base, 5%);  background-color: spin(lighten(@base, 25%), 8);}// 10.9 使用定义好的样式直接可以获取其其中的样式#bundle {  .button {    display: block;    border: 1px solid black;    background-color: grey;    &:hover {      background-color: white    }  }  .tab {     font-size: 15px;   }  .citation {     font-size: 16px;   }}.header a {  color: orange;  #bundle > .button;}//10.10 变量作用域的使用@var: red;#page {  @var: white;  #header {    color: @var; // white  }}@var: red;// #page {//   #header {//     color: @var; // white//   }//   @var: white;// }// 10.11 注释/* One hell of a blockstyle comment! */@var: red;// Get in line!@var: white;// 10.12引入其他定义好的样式// @import "library"; // library.less// @import "typo.css";

上面都是我的一些总结和例子，可能说明不够详细，可以去官网查具体的例子和说明。