Bootstrap的less
来源:互联网 发布:ip切换器软件 编辑:程序博客网 时间:2024/05/17 21:52
一、LESS的概念
1、一种动态样式语言
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
2、变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
如:
3、混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
如:
3、嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
如:
4、函数运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。
1、一种动态样式语言
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
2、变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
如:
// LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;}/* 生成的 CSS */#header { color: #4D926F;}h2 { color: #4D926F;}
3、混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
如:
// LESS.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners;}#footer { .rounded-corners(10px);}/* 生成的 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;}
3、嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
如:
// LESS#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}/* 生成的 CSS */#header h1 { font-size: 26px; font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;}
4、函数运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。
@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%);}/* 生成的 CSS */#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}
0 0
- Bootstrap的less
- bootstrap Less
- Less及定制bootstrap--less
- Bootstrap编译LESS
- bootstrap 之 LESS
- bootstrap 不得不说的less
- BootStrap less基础语法
- Bootstrap well.less 分析
- Bootstrap Less 笔记
- bootstrap学习笔记(3)--less语言的简单实用
- bootstrap的less文件分析之@media媒介查询
- bootstrap的less源码学习之button组件控制
- Bootstrap源码之旅-Less-wells.less
- Bootstrap—由less来架构Bootstrap
- Less/Sass/Compass/Bootstrap/H5bp
- play with bootstrap and less
- 修改 bootstrap :用 less 来写 css 编译less
- LESS CSS 框架简介////Bootstrap 简洁、直观、强悍的前端开发框架,
- 数据库连接池以及C3P0和DBCP
- Bootstrap的JavaScript插件
- 如何安装FMDB
- C51控制矩阵键盘
- 回归- Regression
- Bootstrap的less
- 实现string的构造函数,析构函数,拷贝构造函数
- 时间复杂度的一些计算规则
- android:布局参数,控件属性及各种xml的作用(转)
- Android百度地图开发之显示当前位置地图
- 1002. A+B for Polynomials (25)
- 高精度乘法计算 poj1001 Exponentiation C代码
- JDK多个版本环境变量切换不成功
- js中arguments.callee在递归函数中的妙用