中文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. 基于C#实现Windows服务状态启动和停止服务的方法

    网址:http://www.jb51.net/article/89230.htm

  2. 【转载】U3D 游戏引擎之游戏架构脚本该如何来写

    原文:http://tech.ddvip.com/2013-02/1359996528190113.html Unity3D 游戏引擎之游戏架构脚本该如何来写   2013-02-05 00:48:4 ...

  3. codeforces 691A A. Fashion in Berland(水题)

    题目链接: A. Fashion in Berland 题意: 思路: AC代码: //#include <bits/stdc++.h> #include <iostream> ...

  4. 屏幕适配-使用autoLayout

    当遇见xib中无法删除的控件时. 将这个错误的控件拖离本xib(第一个元素.xib文件是有许多元素组成的集合),确保这个xib是正确的.重新创建一个xib文件,将这个正确的xib元素整个复制过去. 在 ...

  5. UVA 11174 Stand in a Line 树上计数

    UVA 11174 考虑每个人(t)的所有子女,在全排列中,t可以和他的任意子女交换位置构成新的排列,所以全排列n!/所有人的子女数连乘   即是答案 当然由于有MOD 要求逆. #include & ...

  6. codeforces round 421 div2 补题 CF 820 A-E

    A Mister B and Book Reading  O(n)暴力即可 #include<bits/stdc++.h> using namespace std; typedef lon ...

  7. 02_使用httpurlconnection提交参数_get

  8. 百度也推出公共DNS服务:180.76.76.76（转载）

    转自:http://www.cnbeta.com/articles/352221.htm

  9. C++开发工程师面试题库 150~200道

    151.简述需求分析的过程和意义 152.网状.层次数据模型与关系数据模型的最大的区别是什末 153.软件质量保证体系是什末 国家标准中与质量保证管理相关的几个标准是什末 编号和全称是什末号和全称是什 ...

  10. poj2186【利用强连通分量】

    题意: 有n头奶牛,然后有个规则是A->B,B->C,那么A->C: A觉得B受欢迎,B觉得C受欢迎,那么A觉得C受欢迎: 求:被其他所有牛都欢迎的牛的数量: 思路: 原来的思路: ...