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的更多相关文章

  1. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  2. css文件和js文件后面带一个问号

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  3. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  4. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  5. css文件和js文件后面带一个问号----2015-1103

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  6. amazeui中css组件、js组件、web组件的区别

    amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...

  7. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  8. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  9. 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 ...

随机推荐

  1. ArcMap 标注、注记、图形文本

    标注.注记.图形文本 2016年8月10日10:29 ArcMap中怎样向地图添加文本,其中标注与注记是重点内容,此处对此进行总结. 参考链接: ①地图文本基本词汇: 什么是文本? ArcGIS 提供 ...

  2. 浅析C++的内存管理

    在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/ 静态存储区和常量存储区. 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储区.里面的变量通常是局部变量.函数参 ...

  3. MyBatis代码自动生成

    MyBatis的代码自动生成的功能,由于MyBatis属于一种半自动的ORM框架,所以主要的工作就是配置Mapping映射文件,但是由于手写映射文件很容易出错,所以可利用MyBatis生成器自动生成实 ...

  4. docker rabbitmq

    docker run -d --hostname my1 --name dome-rabbit -p 15673:5672 -p 15674:15672 -e RABBITMQ_ERLANG_COOK ...

  5. GPG操作——签名验证

    问题描述: 可能大家都遇到过软件在下载过程中由于网络原因导致下载的软件体积与实际软件体积不符.最常见的办法是对待下载文件附加一个摘要文件.这种做法比较常见,也比较容易实现.但是,还是会有一个问题:如果 ...

  6. IE中的fireEvent和webkit中的dispatchEvent

    拿浏览器的click事件来说: 在IE浏览器中如果一个element没有注册click事件,那么直接调用的话会出现异常!当然如果你注册了没有什么可说的. 那么如果使用fireEvent来处理,clic ...

  7. .SQL Server中 image类型数据的比较

    原文:.SQL Server中 image类型数据的比较 在SQL Server中如果你对text.ntext或者image数据类型的数据进行比较.将会提示:不能比较或排序 text.ntext 和 ...

  8. JavaScript学习之DIV层与图像

    DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距 ...

  9. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  10. <dependency>spring-webmvc</dependency>

    Spring 4.2.0.RELEASE版本: <dependency> <groupId>org.springframework</groupId> <ar ...