Less

1.什么是Less?

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。称这种语言叫语法糖（糖衣语法）

使用less的方法：
1.服务端：nodejs
2.浏览器：在浏览器环境中使用 Less
3.客户端：koala工具
 
Less原理
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less没有裁剪CSS原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
less文件中，你想写less就写less，你想css就写css，混着写都是可以的
 
Less的使用：
引入 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

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

注意：Less源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

比如：

<html>
<head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="container">
   <h1>Example using Nested Directives</h1>
   <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>

创建文件style.less

.container{
  h1{
       font-size: 25px;
       color:#E45456;
 }
  p{
       font-size: 25px;
       color:#3C7949;
  }

 .myclass{
  h1{
        font-size: 25px;
        color:#E45456;
  }
  p{
       font-size: 25px;
       color:#3C7949;
  }
 }
}
将style.less文件编译为style.css： lessc styles.less styles.css

生成的 CSS

.container h1 {
  font-size: 25px;
  color: #E45456;
}
.container p {
  font-size: 25px;
  color: #3C7949;
}
.container .myclass h1 {
  font-size: 25px;
  color: #E45456;
}
.container .myclass p {
  font-size: 25px;
  color: #3C7949;
}

 

定义变量

@变量名: 变量值;        //格式

@bgColor: #000;      //格式举例

创建文件style.less

// 定义变量
@bgColor: #000;

// 引用变量
body{
    background-color: @bgColor;
}

less文件编译为 css 文件后

body{
    background-color: #000;
}

使用嵌套

正常css代码

.container {
  width: 1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

创建文件style.less

.container {
  width: @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

  div {
    width: 100px;

    .hello {
      background-color: #00f;
    }

  }
}

less文件编译为 css 文件后

.container {
    width: 1024px;
}

.container > .row {
    height: 100%;
}

.container > .row a {
    color: #f40;
}

.container > .row a:hover {
    color: #f50;
}

.container div {
    width: 100px;
}

.container div .hello {
    background-color: #00f;
}

Mixin

把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了

（1）在 less 文件中定义一个类

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

（2）在 less 文件中引用上面这个类：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

header 中的引用没有带参数，表示参数为缺省值； footer 中的引用带了参数，那就用这个参数。

Import

 将不同的样式放到多个文件中，最后通过@import 的方式合并

被引用的less文件，名为_button1.less：

.btn{
  line-height: 100px;
  color: @btnColor;
}

在 main.css 中引用上面的 _button1.less

@btnColor: red;

@import url(`_button1.less:');   

body{
  width: 1024px;
}

 

posted on 2019-07-25 10:10  conlover  阅读(150)  评论(0)  编辑  收藏  举报

导航