less基础

//看的一个视频整理的，貌似是尚硅谷

//入门很简单，而且很有用，最近的代码一直在用less写。

//个人认为最重要的特点是嵌套，这样整个网页的结构就会被把握的很好。

less要点：变量，混合，嵌套，函数&运算，扩展

1、链接
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.2/less.js"></script>


2、注释
/*块注释*/
//行注释（不会输出到编译后的css文件中）


3、变量（Less中的变量充许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以了）
//延迟加载：全局唯一，多次定义，只使用最后一个
//@开头
//选择器和属性名   @{color}  
//url  @{url}
eg:
@color: #4d926f;//然后之后就可以用了
background:url('@{img}/widget.png') no-repeat;

计算功能：可计算//只要一个加单位就好
height:@height+11 
4、嵌套
在一个选择器中嵌套另一个选择器来实现继承
&（当前选择器的父选择器）


div {
  &:hover{
    color:yellow;
  }
p{
   color:darkturquoise;
  }


}
5、混合（Mixin）
//从一个规则集引入另一个规则集
//和扩展很类似，一个是定义子类，一个是定义父类
//试了一下，选择器前面必须带# 或者 .
1）无括号//会带到css中
2）有括号无参数
//特殊（）不会带到css
@color: pink;
#pp() {
  color: blue
}
div {
  #pp();
}
(//带一些参数)
3）参数
.pp(@color,@w) {
  color: @color;
 font-size: @w;
}
div {
  .pp(red,30px)
}
4）默认值
.pp(@color,@w:40px) {
  color: @color;
 font-size: @w;
}
div {
  .pp(red)
}
5）命名参数
.pp(@color,@w:40px) {
  color: @color;
 font-size: @w;
}
div {
  .pp(@color: red)


5）匹配模式
.pp(@_,@c){//公共部分，第一个参数为@_
  background: darkturquoise;
}
.pp(L,@c){//第一个参数不带@，用来匹配
  color: @c;
  font-size:30px
}
.pp(R,@c){
  color: @c
}
div {
  .pp(L,@c:red)
}
6）arguments（语法糖）//定义时，一个变量代替所有参数


6、扩展
extend
&:extend(.inline);//增加一个父类


9、避免编译
width:~' calc(100% - 35)';