less预处理语言的运用之-变量拼接那点事

这篇具有很好参考价值的文章主要介绍了less预处理语言的运用之-变量拼接那点事。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

less语法的技巧总结,很基础,熟练掌握后能提高我们在大型项目中的开发效率

@a:0.5;
@showdaw-px:100;
@mkcolor1:#6ec5ff;
@num:1;
.outer{
  //拼接的字符串在变量后面,需要在冒号后面加~
  @width:~"@{showdaw-px}px";
  //拼接的字符串在冒号后面,使用的时候是@@var
  @bgColor:"mkcolor@{num}";
  //乘法运算先定义好运算接口的变量,再引用
  @alpha:@a * 100;
  opacity: @a;
  filter: alpha(opacity=@alpha);
  height: 300px;
  background: @@bgColor;
  width: @width;
}

less预处理语言的运用之-变量拼接那点事,css,less,前端,css

//无参数,省略括号,编译的时候会显示这个类
// .pub{
//   width: 100px;
//   height: 100px;
//   background: green;
// }

//有参数,是函数,不会编译这个函数
.pub(@bg:green){
  width: 100px;
  height: 100px;
  background: @bg;
}
.outer{
  .pub(red);
  // .pub;
  // background: red;
}
//@arguments 所有参数
.transition(@property:all,@duration,@timing:linear,@delay:0s){
    transition: @arguments;
}


.sum(@n,@m){
  @result:@n + @m;
}

.box{
  .sum(10,20);
  width:unit(@result,px);
  /* unit是less提供的方法,
    unit([value],'px)是给value值设置单位,
    但是如果之前有单位,此处会把原来的单位去掉
  */
}

less预处理语言的运用之-变量拼接那点事,css,less,前端,css

/* 继承
   less中的继承不是copy代码,
   而是让继承与被继承公用一套css代码
*/
.pub2{
  width: 100px;height: 100px;
  background-color: red;
}

/* .div:extend(.pub2){
  background-color: green;
} */
.div{
  &:extend(.pub2);
  background-color: green;
}



.com{
  padding: 10px;
  margin: 10px;
}
/* 继承多个样式类 */
.box2{
  &:extend(.pub2,.com);

}

.box3{
  .mark{
    width: 100px;
    height: 100px;
  }
  .inner{
    // &:extend(.mark);  //这样不能继承.mark
    &:extend(.box3 .mark);
    background:red;
  }
}

less预处理语言的运用之-变量拼接那点事,css,less,前端,css

递归

.columns(@i) when(@i <= 4){
  // width: unit(@i,'px');
  .box@{i}{
    width: unit(@i*10,px);
    margin-bottom: unit(@i*2,px);
    background:red;
    &:hover{
      background: green;
    }
  }
  .columns(@i+1)
}

.columns(1);

less预处理语言的运用之-变量拼接那点事,css,less,前端,css

less连接符与import

@import (reference) './test.less';
//只导入这个css文件,不编译里面的css内容
.box{
  .mark{

  }
  &.pp{
    background-color: red;
    height: 100px;
  }
  & > .mm{
    background: green;
  }
  .box222{
    .bgColor;
  }
}

less预处理语言的运用之-变量拼接那点事,css,less,前端,css

关注我的个人公众号,获取更多前后端开发经验知识
less预处理语言的运用之-变量拼接那点事,css,less,前端,css文章来源地址https://www.toymoban.com/news/detail-565960.html

到了这里,关于less预处理语言的运用之-变量拼接那点事的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 探索CSS预处理器:Sass、Less与Stylus

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月11日
    浏览(19)
  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(47)
  • 【C语言】程序环境和预处理|预处理详解|定义宏(下)

    主页:114514的代码大冒 qq:2188956112(欢迎小伙伴呀hi✿(。◕ᴗ◕。)✿ ) Gitee:庄嘉豪 (zhuang-jiahaoxxx) - Gitee.com 文章目录 目录 文章目录 前言 2.5带副作用的宏参数 2.6宏和函数的对比 3#undef ​编辑 4 命令行定义 5 条件编译 6 文件包含 总结 咱们书接上回 2.5带副作用的宏参数 先来

    2024年01月17日
    浏览(17)
  • C语言——程序环境和预处理(再也不用担心会忘记预处理的知识)

    先简单了解一下程序环境,然后详细总结翻译环境里的编译和链接,然后在总结编译预处理。 在 ANSI C 的任何一种实现中,存在两个不同的环境 翻译环境:这个环境中源代码被转换为可执行的机器指令。 执行环境:执行二进制代码。 计算机如何执行二进制指令? 我们写的C语

    2024年02月09日
    浏览(16)
  • 【C语言】预处理

    在ANSI C的任何一种实现中,存在两个不同的环境。 第1种是翻译环境,在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境,它用于实际执行代码。 1.翻译环境 组成一个程序的每个源文件通过编译过程分别转换成目标代码 每个目标文件由链接器(linker)捆绑在

    2024年02月17日
    浏览(31)
  • C语言预处理详解

    上一篇博客中我们讲了C语言的编译与链接,在编译过程中有三个小阶段:预处理、编译、汇编。 本篇博客将详细讲述预处理部分的有关知识点 。 在C语言中,C语言本身设置了⼀些预定义符号,可以直接使⽤ ,预定义符号的处理也是在预处理期间进行的。 在这里介绍几个常

    2024年04月15日
    浏览(23)
  • C语言【预处理器】

    1、一些关于预处理的知识 ​C代码中,一般带 # 的都是预处理指令,包括 宏替换、文件包含、条件编译 等。 ​为兼容一些老编译器, # 前后一般不写空格 ​预处理指令后面不加分号。 2、宏定义 3、文件包含 ​自定义头文件,用\\\" \\\" 。 引号里填相对路径或绝对路径。基于当

    2024年02月05日
    浏览(16)
  • 详解C语言—预处理

    目录 一、预处理 1、预定义符号介绍 2、预处理指令 #define #define 定义标识符:  #define 定义宏: #define 替换规则 3、预处理操作符# 4、预处理操作符## 5、带副作用的宏参数 6、宏和函数对比 二、命名约定 三、预处理指令 #undef 四、命令行定义 五、条件编译  1、单分支#if:

    2024年02月08日
    浏览(17)
  • C语言·预处理详解

            C语言设置了一些预定义符号,可以直接使用,预定义符号也是在预处理期间处理的                 __FILE__  进行编译的源文件                 __LINE__  文件当前的行号                 __DATE__  文件被编译的日期                 _

    2024年01月21日
    浏览(14)
  • C语言:预处理详解

    创作不易,来个三连呗! C语⾔设置了⼀些预定义符号, 可以直接使⽤ ,预定义符号也是在预处理期间处理的。 __FILE__ //进⾏编译的源⽂件 __LINE__ //⽂件当前的⾏号 __DATE__ //⽂件被编译的⽇期 __TIME__ //⽂件被编译的时间 __STDC__ //如果编译器遵循ANSI C,其值为1,否则未定义

    2024年01月19日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包