less入门
程序员文章站
2022-07-03 09:03:02
...
less 和 sass 一样，也是一种css预处理的语言
首先，我们需要一个帮助我们把less文件变成css文件的软件
这里我推荐一款软件 -- koala
#下载地址
http://koala-app.com/而koala的使用也是十分简单
这样只要less文件有修改，就会自动被编译成css文件。
下面是less的一些基本语法
@charset 'utf-8';// less的文件头
body {
background: #333;
}
/* 我是会被编译的 */
// 我是不会被编译的
// 变量
@test_width: 300px;
.box {
width: @test_width;
height: @test_width;
background: #fff;
.border;
}
// 混合 重复调用
.border {
border: 5px solid pink;
}
// 混合 - 可带参数的
.border_02(@border_width) {
border: @border_width solid yellow;
}
.test_hunhe {
.border_02(30px);
}
// 混合 - 默认带值
.border_03(@border_width:10px) {
border: @border_width solid yellow;
}
.test_hunhe03 {
.border_03();// 不带值默认10px
}
// 匹配模式 border三角的转向 不需要自己每次都手动设定
.triangle(top,@w:5px,@c:#ccc) {
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc) {
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(@_,@w:5px,@c:#ccc) {// 固定匹配，无论传什么参给第一个参数，这个都会被编译
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao {
.triangle(top);
}
// 运算
@test_01:300px;
.box_02 {
width: @test_01 + 20;// 只要有一个人带单位就好
color: #ccc - 10;// 颜色也可以加减
}
// 嵌套规则
.lis {
width: 600px;
list-style: none;
li {
height: 30px;
line-height: 30px;
background-color: pink;
a {
text-decoration: none;
}
}
a {
float: left;
}
}
// 等于 .lis, .lis li, lis a, lis li a
a{
float: left;
&:hover {// &代表它的上一层选择器 这里是a
color: red;
}
}
// 等于a, a:hover
// @arguments变量
.border_arg(@w:30px,@c:red,@xx:solid) {
border: @arguments;// 代替border:@w,@c,@xx;
}
// 自动补全参数
.border_arg02 {
.border_arg();
}
.border_arg03 {
.border_arg(40px);
}
//避免编译
.test_03 {
width: ~'calc(300px - 30px)';
// calc是给浏览器执行的css3方法
// 我们不想让koala执行
}
// important
.test_important {
.border_arg() !important;
}
//可以查看old.lesscss.net/article/document.html 或 lesscss.net
上一篇： Less 快速入门（一）
下一篇： java实现基于JWT的token认证