CSS预处理语言 less (一) 初识less

// hello less
// 定义一个变量
@mainColor: #e92322;
@width: 200px;
// /* 公共样式 */
body {
background-color: @mainColor;
}
.container {
width: 1000px;
background-color: #ff0;
.row {
height: @width;
div {
border-left: 1px solid @mainColor;
> a {
color: red;
&:hover {
color: green;
}
}
}
}
}

/* 定义一个类 */

// // 定义一个代码段，（）里的内容是参数，参数中:后的内容是参数的默认值（没有传参数）
.roundedCorners(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// /* 定义的类应用到另个一个类中 */
#header {
.roundedCorners();
}
#footer {
}
@h: 100px;
@import url('_p.less');

//导入文件

body {
background-color: lighten(#000, 10%);
//内建函数 将这个颜色变亮
color: darken(#fff, 10%);
//内建函数 将这个颜色变暗
}

less在浏览器中运行需要加载一个Js文件 作为编译器 实质上 他做了一个HTTP请求通过js转码 并重新加载转码过后的 csS文件 在开发过程中使用 但实际项目绝对不行 转换延迟过大

<link rel="stylesheet/less" href="less/main.less">
<script src="lib/less/less.min.js"></script>