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. ②springMVC入门

    1 1.1      需求 以案例作为驱动. springmvc和mybaits使用一个案例(商品订单管理). 功能需求:商品列表查询 1.2      环境准备 数据库环境:mysql5.1

  2. js 定时跳转， 格式化字符串时间

    效果 1.js中将一字符串表示的系统时间转换为Date时间对象 //js中将一串字符串转换为date类型,主要是先过滤字符,然后分割开 function parseToDate(strTime) { ...

  3. mysql创建外键出错（注意数据库表字段排序）

    1.  两个字段的类型或者大小不严格匹配.例如,如果一个是int(10),那么外键也必须设置成int(10),而不是int(11),也不能是tinyint.另外,你还必须确定两个字段是否一个为 sig ...

  4. 例题.点击按钮显示内容+弹窗效果+ajax

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. wampserver

  6. zepto源码--filtered, contains,funcArg,setAttribute,className,deserializeVale--学习笔记

    几个方法 1.filtered 目标是对节点按照一定的选择器进行过滤. 如果传入了过滤选择器,则在nodes节点下,选择符合选择器的节点: 如果没有传入选择器,则返回节点本身,转化为zepto节点. ...

  7. 集合类（Objective-C & Swift）

    内容提要: 本文前两部分讲了Cocoa的集合类和Swift的集合类,其中Cocoa提供的集合类包括NSArray.NSMutableArray.NSDictionary.NSMutableDictio ...

  8. [LeetCode]题解（python）：033-Search in Rotated Sorted Array

    题目来源 https://leetcode.com/problems/search-in-rotated-sorted-array/ Suppose a sorted array is rotated ...

  9. JavaScript学习之对象

    JavaScript对象 一.对象简介 JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型.注意:对象只是一种特殊的数据.对象拥有属性和方法. 1 ...

  10. 利用HTML和JS制作隔行换背景颜色的表格

    1.源代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...