中文API
http://lesscss.cn
 
变量
@变量名:变量值
 
@maincolor:#aeeeee;
@acolor:#ffffff;
@ht200:200px;
@ht50:50px;
@wh980:980px;
@lht50:50px;
 
应用
 
header 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编译

中文网http://www.nodejs.cn
官网https://www.nodejs.org
 
在环境变量添加安装路径
使用node安装编译less
通过命令 npm install less -g 全局安装less
使用lessc命令对less文件进行编译
格式：lessc目标文件目录 生成css文件目录

CSS预处理less基本使用的更多相关文章

  1. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  4. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  5. CSS预处理语言

    CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...

  6. CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...

  7. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

  8. 前端面试：css预处理

    css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass l ...

  9. Less：Less（CSS预处理语言）

    ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...

  10. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

随机推荐

  1. SDUT OJ 2892 A (字典树问题-输出出现次数最多的字符串的出现次数，60ms卡时间，指针+最后运行完释放内存)

    A Time Limit: 60ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 给出n(1<= n && n <= 2*10^6)个字 ...

  2. POJ2976 Dropping tests —— 01分数规划 二分法

    题目链接:http://poj.org/problem?id=2976 Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  3. Objective-C - - 字符串与数字互相转换

    NSString *string = @"123"; // 1.字符串转int int intString = [string intValue]; // 2.int装字符串 NS ...

  4. html5--6-10 CSS选择器7--伪类选择器

    html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...

  5. docker 初试---常用命令

    http://blog.csdn.net/wsscy2004/article/details/25878363 常用命令 查看容器的root用户密码 docker logs <容器名orID&g ...

  6. hdu2552

    点击打开链接 思路: 1.tan(a+b) = ( tan(a) + tan(b) ) / (1 – tan(a) * tan(b) ) 2.tan( atan(x) ) = x arctan(1/s ...

  7. codeforces 690D1 D1. The Wall (easy)(dfs)

    题目链接: D1. The Wall (easy) time limit per test 0.5 seconds memory limit per test 256 megabytes input ...

  8. I.MX6 u-boot 2009 lvds hdmi lcd 补丁

    /************************************************************************* * I.MX6 u-boot 2009 lvds ...

  9. 修改cocos2dx 背景颜色

    只需要在AppDelegate的设置FPS后面加入一行: glClearColor(1.0, 1.0, 1.0, 1.0); 同理如果要修改成其它颜色,只需修改里面的值即可( r, g, b, a);

  10. 微信小程序服务类目大坑：特殊行业服务类目所需资质材料

    作为一个技术开发人员,遇到特殊行业服务类目所需资质材料,只能叫苦连天了,妈的,这个不是技术可以解决的问题,如果技术可以解决的问题都不是问题. 百牛信息技术bainiu.ltd整理发布于博客园 特殊行业 ...