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 ...
随机推荐
- VS附加到进程调试的方法及应用场景
应用场景:.Net做网站时,代码量很大的时候,每次调试一个网页都编译整个网站是不显示的,而且有时候整个网站是存在错误的,通不过编译.这时你又要调试某部分网页,就可以通过附加到进程调试.方法如下: (1 ...
- C/C++ 笔试、面试题目大汇总(二)
一.找错题 试题1: void test1() { charstring[10]; char* str1 ="0123456789"; strcpy( string, str1 ) ...
- window平台安装MongoDB
官网:www.mongodb.org 安装-->设置环境变量-->启动 1.下载: 根据系统下载 32 位或 64 位的 .msi 文件,下载后双击该文件,按提示安装即可, 2.设置安装目 ...
- Python PIL ImageDraw 和ImageFont模块学习
ImageDraw 新建一个空白图片为本文作示例,新建空白文件的方法 见Image模块,Image.new: import Image blank = Image.new("RGB" ...
- Car---hdu5935(简单题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5935 题意:有一辆车在马路上行驶,速度不变或增加,然后警察在某整数点时刻记录下了这辆车所经过的位置,共 ...
- rabbitMq 转自 http://gaoyangang.iteye.com/blog/1566600
rabbitMq 转自 http://gaoyangang.iteye.com/blog/1566600
- sqlserver 中含有某字符串
查找 sqlserver 中字符串的ascii码SET TEXTSIZE 0-- Create variables for the character string and for the curre ...
- 用css实现云状提示框
经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...
- http请求和http响应详细解析
HTTP请求格式 当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息,HTTP请求信息由3部分组成: l 请求方法URI协议/版本 l 请求头(Request Hea ...
- C语言:其他进制转换为十进制(方法二)
#include<stdio.h> #include<math.h> #include<string.h> #include<ctype.h> //其他 ...