less

作者: 叫我王必过 | 来源:发表于2019-06-13 18:12 被阅读0次

一、变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

二、混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

三、运算

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

@var: 50vh/2;
width: calc(50% + (@var - 20px)); 

四、内置函数

  • color:解析颜色,将代表颜色的字符串转换为颜色值
  • convert : 将数字从一种单位转换到另一种单位。
  • data-uri: 将资源内联进样式表
  • unit:删除或更换单位
  • escape:对字符串中的特殊字符做 [URL-encoding]编码
  • 等等~~~~
    想了解更多请看:https://www.jianshu.com/p/df9411f6d8ab

相关文章

  • web前端学习线路图2

    十二、LESS教程 Less教程Less 安装Less 嵌套规则Less 操作Less 转义Less 函数 Les...

  • Vue项目使用less

    1 先下载less less-loader: npm i less less-loader -S 2 将less配...

  • vue使用less

    npm安装 less less-loader npm install --save less less-loade...

  • Less的使用

    Less使用 1.什么是less 2.less有什么用 3.怎么使用less 4.less批量生成代码 less简...

  • Sql-labs-page3

    less-38 (堆叠注入) 堆叠注入讲解 less-39 解题链接 less-40 less-41 less-...

  • 第十三周第一天笔记之less

    less知识 简书链接less使用总结:less基础知识less使用总结2:less使用总结 单位px,em,re...

  • less的介绍

    less是什么? less是css云处理器 全局安装less包 查看less是否安装成功 less完全兼容css ...

  • LESS/SASS学习记录

    LESS 参考资料:LESS官网w3cplus less入门教程 less的编译 less特性及语法 变量——V...

  • React脚手架如何支持less 2018-06-13

    1. 安装less、less-loader依赖包 a. yarn安装 yarn add less less-loa...

  • vue-cli 常见问题

    安装 less 和 less-loader ,在项目目录下运行如下命令 npm install less less...

网友评论

      本文标题:less

      本文链接:https://www.haomeiwen.com/subject/hgosfctx.html