【笔记】Less基础知识点

/* 定义变量 */
@background-color: #ffffff;
@text-color: #1a237e;

p {
  /* 使用变量 */
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul {
  background-color: @background-color;
}

li {
  color: @text-color;
}

#circle {
  background-color: #4caf50;
  border-radius: 100%;
}

#small-circle {
  width: 50px;
  height: 50px;
  /* 引用#circle的样式 */
  #circle;
}

/*  id 为 circle1 的元素不会应用此样式 */
#circle1() {
  background-color: #4caf50;
  border-radius: 100%;
}

#big-circle {
  width: 100px;
  height: 100px;
  /* 引用#circle1的样式 */
  #circle1;
}

/* Mixins可以定义参数，如果不传参，默认是25  */
#circle2(@size: 25px) {
  background-color: #4caf50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#big-circle2 {
  width: 100px;
  height: 100px;
  /* 引用#circle2的样式 */
  #circle2(100px);
}

ul {
  background-color: #03a9f4;
  padding: 10px;
  list-style: none;

  li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

ul {
  background-color: #03a9f4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

@div-width: 100px;
@color: #03a9f4;

div {
  height: 50px;
  display: inline-block;
}

#left {
  width: @div-width;
  background-color: @color - 100;
}

#right {
  width: @div-width * 2;
  background-color: @color;
}

@var: #004590;

div {
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover {
    background-color: fadeout(@var, 50%);
  }
}

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}