less入门

发表于 更新于 分类于 阅读次数： 本文字数： 85 阅读时长 ≈ 1 分钟

变量

定义变量

  • 颜色

    1
    2
    3
    4
    5
    @bgColor: #34c5c5;

    body{
        background: @bgColor;
    }

  • url

    1
    2
    3
    4
    5
    @url: "./xxx/"

    body{
        background: url("@{url}dog.png")
    }

    最后url就会被合成，方便改路径

  • 声明值

    1
    2
    3
    4
    5
    @background: {background:red;};

    body{
        @background();
    }

嵌套

可以把选择器写在括号中，表示下一级选择器

1
2
3
4
5
6
7
8
9
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

解析完毕后

1
2
3
4
5
6
7
8
9
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

&表示当前选择器的父选择器

混合

可以在css中使用其它选择器里定义的属性，比如

1
2
3
4
5
6
7
8
9
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}