Less 常用基础知识
LESS 中的注释
也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。
也可以使用// 注释 不会被编译的
变量
声明变量的话一定要用@开头 例如:@变量名称:值;
@test_width:300px;
.box{
width:@test_width;
height:@test_width;
background-color:yellow;
}
混合-(Mixin)
混合(mixin)变量
例如: .border{border:solid 10px red}
.box{
width:@test_width;
height:@test_width;
background-color:yellow;
.border;
}
带参数的混合
.border-radius(@radius){css 代码}
可认定默认值
.border-radius(@radius:5px){css 代码}
混合-可带的参数
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
混合 -默认带值
.border_03(@border_width:10px){
border:solid green @border_width;
}
.test_hunhe_03{
.border_03();
}
.test_hunhe_04{
.border_04(20px);
}
混合的例子
.border_radius(@radus:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;
.border_radius();
}
匹配模式
.sanjiao{
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style:dashed dashed solid dashed;
}
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-colo:transparent transparent @c transparent
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-colo:@c transparent transparent transparent
border-style:solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-colo: transparent @c transparent transparent
border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-colo: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.trangle(top,100px);
}
// 匹配模式- 定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
运算
@test_01:300px;
.box_02{
width:@test_01 +20;
}
.box_02{
width:@test_01 -20;
}
.box_02{
width:(@test_01 20) *5;
color:#ccc -10;
}
嵌套:
.list{
width:600px;
margin30px auto;
padding:0;
list-style:none;
li{
height:30px;
line-height:30px;
background-color:pink;
margin-bottom:5px;
}
a{
float:left;
&hover{
color:red; //& 代表他的上一层选择器。
}
}
}
@arguments 变量
@arguments 包含了所有的传递进来的参数。
.border_arg(@w:30px,@c:red,@xx:solid){
.border:@arguments;
}
避免编译
.test_03{
width:~'calc(300px -30)';
}
!importan关键字
.test_important{
.border_radius() !important;
}
Less 常用基础知识的更多相关文章
- scala和正则表达式常用基础知识示例
http://www.cnblogs.com/deerchao/archive/2006/08/24/zhengzhe30fengzhongjiaocheng.html . 匹配除换行符以外的 ...
- matplotlib常用基础知识
linestyle(ls)线型参数表 常用color(c)参数表 marker标记符号表 plt常用方法表 plt.legend(loc=0)用于显示图例,图例的位置参数loc matplotlib常 ...
- R语言常用基础知识
seq(from = 1, to = 1, by = ((to - from)/(length.out - 1)), length.out = NULL, along.with = NULL, ...
- JS常用基础知识
前言:在js中dom和bom是我们操作的基本,在最初接触时候我也懵,但是后来慢慢发现其实bom就是操作浏览器,而dom就是操作文本框节点.
- R语言常用基础知识(入门)
data.frame 动态确定列名称 var <- "mpg" #Doesn't work mtcars$var #These both work, but note tha ...
- 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- 【转载】Python编程中常用的12种基础知识总结
Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
- Python编程中常用的12种基础知识总结
原地址:http://blog.jobbole.com/48541/ Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时 ...
- Ext常用开发基础知识
Ext常用开发基础知识 组件定义 //这种方法可以缓存所需要的组件 调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加 ...
随机推荐
- c++ sizeof对象大小整理
1. sizeof 是运算符,而不是函数. 2. 当sizeof 的对象是表达式时,求的大小是表达式返回值的类型大小,但并不计算表达式的值,比如: ; ; cout << sizeof(c ...
- Linux 套接字编程 - select
select 可以感知文件表述符集合中的变化,如果办fd0(即标准输入)放入select的read fd set,发现只有按回车的时候select才会返回.查了下要把终端的缓冲大小设为1,这样就能实现 ...
- vim-plug
vim包管理器vim-plug 安装 curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent. ...
- linux服务器上创建svn版本库
1. 创建存放各个svn版本库的目录svnrepos(自己定义路径) -bash: cd /usr/local/apache/htdocs/ -bash: mkdir svnrepos 2. 假设我要 ...
- 【转载】图解MySQL MSI方式安装方法
********************************** 后来发现图片是百度的被封了.有空再换下吧. 一般百度经验这样的链接是不会失效的,大家可以百度查看. *************** ...
- git取消本地commit
如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d86c5 ...
- MongoDB学习之mongoose
MongoDB介绍: MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换 ...
- 私网IP访问Internet
公网.内网是两种Internet的接入方式. 内网接入方式:上网的计算机得到的IP地址是Internet上的保留地址,保留地址有3种形式: A类地址:10.0.0.0~10.255.255.255 B ...
- C# winform 跨线程修改界面
我们可以使用invoke和bengininvoke invoke同步执行一个委托 begininvoke异步执行一个委托
- 【Leetcode】【Easy】Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...