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%);

// Usage
a,
.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";

// Usage
body {
  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 
//