less与less之间的模块引用、模块化

川长思鸟来 2023-06-30 09:25 21阅读 0赞

###  demo.html: ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./demo.css">
        
    </head>
    <body>
        <div></div>
    </body>
    </html>

--------------------

###  demo.less: ###

//引入less中模块三角形
    @import "./triangle.less";
    
    *{
        margin:0;
        padding:0;
    }
    div{
       .triangle(b ,100px,#ff0000)
    }

--------------------

###  triangle.less: ###

//三角形匹配模式（通过它们的t\r\b\l）
    .triangle(t, @w, @c){
        width:0;
        height:0;
        border-width: @w;
        border-style: solid;
        border-color: @c transparent transparent transparent;
    }
    
    .triangle(r, @w, @c){
        width:0;
        height:0;
        border-width: @w;
        border-style: solid;
        border-color:  transparent @c transparent transparent;
    }
    
    .triangle(b, @w, @c){
        width:0;
        height:0;
        border-width: @w;
        border-style: solid;
        border-color:  transparent transparent @c transparent;
    }
    
    .triangle(l, @w, @c){
        width:0;
        height:0;
        border-width: @w;
        border-style: solid;
        border-color: transparent transparent transparent @c;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js —— 使用ant design vue时无法加载less-loader/less模块

* 问题来源：ant design vue的issues https://github.com/vueComponent/ant-design-vue/issues/2...

我就是我/ 2024年04月18日 08:49/ 0 赞/ 84 阅读

相关 less与less之间的模块引用、模块化

demo.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset

川长思鸟来/ 2023年06月30日 09:25/ 0 赞/ 22 阅读

相关 less

less > less可以说是动态化的css语言，主要是因为他的代码可以复用 less的使用: 1. 在全局npm 安装less ，并执行`lessc less文件

缺乏、安全感/ 2023年01月07日 01:23/ 0 赞/ 217 阅读

相关 vue lang=“less“ less

文章目录 vue引入lang=“less“的方法以及报错的解决方案第一步：安装 less 和less-loader

客官°小女子只卖身不卖艺/ 2023年01月03日 14:17/ 0 赞/ 302 阅读

相关 less笔记-less概要

一、概要 As an extension to CSS, Less is not only backwards compatible with CSS, but the ex

刺骨的言语ヽ痛彻心扉/ 2022年09月25日 13:22/ 0 赞/ 315 阅读

相关 less笔记-Less安装与基础使用

一、安装Less npm为Node.js的包管理器，通过npm可简易的安装Less。 Node.js下载地址：https://nodejs.org/en/ 下载的Node

布满荆棘的人生/ 2022年09月25日 13:21/ 0 赞/ 314 阅读

相关 LESS详解之编译LESS

　　掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CS

╰+攻爆jí腚メ/ 2022年09月17日 13:11/ 0 赞/ 519 阅读

相关 less （三）一个less 文件引用另一个less文件

现在假设我们写了两个less文件，一个文件是a.less 另一个文件是 b.less; 那么a.less文件中如何引用b.less中的文件呢？例子：先新建如

た入场券/ 2022年05月25日 23:36/ 0 赞/ 1323 阅读

相关 less （一） less 的环境

less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；下面看看如何配置 less 的使用环境；前提：安装node

川长思鸟来/ 2022年05月25日 22:59/ 0 赞/ 343 阅读

相关 less

[预处理器][Link 1]就是在代码交给编译器处理前，预先进行一些处理 less要点：变量，混合，嵌套，函数&运算，扩展 1.链接 <link re

ゞ浴缸里的玫瑰/ 2021年09月16日 04:42/ 0 赞/ 524 阅读