中文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. POJ1321 棋盘问题 —— DFS回溯

    题目链接:http://poj.org/problem?id=1321 棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions ...

  2. 代码块、继承、this、super、final(java基础知识八)

    1.代码块的概述和分类 * A:代码块概述 * 在Java中,使用{}括起来的代码被称为代码块.* B:代码块分类 * 根据其位置和声明的不同,可以分为局部代码块,构造代码块,静态代码块,同步代码块( ...

  3. poj 1469 COURSES 解题报告

    题目链接:http://poj.org/problem?id=1469 题目意思:有 N 个人,P个课程,每一个课程有一些学生参加(0个.1个或多个参加).问 能否使得 P 个课程 恰好与 P 个学生 ...

  4. 【Java】DateUtil（1）

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  5. AJAX路径问题

    如果发AJAX请求,看发送请求消息的路径,如果看到报404的错,而这个 时候看下发送头部的路径,如果看到%20,这个时候有可能就是写路劲的时候,不小心按了一个空格

  6. c#操作rabbitmq

    今天将会介绍如果使用rabbitmq进行简单的消息入队,出队操作,因为本文演示的环境要用到上文中配置的环境,所以要运行本文sample,请先按上一篇中完成相应环境配置.         首先,我们下载 ...

  7. HDU 5881 Tea (模拟)

    题意:有一壶水, 体积在 LLL 和 RRR 之间, 有两个杯子, 你要把水倒到两个杯子里面, 使得杯子水体积几乎相同(体积的差值小于等于1), 并且使得壶里剩下水体积不大于1. 你无法测量壶里剩下水 ...

  8. ORACLE PL/SQL 实例精解之第四章 条件控制：if 语句

    4.1 IF 语句 IF语句两种形式:IF-THEN IF-THEN-ELSE 使用IF-THEN,可以指定需要执行的一组动作. IF-THEN-ELSE语句指定两组动作 1. IF-THEN TRU ...

  9. E20180410-hm

    preface  n. 序言,引语; 开端,前奏; [宗] (弥撒的) 序诵,序祷;        vi. 作序; 作为…的序言,作为…的开端; 给…作序; 开始,导致; continue vi. 持 ...

  10. POJ2366【二分】

    题意: 给两个序列,问两个序列中是否有两个数加起来=1e4: 思路: 直接先排序好b序列,然后枚举a序列,二分查找b序列就好了: 贴一发挫code-. //#include <bits/stdc ...