less知识总结

LESS是一种 动态样式语言.

    LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。 LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 

一、在客户端使用

1、引入你的 less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

2、然后在<head> 中引入:

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

注意：less样式文件一定要在引入less.js前先引入。

二、举例

在less中输入代码会自动转义成css样式的代码，如下：

在less中：

/*混入 addRaduis(@r)函数定义
//@:1px默认值
10px传的参数*/
.addRaduis(@r){
  border-radius:@r;
}
div{
  width: 200px;
  height: 200px;
  .addRaduis(10px);
}
/*嵌套
实现选择器的继承，减少代码量，同时使代码的机构非常清晰*/
.header{
  width: 100%;
  height: 200px;
  .addRaduis(10px);
  >.banner{
    &::before{
      content:"";
    }
    width: 100%;
    >a{
      text-decoration: underline;
      &:hover{
      text-decoration: none;
      }
    }
    >h3{
      height: 20px;
    }
  }
}

 在css中

/*混入 addRaduis(@r)函数定义
//@:1px默认值
10px传的参数*/
div {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
/*嵌套
实现选择器的继承，减少代码量，同时使代码的机构非常清晰*/
.header {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}
.header > .banner {
  width: 100%;
}
.header > .banner::before {
  content: "";
}
.header > .banner > a {
  text-decoration: underline;
}
.header > .banner > a:hover {
  text-decoration: none;
}
.header > .banner > h3 {
  height: 20px;
}

 

posted @ 2018-09-06 19:58  周粥  阅读(110)  评论(0)    收藏  举报