less学习记录

中文学习网站：

//变量
@background-color:white;
@text-color:black;
@width:100px;
@height:200px;
.menu_width{
  width:@width;
}
.app0{
  background-color: @background-color;
  color:@text-color;
  width: @width;
  height: @height;
}

/**********************************************************************/
//Mixins
//第一种情况，mixin会在编译后的css中
#default{
  background-color: #00a0e9;
  font-size:26px;
}
#small_size{
  #default;
  width:50px;
  height:50px;
}
#big_size{
  width:100px;
  height:100px;
  #default;
}
//编译成css
#default{
  //依旧在css的文件中
  background-color: #00a0e9;
  font-size:26px;
}
#small_size{
  background-color: #00a0e9;
  font-size:26px;
  width:50px;
  height:50px;
}
#big_size{
  width:100px;
  height:100px;
  background-color: #00a0e9;
  font-size:26px;
}
//第二种，在default后面加括号（）
#default（）{
  background-color: #00a0e9;
  font-size:26px;
}
#small_size{
  #default;
  width:50px;
  height:50px;
}
#big_size{
  width:100px;
  height:100px;
  #default;
}

//编译的结果为：后面没有#default
#small_size{
  background-color: #00a0e9;
  font-size:26px;
  width:50px;
  height:50px;
}
#big_size{
  width:100px;
  height:100px;
  background-color: #00a0e9;
  font-size:26px;
}

/**********************************************************************/
//Mixins可以传参数，例如：
#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#big-circle{
  #circle(100px)
}
//编译的结果：

#small-circle{
  background-color: #4CAF50;
  border-radius: 100%;

  width: 25px;
  height: 25px;
}

#big-circle{
 background-color: #4CAF50;
  border-radius: 100%;

  width: 100px;
  height: 100px;
}
/**********************************************************************/

//嵌套
ul{
  width:100px;
  height:100px;
  margin:10px;
  padding: 10px;
  box-sizing: border-box;
  list-style: none;
  li{
    width:80px;
    height:30px;
    background-color: #00CC7D;
    margin: 10px 0px;
  }
}
//编译的结果为：
ul{
  width:100px;
  height:100px;
  margin:10px;
  padding: 10px;
  box-sizing: border-box;
  list-style: none;
}
ul li{
  width:80px;
  height:30px;
  background-color: #00CC7D;
  margin: 10px 0px;
}

/*********************************************************************/
//运算,例子div1的宽度是div0的两倍
@frist-width:100px;
.div0{
  width:@frist-width;
}
.div1{
  width: @frist-width*2;
}

/***********************************************************************/
//函数
@var_color:#004590;
//#004590-->rgba(0, 69, 144, 1)
//前三个是红绿蓝三原色在预期色彩中的量，第四个的值表示透明度
div{
  width:200px;
  height:200px;
  background-color: @var_color;
  &:hover{
    background-color: fadeout(@var_color,50%);
  }
}
//编译的结果：
div{
  width:200px;
  height:200px;
  background-color: #004590;
}
div:hover{
  background-color: rgba(0, 69, 144, 0.5);
}

url：

@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

@themes: "../../src/themes";

// 用法
@import "@{themes}/tidal-wave.less";

选择器：

@mySelector: banner;

// 用法
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
编译为：
. banner{
    font-weight: bold;
  line-height: 40px;
  margin: 0 auto; 
}

继承：

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}
编译为：
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}
写法有：
.a:extend(.b) {}

// 上面的代码块与下面这个做一样的事情
.a {
  &:extend(.b);
}
也可以继承多个：用逗号隔开
.a:extend(.b, .c){
    
}

TODO:拓展