关于Less的用法
想了解更多关于Less的用法和相关内容,请查看官方文档:Less中文文档
在less中两种注释的区别
@charset "utf-8";
// 第一种注释方式 "//" 不会被编译,即不会被编译到css文件中
.box {
width: 10px;
}
/* 第二种注释方式 "/ * * /" 会被编译, 即会被编译到css文件中 */
.box {
height: 20px;
}
上面代码等价于
@charset "utf-8";
.box {
width: 10px;
}
/* 第二种注释方式 "/ * * /" 会被编译, 即会被编译到css文件中 */
.box {
height: 20px;
}
在less中声明变量
@charset "utf-8";
// less中声明变量一定要用 @ 符号开头
// 例如:@变量名: 值;
// @test_width: 200px;
// 声明变量
@test_width: 200px;
// 使用变量
.box {
width: @test_width;
}
上面的less代码等价于
@charset "utf-8";
.box {
width: 200px;
}
Less中的混合模式
1.普通混合模式
@charset "utf-8";
// 混合模式
@test_width: 200px;
.box {
width: @test_width;
height: @test_width;
.border;
}
.border {
border: 1px solid red;
}
.box_02 {
.box;
margin-left: 20px;
}
等价于
@charset "utf-8";
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
.box_02 {
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 20px;
}
2.带参混合模式
@charset "utf-8";
// 混合模式 可带参数
.width(@test_width) {
width: @test_width;
}
.border(@test_color) {
border: 1px solid @test_color;
}
.box {
.width(200px);
.border(red);
}
等价于
@charset "utf-8";
.box {
width: 200px;
border: 1px solid red;
}
3.带参混合模式设置默认参数
@charset "utf-8";
// 混合模式 可带参数 设置默认值
.width(@test_width: 200px) {
width: @test_width;
}
.border(@test_color: red) {
border: 1px solid @test_color;
}
.box {
.width();
.border();
}
.box_02 {
.width(400px);
.border(pink);
}
// 混合模式的例子
.border_radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box_03 {
.border_radius();
}
等价于
@charset "utf-8";
.box {
width: 200px;
border: 1px solid red;
}
.box_02 {
width: 400px;
border: 1px solid pink;
}
.box_03 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Less中匹配模式
@charset "utf-8";
// 匹配模式
// 箭头向上
.triangle(top, @w: 5px, @c: #ccc) {
width: @w;
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
// 箭头向下
.triangle(bottom, @w: 5px, @c: #ccc) {
width: @w;
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
// 箭头向左
.triangle(left, @w: 5px, @c: #ccc) {
width: @w;
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
// 箭头向右
.triangle(right, @w: 5px, @c: #ccc) {
width: @w;
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
// 不传参数,默认匹配
// @_ 固定写法,代表默认匹配,即如果triangle的第一个参数匹配不到上面的"left","right","top","bottom",就默认匹配下面的代码样式
.triangle(@_, @w: 5px, @c: #ccc) {
height: 0;
overflow: hidden;
}
/* 箭头向上 */
.box {
.triangle(top);
}
/* 箭头向右 */
.box_02 {
.triangle(right);
}
/* 箭头向下 */
.box_03 {
.triangle(bottom);
}
/* 箭头向左 */
.box_04 {
.triangle(left);
}
/* 不传参数 */
.box_05 {
.triangle();
}
等价于
@charset "utf-8";
/* 箭头向上 */
.box {
width: 5px;
border-width: 5px;
border-color: transparent transparent #ccc transparent;
border-style: dashed dashed solid dashed;
}
/* 箭头向右 */
.box_02 {
width: 5px;
border-width: 5px;
border-color: #ccc transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
/* 箭头向下 */
.box_03 {
width: 5px;
border-width: 5px;
border-color: transparent #ccc transparent transparent;
border-style: dashed solid dashed dashed;
}
/* 箭头向左 */
.box_04 {
width: 5px;
border-width: 5px;
border-color: transparent transparent transparent #ccc;
border-style: dashed dashed dashed solid;
}
/* 不传参数 */
.box_05 {
height: 0;
overflow: hidden;
}
Less中的运算
@charset "utf-8";
// +,-,*,/, 运算
@test_width: 200px;
.box {
width: @test_width + 20;
}
.box_02 {
width: @test_width -20;
}
.box_03 {
width: @test_width * 2;
}
.box_04 {
width: @test_width / 5;
}
.box_05 {
width: (@test_width - 100) * 3;
}
/* 颜色也可以计算 */
/* 颜色的计算方式是把十二进制 #ccc 转换成 255 的形式, 然后进行运算, 最后再把结果转换为十二进制的形式 */
.box_06 {
color: #ccc - 10;
}
等价于
@charset "utf-8";
.box {
width: 220px;
}
.box_02 {
width: 180px;
}
.box_03 {
width: 400px;
}
.box_04 {
width: 40px;
}
.box_05 {
width: 300px;
}
/* 颜色也可以计算 */
/* 颜色的计算方式是把十二进制 #ccc 转换成 255 的形式, 然后进行运算, 最后再把结果转换为十二进制的形式 */
.box_06 {
color: #c2c2c2;
}
Less中的嵌套
@charset "utf-8";
// 嵌套
.box {
width: 300px;
height: 300px;
.box_02 {
width: 100px;
height: 100px;
// & 代表上一层选择器,即代表 .box_02
&:hover {
color: red;
}
.box_03 {
width: 50px;
height: 50px;
}
}
}
等价于
@charset "utf-8";
.box {
width: 300px;
height: 300px;
}
.box .box_02 {
width: 100px;
height: 100px;
}
.box .box_02:hover {
color: red;
}
.box .box_02 .box_03 {
width: 50px;
height: 50px;
}
Less中的@arguments变量
@charset "utf-8";
// @arguments 包含了所有传递进来的参数,等同于JavaScript中的参数列表
.border_test(@w: 3px, @xx: solid, @c: #ccc) {
border: @arguments;
}
.box {
.border_test();
}
.box_02 {
.border_test(20px);
}
.box_03 {
.border_test(5px, dashed, red);
}
等价于
@charset "utf-8";
.box {
border: 3px solid #ccc;
}
.box_02 {
border: 20px solid #ccc;
}
.box_03 {
border: 5px dashed #ff0000;
}
Less中避免编译的方式
@charset "utf-8";
.box {
width: calc(300px - 30px);
}
// 避免编译
// 避免编译使用 ~ 符号加上 '' (单引号) 或者 "" (双引号), 引号内的内容就不会被编译
.box_02 {
width: ~'calc(300px - 30px)';
}
.box_03 {
width: ~"calc(300px - 30px)";
}
等价于
@charset "utf-8";
.box {
width: calc(270px);
}
.box_02 {
width: calc(300px - 30px);
}
.box_03 {
width: calc(300px - 30px);
}
Less中important的用法
@charset "utf-8";
.width_test {
width: 200px;
}
.border_test {
border-top: 1px solid red;
border-bottom: 1px solid blue;
border-right: 1px solid #ccc;
}
.width_test_02(@w: 100px) {
width: @w;
}
.border_test_02(@c: red) {
border-top: 1px solid @c;
border-bottom: 1px solid @c;
border-right: 1px solid @c;
}
.box {
.width_test !important;
.border_test !important;
}
.box_02 {
.width_test_02() !important;
.border_test_02() !important;
}
等价于
@charset "utf-8";
.box {
width: 300px !important;
border-top: 1px solid red !important;
border-bottom: 1px solid blue !important;
border-right: 1px solid #ccc !important;
}
.box_02 {
width: 100px !important;
border-top: 1px solid #ff0000 !important;
border-bottom: 1px solid #ff0000 !important;
border-right: 1px solid #ff0000 !important;
}
举个栗子:
@charset "utf-8";
.title {
@w: 100%;
@h: 34px;
@border_color: #eaeaea;
height: @h;
line-height: @h;
border: 1px solid @border_color;
margin-top: 20px;
h3 {
font-size: 20px;
color: #52ccba;
font-family: "微软雅黑";
font-weight: normal;
}
}
编译后:
@charset "utf-8";
.title {
height: 34px;
line-height: 34px;
border: 1px solid #eaeaea;
margin-top: 20px;
}
.title h3 {
font-size: 20px;
color: #52ccba;
font-family: "微软雅黑";
font-weight: normal;
}