Less的学习
Posted 实之华之兹乃兼求,逆风兮,顺风兮,无阻我飞扬.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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、显示效果图
备注：要挂在在服务器上才能看到效果。
以上是关于Less的学习的主要内容，如果未能解决你的问题，请参考以下文章
免费下载全套最新014Less视频教程+教学资料+学习课件+源代码+软件开发工具