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;
}
转载于:https://www.cnblogs.com/nmxs/p/5353999.html
Less 常用基础知识相关推荐
- 网络服务器最基本的是文件,你可能想知道的15个网络常用基础知识
原标题:你可能想知道的15个网络常用基础知识 网络是一个复杂的系统,涉及知识很多.现在腾正小超人给大家分享15个常用的网络基础知识: 1) 如何查看本机所开端口 用netstat -a -n命令查看! ...
- Swift常用基础知识(二)
Swift常用基础知识(一) 函数式编程 函数合成 func add1(_ v1: Int, _ v2: Int) -> Int { v1 + v2 }func currying<A, B ...
- Linux常用基础知识必备三之常用指令及操作
Linux常用基础知识必备三之常用指令及操作 1.vi和vim vi如何使用 vi几种模式下的操作指令 命令模式进入编辑模式 命令模式下的快捷键 底行模式(指按了esc键之后输入按键:后出现) 字符串 ...
- HTML和CSS的常用基础知识笔记
HTML基础知识 标题标签: <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4& ...
- C#常用基础知识总结(B/S和C/S的异同属于个人整理)
转载自"IT弄你"的论坛帖C#基础知识 概念:.net与c# .net/dontnet:一般指.net framework框架,一种平台,一种技术 c#(charp):一种编程语言 ...
- verilator常用基础知识
目录 预学习阶段 verilator语法学习 运行verilator官网的example 电路设计举例 预学习阶段 verilator语法学习 常用网站: OJ刷题网站 HDL基础知识 verilat ...
- 30分钟搞定ES6常用基础知识
ES6基础智商划重点 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值 ...
- 实施、运维常用基础知识(适用小白入门)
Linux 基础命令 软件包管理 压缩和解压缩 远程连接 文件操作 花式读(文件) 进程操作 Linux信息 系统服务 基础命令 TAB键---自动补全 管道符(|):将前一个命令的输出作为下一个命令 ...
- 前端HTML5常用基础知识总结
目录 一: 初识HTML 二:常见网页标签 2.1.标题标签 h1-h6 2.2.段落和换行标签 2.3.文本格式化标签 2.4.div和span标签 2.5.图像标签和路径 2.6.超链接标签 2. ...
- C++常用基础知识—STL库(1)
本文介绍C++常用的STL库知识,常用的函数及其用法,为备战C++编程比赛的朋友及对STL库函数应用时的快速查找提供方便. 后续还会继续更新,请大家多多支持!!! STL简介 顺序性容器 2.1 C+ ...
最新文章
- Windows 服务入门指南
- matlab div矩阵运算,【求助】多维矩阵求和运算!!
- 如何遍历numpy数组?
- linux、sql 常用的一些特殊符号
- 一个实用的表格(锁定表头,可调整单元格大小,可排序)
- 口罩告急,全民互助!“口罩互助”小程序重磅上线!
- 广州科目三考试 不得不看的十条提醒(图)
- Mac neo4j忘记密码,不删除数据处理方法
- jvm 堆外内存_jvm┃java内存区域,跳槽大厂必会知识点
- 浅析Ruby on Rails部署方案(三)
- Timestamp日期格式转换
- Windows7自带截图工具没法保存
- FAT、FAT32和exFAT文件系统
- 51单片机用STC—ISP烧录程序是一直显示“正在检测目标单片机···”冷启动板子没有反应
- Python实践-咚咚呛讲师Python进阶教程
- SAP SD V/LD标准定价报表配置
- 学院旅行计算机学院,计算机学院学生会 | 关于我们,你所不知道的……
- 中小企业要怎么选择ERP系统?
- html插入cad,如何在CAD图纸中插入一张Excel数据表格?
- Label Assignment