你的位置:首页 > 网页设计

[网页设计]CSS预处理less基本使用

中文AP nav{    background-color: @maincolor;    width: @wh980;    height: @ht50;}  编译 header nav {  background-color: #aeeeee;  width: 980px;  height: 50px;}  效果 

 

 定义类  .BRradius(@radius:5px){    border-radius: @radius;} 应用 header nav{    background-color: @maincolor;    width: @wh980;    height: @ht50;    /*或*/    .BRradius;    .BRradius(10px);}编译 header nav {  background-color: #aeeeee;  width: 980px;  height: 50px;  border-radius: 10px;} 效果

 

 嵌套规则   //嵌套语法header{  //定义less局部变量变量  //进行四则运算 @navcolor:@maincolor - #111;  width: 1024px;  margin: 0 auto;  nav{      background-color: @navcolor;      width:@wh980;      height: @ht50;      .BRradius(10px);      ul{          list-style: none;          li{              float: left;              width: 100px;                           line-height: @lht50;              a{                  color: @acolor;                  text-align: center;                  text-decoration: none;                  display: block;              //添加&是解析的是同级元素或此元素伪类                  &:hover{                      background-color: #8DEEEE;                  }              }          }      }  }}页面<!DOCTYPE html><html>      <head>            <meta charset="utf-8" />            <title></title>            <link rel="stylesheet/less" type="text/css" href="css/style.less"/>            <script type="text/javascript" src="js/less.min.js" ></script>      </head>      <body>            <header>                  <nav>                        <ul>                            <li><a href="#">首页</a></li>                            <li><a href="#">蔚为简介</a></li>                            <li><a href="#">蔚博客</a></li>                        </ul>                  </nav>            </header>            <section></section>            <footer></footer>      </body></html>效果

 

 编译less

1.浏览器编译less

下载less.min

 <script type="text/javascript" src="js/less.min.js" ></script>

2.nodejs编译

中文 npm install less -g 全局安装less使用lessc命令对less文件进行编译格式:lessc目标文件目录 生成css文件目录