• 当前标签:LESS

程序开发 less的使用语法

less是写框架css样式的好东西,可以快速清晰的写出框架的样式!注意看代码中的注释 浏览器端解析less文件需要一个 less.js 文件,需要在less文件后面加载,less.js 文件需要去less官网下载:http://lesscss.org HTML部分: <!doctype html> <html> <head> <meta charset="utf-8"> <!--引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”--> <link rel="stylesheet/less" href="index.less"> <script src="less.js"></script> <!--你的的less样式文件一定要在引入less.js前先引入。--> <title>Less语法</title> <style> </style> </head> <body> <a href="#" class="button">按钮</a> <button>按钮</button> <section id="fuv"> 今天夜色好美 <p class="p">这是一个段落</p> <h1>标题<span>大丰收</span>标题</h1> <span>段落</span> </section> <span>灯光亮起来</span> <div class="fff">arguments</div> </body> </html> LESS部分: @btnColor:#435; @btn-width:200px; @btn-padding:5px; @btn-radius:5px; *{      box-sizing: border-box; } // 不带参数的 // .borderRadius{ //     -moz-border-radius:@btn-radius; //     -webkit-border-radius: @btn-radius; //     border-radius: @btn-radius; // } // 带参数的 // .borderRadius(@btn_radius){ //     -moz-border-radius:@btn_radius; //     -webkit-border-radius: @btn_radius; //     border-radius: @btn_radius; // } // 默认带值 .borderRadius(@btn_radius:20px){      -moz-border-radius:@btn_radius;      -webkit-border-radius: @btn_radius;      border-radius: @btn_radius; } // 带参数的调用 必须加上值 例:.borderRadius(5px); // 默认带值的调用 例:.borderRadius; //                                     .borderRadius(); //                                 .borderRadius(10px); .button{ // &代表的是它的上一层选择器(在本例中&指的就是.button)      &:hover{          background-color: red;      }      background-color: @btnColor;      color: white;      display: inline-block;      // less中的运算 任何数字或者变量都可以参加运算      // 例如 + - *

2017-05-23 23:25:20 31 2 0
阅读详情
  • 1
前往