中文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. IE9不能直接引用Console

    问题: 公司有个项目,功能很简单,读取业务数据,展示在页面上. 一个很简单的问题,却因为目标浏览器是IE9,卡了三天. 前端给的反馈是: 在IE9下,程序一会儿对,一会儿不对--第一次刷不出来,多刷几 ...

  2. docker pure-ftp 搭建ftp服务器

    参考:https://hub.docker.com/r/stilliard/pure-ftpd/ docker-compose.yml: ftp: image: stilliard/pure-ftpd ...

  3. tload

    tload命令以图形化的方式输出当前系统的平均负载到指定的终端.假设不给予终端机编号,则会在执行tload指令的终端机显示负载情形. 语法 tload(选项)(参数) 选项 -s:指定闲时的刻度: - ...

  4. 构造方法，重载，static，math类(java基础知识七)

    1.构造方法概述和格式 * A:构造方法概述和作用     * 给对象的数据(属性)进行初始化 * B:构造方法格式特点     * a:方法名与类名相同(大小也要与类名一致)     * b:没有返 ...

  5. 推箱子 Sokoban（华中农业比赛）

    点这里 打开题目链接   点击打开链接 题目就是我们玩过的推箱子: 一顿暴力广搜:加状态标记.状态压缩需要用到一个类似于康拓的思想来压缩:所以容易TLE,搜索就是用一个int型的数字来表示一个状态, ...

  6. I.MX6 新版、旧版u-boot不兼容问题

    /************************************************************************* * I.MX6 新版.旧版u-boot不兼容问题 ...

  7. [POI2007] 大都市

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1103 [算法] 树链剖分 时间复杂度 : O(NlogN ^ 2) [代码] #in ...

  8. vs2008打开类视图，看不到类的解决方法

    去工程文件中删除ncb文件,重新打开工程

  9. django基础知识

    一.django的安装 1. pip3 install django 2. 把安装路径加到环境变量里以便以后启动admin相关命令,在windows系统中---我的电脑---属性----高级系统设置- ...

  10. Android EditText实现小数点后几位的终级方案

    有时候,我们用EditText的时候,会要求输入小数点后几位,遇到过几次这样的需求,这次把它给记下来,方便以后使用 /** * 小数位数 */ public class PointLengthFilt ...