<html>
<head>
<meta charset="utf-8">
<title>LESS----CSS预处理语言</title>
<meta name="keyword" content="LESS----CSS预处理语言">
<meta name="discription" content="LESS----CSS预处理语言">
<style>
/* Less(Leaner Style Sheets的缩写)是一门向后兼容的CSS扩展语言. */
/* 1 变量 */
@sky-blue: #5DADBF;
header {
color: @sky-blue;
}
/* 2 混合 */
.bordered {
border: 1px solid red;
}
.box {
.bordered;
}
/* 3 嵌套 */
#head {
.left-logo {}
.right-msg {}
&:after {}
}
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/bg.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
/* 4 运算 */
@len: 20mm+6cm; //8cm
@color: #ccc/2;
/* 5 calc特例 */
/* 为了与css保持兼容,calc()并不对数学表达式进行结算,但是在嵌套函数中会计算变量和数学公式的值. */
@var: 50vh/2;
with: calc(50%+(@var -20px));
/* 还是该表达式 */
/*6 Escaping ~ */
/* ~符号可以使用随意的字符串作为属性或者字符串,~符号内部内容除了插值没有任何改变 */
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
/* 7 函数 */
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
/* 8 Namespaces and Accessors */
/* 有时候，你可能想要将你的mixin分组，或为了组织目的
或者只是提供一些封装。 您可以在Less中很直观地做到这一点
。您想要在#bundle下捆绑一些mixin和变量，以便以后重用或分发： */
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab {
...
}
.citation {
...
}
}
#header a {
color: orange;
#bundle>.button;/* 等价于#bundle.button */
}
/* 9 作用域（Scope） */
/* Less中的范围与编程语言非常相似。 变量和mixin首先在本地查找，如果找不到，编译器将查找父范围，依此类推。 */
@var: red;
#page {
@var: white;
#header {
color: @var; /* white */
}
}
/* Mixin和变量定义不必放在引用它们的行之前。 所以下面的Less代码和前面的例子是一样的： */
@var: red;
#page {
#header {
color: @var; /* white */
}
@var: white;
}
/* 10 注释(comments) */
/* 一个块注释
* style comment! */
@var: red; // 这一行被注释掉了！
@var: white;
/* 10 导入 (inporting) */
@import "main";
@import "head.css";
</style>
</head>
<body>
<script>
</script>
</body>
