Less的学习（一）

1、html部分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="less/test.less" />
    <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
    <script></script>
</head>
<body>
    <div id="header" style="border:1px solid red;">XXXXXXXXXXXXXXXXX<p>aaaaa</p></div>
    <h2 style="border:1px solid blue;">111111</h2>
</body>
</html>

2、less/test.less文件内容

@color:#4D926F;

.rounded-corners (@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   -ms-border-radius: @radius;
   -o-border-radius: @radius;
   border-radius: @radius;
}


#header {
   color:@color;
   .rounded-corners(10px);
}
h2 {
   color:@color;
   .rounded-corners;
}


#header {
   h1 {
      font-size: 26px;
      font-weight: bold;
   }
   p {
      font-size: 12px;
      a {
         text-decoration: none;
         &:hover {
            border-width: 1px
         }
      }
   }
}

3、显示效果图

备注：要挂在在服务器上才能看到效果。

posted on 2016-03-08 10:12 雨为我停阅读(175) 评论(0) 编辑收藏举报