less学习（一）

1.Less 嵌套规则

.container{
  h1{
       font-size: 25px;
       color:#E45456;
 }
  p{
       font-size: 25px;
       color:#3C7949;
  }
}
.container h1 {
  font-size: 25px;
  color: #E45456;
}
.container p {
  font-size: 25px;
  color: #3C7949;
}

2.Less 操作

@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}
.myclass {
  font-size: 20px;
  color: green;
}

3.Less 转义

它动态构建选择器，并使用属性或变量值作为任意字符串。写法：~"xxx" 输出 xxx ,js语言为\

4.Less 函数

LESS映射具有值操作的JavaScript代码，并使用预定义的函数来操纵样式表中的HTML元素。 它提供了操作颜色的几个功能，如圆函数，floor函数，ceil函数，百分比函数等。

5.Less 变量范围

变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。

@var: @a;
@a: 15px;

.myclass {
  font-size: @var;
  @a:20px;
  color: green;
}
.myclass {
  font-size: 20px;
  color: green;
}

6.Less 注释

注释与JS语言一样

7.Less 导入

@import "xxx.less";

8.Less 变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
LESS中声明变量的格式为“@变量名：变量值”。
Less 选择器:
@selector: h2;

@{selector} {
  background: #2ECCFA;
}
Less URL:
@images: "http://www.w3cschool.cn";

.myclass {
  background : url("@{images}/less/images/less_variables/birds.jpg");
  width:800px;
  height:500px;
}
Less Import语句
@path : "//www.w3cschool.cn/less";
@import "@{path}/external1.less";
.myclass{
 color : #A52A2A;
}
Less 变量插值属性
@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}
Less 变量名称
.myclass{
  @col: #ca428b;
  @color: "col";
  background-color: @@color;
}
Less 变量延迟加载
p {
  font-size: @a;
  color: #ca428b;
}
@a: @b;
@b: 25px;

9.Less 扩展

Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。

第一种：会将本身的选择器加到扩展的类后面，相当于给本身加上扩展的类一样的样式
h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}
结果：
h2 {
  font-style: italic;
}
.style,
h2 {
  background: green;
}
第二种：在本身加上扩展的类的样式
.style:extend(.container, .img)
{
  background: #BF70A5;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }
结果：
.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

LESS 完全匹配与扩展：默认情况下， extend 查找选择器之间的完全匹配。 对于具有相同含义的两个第n个表达式，扩展无关紧要，但它只寻找与为选择器匹配定义的相同的顺序形式
.style h3,
h3.style{
	color: #BF70A5;
	font-style: italic;
}
.img:extend(.style h3){}
结果:
.style h3,
h3.style,
.img {
  color: #BF70A5;
  font-style: italic;
}

extend扩展不识别单引号和单引号，结果是三种后面都被扩展了
[title=tutorialspoint] {
  font-style: italic;
}
[title='tutorialspoint'] {
 font-style: italic;
}
[title="tutorialspoint"] {
  font-style: italic;
}
.style:extend([title=tutorialspoint]) {}
.container:extend([title='tutorialspoint']) {}
.img:extend([title="tutorialspoint"]) {}

LESS 扩展“all”
当最后在扩展参数中标识关键字 all 时，LESS将该选择器作为另一个选择器的一部分。 匹配的选择器部分将被extend替换，形成一个新的选择器。
.style.nav,
.nav h3 {
  color: orange;
}
.nav {
  &:hover {
    color: green;
  }
}
.container:extend(.nav all) {}
结果：将扩展的部分对应的替换为现在
.style.nav,
.nav h3,
.style.container,
.container h3 {
  color: orange;
}
.nav:hover,
.container:hover {
  color: green;
}

LESS 选择器插值扩展
@ {variable} 符号用作变量名，id和类名的一部分。 扩展不具有使选择器与变量匹配的能力。 扩展可以连接到内插选择器。
.style {
  color: #BF70A5;
  font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;
结果:
.style,
.selector {
  color: #BF70A5;
  font-style: italic;
}

LESS @media内部作用域/扩展
在媒体声明中，应写入extend。 该扩展匹配仅在同一媒体声明内存在的选择器。 在媒体声明中存在的扩展与嵌套声明中存在的选择器不匹配。
@media screen {
  .style {
    width:500px;
  }
  @media (min-width: 1023px) {
    .style {
      width:500px;
    }
  }
}
.cont:extend(.style) {}
结果：作用到@media内部
@media screen {
  .style,
  .cont {
    width: 500px;
  }
}
@media screen and (min-width: 1023px) {
  .style,
  .cont {
    width: 500px;
  }
}