LESS的总结
来源:互联网 发布:java中级工程师就业班 编辑:程序博客网 时间:2024/06/04 19:19
LESS使用实例总结
定义:
LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数等,LESS可以在客户端运行,也可以在服务端运行
引入:
LESS应用的样式文件后缀名为.less,引入样式表,然后再引入less.js,然后通过localhost打开页面,即可看到效果
定义变量:
@color:red;
Body{background-color:@color};
定义的变量应用没有前后顺序要求,为了阅读方便,最好能将变量定义在应用该变量的地方前面
定义函数:
函数列子:
.default(@color){
background-color:@color;
border:1px solid @color;
}
这样就定义了一个函数default,前面的.必须加上,使用这个函数就直接在要使用这个样式的元素后调用就可以
.con1{default(red)};
这样就给class为con1的元素使用了函数default定义的一组样式,background-color和border的颜色为红色
函数的参数可以设定一个默认值,调用的时候不传值,就使用默认值 ###
.default(@color:red){
background-color:@color;
border:1px solid @color;
}
还可以定义一个变量,然后在函数定义的时候直接传变量
@re:red;
@ye:yellow;
.con1{default(@ye)};
.con2{default(@re)};
函数体内定义的变量作用域也只是函数体内,
@yu:pink;
@col:yellow;
.default(@color){
@yu:red;
background-color:@color;
border:1px solid @yu;
}
.default2(@color){
@yu:yellow;
background-color:@color;
border:1px solid @yu;
}
.con1{.default(@col)};
.con2{.default2(@yu)};
&可以用于代表父选择器
p { font-size: 12px;
a { text-decoration: none; &:hover { border-width: 1px }}
代表了:
p {
font-size: 12px;
}
p a {
text-decoration: none;
}
p a:hover {
border-width: 1px;
}
- Less的点滴总结
- LESS的总结
- Less的常用语法总结
- less总结
- LESS总结
- LESS总结
- sass与less的区别总结
- less简单的入门知识总结
- Less Css总结
- Less学习总结
- less 学习总结
- Less学习总结
- LESS使用实例总结
- Linux less命令总结
- less使用小总结
- less基础知识总结概括
- LESS学习:LESS的基础语法
- 强大的less
- FTP服务器配置以及访问
- Symmetric Tree
- Unity中的Mathf类
- ListView 原理的介绍 qt也可以吧想通的Android
- python 机器学习库:Numpy 2
- LESS的总结
- 2015.7.30
- 欧姆龙PLC modbusRTU通讯解析(CP1E)
- js对cookie基本使用
- 动态规划--最长上升子序列
- 暑假集训第三周周三赛 STL D - 产生冠军
- webView使用细节
- C/C++单链表的一些操作
- uva 129 - Krypton Factor