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>