introcuding less css with less.js, using webcompiler ext
1.html [watch out for the !js load sequence and the attribute of !rel stylesheet/less!]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="styles/lesspractitioner.less" type="text/css" rel="stylesheet/less" />
<script src="styles/less.js"></script> </head>
<body>
show less compiled
<div class="box">
box
</div>
</body>
</html>
2.less code
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
background-color: @base;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div {
.box-shadow(0 0 5px, 30%)
}
}
introcuding less css with less.js, using webcompiler ext的更多相关文章
- jquery,js引入css文件,js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
- css文件和js文件后面带一个问号
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
- css文件和js文件后面带一个问号----2015-1103
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- amazeui中css组件、js组件、web组件的区别
amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- set CSS style in js solutions All In One
set CSS style in js solutions All In One css in js set each style property separately See the Pen se ...
随机推荐
- reduce()
Professional.JavaScript.for.Web.Developers.3rd.Edition.Jan.2012 var value = [1,2,3,4,5]; var sum = v ...
- 六 mybatis高级映射(一对一,一对多,多对多)
1 订单商品数据模型 以订单商品数据为模型,来对mybaits高级关系映射进行学习.
- [Virtualization][SDN] 讲的很好的SDN软件定义网络视频课程
51CTO的免费课程,开始以为是扯蛋的,后来看了一下,讲的很好.注册一下,免费的. 只看了导论,挺好的. http://edu.51cto.com/course/course_id-4466.html
- css层叠选择
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- docker squid---but git proxy should specify by git config --global http.proxy http:...
Usage of loopback devices is strongly discouraged for production use. Either use `--storage-opt dm.t ...
- 关于pom.xml的一些问题的理解
最近在pom上出了一些问题,搞了一天才理解了一些问题,记录一下. 当在覆盖本地repository包之后,pom.xml上面出现了一个x. 当mvn->update project之后,还是有许 ...
- Mixing Delphi and C++(相互调用)
Mixing Delphi and C++ You have a TStringList and <algorithm>. What can you do? Quite a lot, ac ...
- C code 字符串与整数的相互转化
#include<stdio.h> int str_to_int(const char *str,int *num); void int_to_str(char str[],const i ...
- php--http与https的区别
在URL前加https://前缀表明是用SSL加密的.你的电脑与服务器之间收发的信息传输将更加安全. Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定. http和ht ...
- UITableView & UITableViewController
内容概要: 本文先讲解了UITableView概述,然后主要从应用方面讲解了UITableViewController(包括add.delete.move单元cell的操作,以及UITableView ...