关于Less的用法

其他 2018-11-15 08:40:59 阅读次数: 0

关于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();
}

等价于

扫描二维码关注公众号，回复： 4077609 查看本文章 
@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;
}

猜你喜欢

转载自blog.csdn.net/Li_dengke/article/details/83242581
今日推荐
周排行
解析ReentrantLock实现原理
面试之非技术
第三周助教点评
《阅读-拖延心理学》
第二章 使用 kind 一分钟搭建 k8s 集群
2018福大软工实践第五次作业
Day2.基本条件语句
抢占物联网入口，“腾讯云小微”将和AliGenie互怼
IO流的输入输出
vSphere 7.0初体验
每日归档
更多
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022