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:拓展