0%

less入门

变量

定义变量

  • 颜色

    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;
}