中文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. linux驱动开发之九鼎板载蜂鸣器驱动测试【转】

    本文转载自:http://whylinux.blog.51cto.com/10900429/1932491 字符设备驱动用的fileopretion结构体. 1.板载蜂鸣器的驱动测试 我手里有一个BS ...

  2. vfork函数的使用【学习笔记】

    #include "apue.h" ; int main(void) { int var; pid_t pid; ; printf("before vfork\r\n&q ...

  3. Axios 请求配置参数详解

    axios API 可以通过向 axios 传递相关配置来创建请求 axios(config)   // 发送 POST 请求   axios({   method: 'post',   url: ' ...

  4. String bulit-in function

    tip: 和tuple一样,字符串也是不可变的类型,字符串的内建函数有非常多,我们一一举例来看看他们的作用 下面是用dir(str) 输出的内容: ['__add__', '__class__', ' ...

  5. C#在一段数字区间内随机生成若干个互不相同的随机数

    /// <summary>        /// Random ra=new Random();  系统自动选取当前时前作随机种子:        /// Random ra=new Ra ...

  6. codeforces 665E E. Beautiful Subarrays(trie树)

    题目链接: E. Beautiful Subarrays time limit per test 3 seconds memory limit per test 512 megabytes input ...

  7. vue 随笔3

    在整个vue项目中index.js只能有一个 ,创建vue组件实例的代码只能写在main.js中或者index.js中,别的文件中都是使用export default 常量 或者是方法

  8. 如何在XCode中更改iPhone或iPad模拟器类型

    如何在XCode中更改iPhone或iPad模拟器类型 参考方法一(永久,一旦设置后,每次运行指定的模拟器):(1)选择顶层菜单Project 中的 Set Active Executable(2)根 ...

  9. org.hibernate.hql.ast.QuerySyntaxException: Student is not mapped [from Student as stu where stu.sclass=?]

    java.lang.IllegalArgumentException: org.hibernate.hql.ast.QuerySyntaxException: t_aty_disease is not ...

  10. Collection View Programming Guide for iOS---(一)----About iOS Collection Views

    Next About iOS Collection Views 关于iOS Collection Views A collection view is a way to present an orde ...