1. less 使用

less 可直接使用浏览器解析 or  使用node 的grunt/gulp 解析成传统css 。

推荐开发环境直接使用less 文件调试， 生产环境部署解析好的css

2. less 在浏览器中的使用

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <link rel="stylesheet/less" type="text/css" href="example.less" />

     <script src="less.min.js" type="text/javascript"></script>

 </head>

 <body>

 <div class="box">

     啊啊c

     <div>呵呵</div>

 </div>

 </body>

 </html>

注意点：

1）一定要在less文件之后引入 less.js

2）可在引入less.js 文件之间定义less 变量，修改默认参数，例如

 <!-- set options before less.js script -->

 <script>

   less = {

     env: "development",

     logLevel: 2,

     async: false,

     fileAsync: false,

     poll: 1000,

     functions: {},

     dumpLineNumbers: "comments",

     relativeUrls: false,

     globalVars: {

       var1: '"string value"',

       var2: 'regular value'

     },

     rootpath: ":/a.com/"

   };

 </script>

 <script src="less.js"></script>

3. 使用grunt 解析

 module.exports = function (grunt) {

     grunt.initConfig({

         less: {

             development: {

                 options: {

                     compress: false,

                     yuicompress: false

                 },

                 files: {

                     "dest/example.css": "src/example.less"

                 }

             },

             production: {

                 options: {

                     modifyVars: {

                         imagepath_page: '"/misc/images/"',

                         imagepath: '"/misc/images/"'

                     },

                     compress: true,

                     yuicompress: true,

                     optimization: 2

                 },

                 files: {

                     "dest/example.css": "src/example.less"

                 }

             }

         },

     });

     grunt.loadNpmTasks('grunt-contrib-less');

     grunt.registerTask('default', ['less']);

 }

注意点：

1）开发环境可以仅使用development 的参数 ， 生产环境使用production的参数，当两者都存在时，将采用后者的参数，上文例子采用production的参数

2）

【CSS】less 学习小结的更多相关文章

  1. CSS选择器学习小结

    关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...

  2. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  4. Python 学习小结

    python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...

  5. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  6. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  7. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

  8. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  9. pthread多线程编程的学习小结

    pthread多线程编程的学习小结  pthread 同步3种方法: 1 mutex 2 条件变量 3 读写锁:支持多个线程同时读,或者一个线程写     程序员必上的开发者服务平台 —— DevSt ...

  10. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

随机推荐

  1. 关于HBuilder的一些使用技巧。

    在HBuilder中一个名为扩展代码块的功能. 扩展代码块 看,它就在上方工具栏的工具选项中,分为自定义html代码块, 自定义js代码块, 自定义css代码块, 自定义jquery代码块. 以下便是 ...

  2. thinkphp 单字母函数

    在ThinkPHP中有许多使用简便的单字母函数(即快捷方法),可以很方便开发者快速的调用,但是字母函数却不方便记忆,本文将所有的字母函数总结一下,以方便以后查找. 1.U() URL组装 支持不同UR ...

  3. 深入浅出HTTP协议

    超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...

  4. PHP中单引号和双引号的区别

    双引号里面的字段会经过编译器解释,然后再当作HTML代码输出:单引号里面的不进行解释,直接输出: PHP引号使用原则 1.字符串的值用单引号 2.PHP中尽量用单引号,HTML代码全部用双引号 3.在 ...

  5. CoolBlog开发笔记第3课:创建Django应用

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 前言 经过上一节我们已经创建了CoolBlog工程,但是关于CoolBlog的功能代码 ...

  6. 探索Windows命令行系列(2)：命令行工具入门

    1.理论基础 1.1.命令行的前世今生 1.2.命令执行规则 1.3.使用命令历史 2.使用入门 2.1.启动和关闭命令行 2.2.执行简单的命令 2.3.命令行执行程序使用技巧 3.总结 1.理论基 ...

  7. .net core web api + Autofac + EFCore 个人实践

    1.背景 去年时候,写过一篇<Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统>,采用Asp.net Web API + Element-UI.当时主要是为了 ...

  8. Sqlserver 2005 跨数据库 导入数据

    --Sqlserver 2005 跨数据库 导入数据:--SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/O ...

  9. Python将数据插入到数据库时遇到单引号插入错误的问题

    这才是真正的解决方法,真不知道有些人连试都没试过就乱转载 比如你要插入一个字符串,是一个变量 如:str = "I'am a handsom boy" 由于这个字符串包含',插入数 ...

  10. Openfire插件开发图解

    概述 Openfire插件开发是Openfire的精髓之一,支持插件热插拔,还可以方便的在web端进行管理插件.插件分为两种,一种是以服务为主的控制台插件,一种是包括页面或对外开放Servlet接口. ...