【CSS】less 学习小结
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 学习小结的更多相关文章
- CSS选择器学习小结
关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- flex学习小结
接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...
- Python 学习小结
python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- objective-c基础教程——学习小结
objective-c基础教程——学习小结 提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...
- CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- pthread多线程编程的学习小结
pthread多线程编程的学习小结 pthread 同步3种方法: 1 mutex 2 条件变量 3 读写锁:支持多个线程同时读,或者一个线程写 程序员必上的开发者服务平台 —— DevSt ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
随机推荐
- 浅谈java内存分配和回收策略
一.导论 java技术体系中所提到的内存自动化管理归根结底就是内存的分配与回收两个问题,之前已经和大家谈过java回收的相关知识,今天来和大家聊聊java对象的在内存中的分配.通俗的讲,对象的内存分配 ...
- C#与Java对比学习
Eclipse开发环境与VS开发环境的调试对比 数据类型.集合类.栈与队列.迭达.可变参数.枚举 类型判断.类与接口继承.代码规范与编码习惯.常量定义
- WCF入门的了解准备工作
了解WCF, 及WCF入门需要掌握哪里基本概念? 1.准备工作 >1.1 . XML >1.2 . Web Service >1.3 . 远程处理 (RPC) >1.4. 消 ...
- Spring中多个工程停多个资源文件ignoreUnresolvablePlaceholders配置
http://www.imooo.com/ruanjiangongcheng/software-architecture-design/667686.htm
- windbg工具安装配置及dump抓取
安装与配置windbg 安装与配置windbg的symbol(符号) 第一步 下载WinDBG, 第二步 双击下载的文件安装windbg.安装时注意记住安装到那里了. 第三步 windbg访问符号需要 ...
- 找到你在网页中缓存起来的flash文件
通过IE浏览器工具->Internet选项->常规->设置->Internet临时文件->查看文件(找到你在网页中缓存起来的flash文件)
- RabbitMQ系列教程之四：路由（Routing）
(使用Net客户端)在上一个教程中,我们构建了一个简单的日志系统,我们能够向许多消息接受者广播发送日志消息.在本教程中,我们将为其添加一项功能 ,这个功能是我们将只订阅消息的一个子集成为可能. 例如, ...
- 一张图告诉你 canvas 中的 miterLimit 代表着什么
一图胜千言, 图中有一条路径path, 沿着路径描了一条宽度为 width 的边, miterLimit 代表的是, 比例 ab/ac, 其中ac的长度为 1/2 width 来看 mdn 上的描述, ...
- 【hexo】如何在一个小时内搭载个人博客
版权申明:本文为博主原创文章,未经博主允许不得转载.如需转载,请私聊博主. 什么是hexo Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351. 前期准备 安装 ...
- Unity应用架构设计(13)——日志组件的实施
对于应用程序而言,日志是非常重要的功能,通过日志,我们可以跟踪应用程序的数据状态,记录Crash的日志可以帮助我们分析应用程序崩溃的原因,我们甚至可以通过日志来进行性能的监控.总之,日志的好处很多,特 ...