less样式表
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
Less缺点
less语法
变量
1
2
3
4
5
6
7
8
|
//LESS源码 @ color : #4D926F ; #header{ color :@color; } h 2 { color :@color; } |
1
2
3
4
5
6
7
|
/*编译后的CSS*/ #header{ color : #4D926F ; } h 2 { color : #4D926F ; } |
混合
1
2
3
4
5
6
7
8
9
10
11
12
|
//LESS源码 rounded-corners(@radius: 5px ){ border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; } #header{ .rounded-corners; } #footer{ .rounded-corners( 10px ); } |
1
2
3
4
5
6
7
8
9
10
11
|
/*生成的CSS*/ #header{ border-radius: 5px ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; } #footer{ border-radius: 10px ; -webkit-border-radius: 10px ; -moz-border-radius: 10px ; } |
嵌套规则
1
2
3
4
5
6
7
8
9
10
11
12
|
//LESS源码 #header{ h 1 { font-size : 26px ; font-weight : bold ; } p{ font-size : 12px ; a{ text-decoration : none ; &:hover{ border-width : 1px } } } } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/*编译后的CSS*/ #header h 1 { font-size : 26px ; font-weight : bold ; } #header p{ font-size : 12px ; } #header p a{ text-decoration : none ; } #header p a:hover{ border-width : 1px ; } |
函数与运算
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//LESS @the- border : 1px ; @base- color : #111 ; @red: #842210 ; #header{ color :(@base-color* 3 ); border-left :@the-border; border-right :(@the-border* 2 ); } #footer{ color :(@base-color+ #003300 ); border-color :desaturate(@ red , 10% ); } |
1
2
3
4
5
6
7
8
9
10
|
/*编译后的CSS*/ #header{ color : #333 ; border-left : 1px ; border-right : 2px ; } #footer{ color : #114411 ; border-color : #7d2717 ; |
具体学习使用less中文网http://lesscss.cn/
less样式表的更多相关文章
- CSS样式表分类
1.内联样式表 <p style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style typ ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- CSS样式表基础
CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) ...
- 深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
- CSS:CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- Qt——浅谈样式表
优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...
- 3、CCS样式表
一.CCS样式表的分类(优先级从低到高): 1.浏览器默认样式表 2.外部样式表:在外部创建的.ccs文件中.使用外部样式表可以使样式应用于多个网页.通过这个方法只需改动一个文件就能改变整个网站的外观 ...
- html嵌入样式表
1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题,未涉及div飘操作 处理页面CSS 先检测该内容部分是否已经设定了样式,如果没有单独设定再按照总体设计进行限定. eg: h1 h ...
- css样式表分类、选择器分类、css基础样式
1 . 样式表 Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...
随机推荐
- php改写session到数据库
session改写mysql 在调用 session_start();的地方改用实例化本类即可new SessionDB(); session_set_save_handler( array($thi ...
- [转]机器学习——C4.5 决策树算法学习
1. 算法背景介绍 分类树(决策树)是一种十分常用的分类方法.它是一种监管学习,所谓监管学习说白了很简单,就是给定一堆样本,每个样本都有一组属性和一个类别,这些类别是事先确定的,那么通过学习得到一个分 ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- php异步调用方法实现示例
php 异步调用方法 客户端与服务器端是通过HTTP协议进行连接通讯,客户端发起请求,服务器端接收到请求后执行处理,并返回处理结果. 有时服务器需要执行很耗时的操作,这个操作的结果并不需要返回 ...
- python 基础,包括列表,元组,字典,字符串,set集合,while循环,for循环,运算符。
1.continue 的作用:跳出一次循环,进行下一次循环 2.break 跳出不再循环 3.常量 (全是大写)NAME = cjk 一般改了会出错 4.py ...
- 使用SQLiteDatabase进行数据库操作的步骤
1.获取SQLiteDatabase对象,它代表了与数据库的连接.2.调用SQLiteDatabase的方法来执行SQL语句.3.操作SQL语句的执行结果,比如用SimpleCursorAdapter ...
- 【转】Android UI系列-----时间、日期、Toasts和进度条Dialog
原文网址:http://www.cnblogs.com/xiaoluo501395377/p/3421727.html 您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注 ...
- 超给力的HTML5 3D动画欣赏及源码下载
HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...
- hdu 1402 A * B Problem Plus FFT
/* hdu 1402 A * B Problem Plus FFT 这是我的第二道FFT的题 第一题是完全照着别人的代码敲出来的,也不明白是什么意思 这个代码是在前一题的基础上改的 做完这个题,我才 ...
- socket实现局域网通信
今天实现了一个局域网通信的小例子,上来记录一下,代码不成熟,勿拍. 这是我本机客户端: 这是我虚拟机的客户端. 我为他们分配了静态IP,这样就可以实现局域网通信了.注意代码中必须把监视线程的IsBac ...