Less

作者: 青青玉立 | 来源:发表于2018-07-12 16:40 被阅读0次

Less是什么?

Less css是动态样式库 类似css的语法 赋予css新的特性 如变量、继承、运算、函数等

常用国人开发的LESS/SASS编译工具  Koala 编译工具来编译样式文件

安装: npm install -g less

Less结构

1. less注释

2. 变量(@开头)

    混合(mixin)变量、带参数的混合

3. 匹配模式

4. less中运算(数字、颜色或者变量的计算)

5. less嵌套规则

6. @arguments 变量、避免编译、!important 关键字

Less语法

1. 变量

@base: #f938ab;   //声明变量

.box {  color: @base;  }  //使用变量

2. 混合

混合无参数使用 混合带参数使用

3. 匹配模式

例子

4. 引导

导引中可用的比较运算有: > >= = =< <

关键字true只表示布尔真值

导引序列使用逗号‘,’—分割,当且仅当所有条件都符合时,才会被视为匹配成功

如果想基于值的类型进行匹配,我们就可以使用is*函式

    iscolor、isnumber、isstring、iskeyword、isurl

    判断一个值是纯数字,还是某个单位量:ispixel、ispercentage、isem

导引序列中可以使用and关键字实现与条件

5. 运算

6.嵌套规则

7. @arguments 变量

@arguments 包含所有传递进来的参数

8. 避免编译  ~

实例

9. !important  关键字

相关文章

  • 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/yakrpftx.html