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. Linux 安装配置 Tomcat

    1.下载 tomcat Linux 版本 oracle 官网下载地址:http://tomcat.apache.org/download-80.cgi 百度云盘链接:http://pan.baidu. ...

  2. JS实现AOP拦截方法调用

    //JS实现AOP拦截方法调用function jsAOP(obj,handlers) {    if(typeof obj == 'function'){        obj = obj.prot ...

  3. ArcGIS Earth（原谷歌地球）如何获取高精度矢量地图数据？（shp文件/要素类/kml）

    大家好,这次来分享干货.做地理分析的同学,或者需要使用地图却不知道哪里有矢量数据的时候,怎么办呢? 这次,我就告诉大家哪里能自己手工制作矢量点线面数据!注意哦,是自己绘制的. 使用到的软件: ArcG ...

  4. python 标准库 -- multiprocessing

    multiprocessing 与 threading.Thread 类似 multiprocessing.Process 创建进程, 该进程可以运行用 python 编写的函数. multiproc ...

  5. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

    最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000

  6. Haoop MapReduce 的Partition和reduce端的二次排序

    先贴一张原理图(摘自hadoop权威指南第三版) 实际中看了半天还是不太理解其中的Partition,和reduce端的二次排序,最终根据实验来结果来验证自己的理解 1eg 数据如下 20140101 ...

  7. 最全Oracle环境搭建之.NET程序员初遇Oracle

    前言:如果你习惯了傻瓜式的一步步安装,那么Oracle和.NET搭配,绝对会让你头痛不已. 目前我不敢保证自己理解的Oracle理论部分100%正确,但环境安装过程一定可以收藏以备不时之需. 路这么长 ...

  8. 如何远程调试zookeeper集群

    我们在阅读一些源码的时候,如果能调试源代码将会大大的提高我们的阅读效率.最近在学习zookeeper源码,分享下如何调试zookeeper集群. zookeeper代码,调试环境搭建 1.下载zook ...

  9. Jenkins插件开发

    一.环境配置 不赘述,直接看wiki:https://wiki.jenkins.io/display/JENKINS/Extend+Jenkins 二.内容说明 1.插件代码结构 src/main/j ...

  10. Java 变量类型

    局部变量 成员变量 类变量 Java局部变量 局部变量声明在方法.构造方法或者语句块中: 局部变量在方法.构造方法.或者语句块被执行的时候创建,当它们执行完成后,变量将会被销毁: 访问修饰符不能用于局 ...