详解在React项目中安装并使用Less(用法总结)


Posted in Javascript onMarch 18, 2019

less的安装配置

安装react-app-rewired,react-app-rewire-less,babel-plugin-import插件

执行命令:

npm install react-app-rewired --save-dev
npm install react-app-rewire-less --save-dev
npm install babel-plugin-import --save-dev

配置package.json文件 找到scripts属性,修改start的值为react-app-rewired start,如下图:

详解在React项目中安装并使用Less(用法总结) 

根目录下创建config-overrides.js文件

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
   config = rewireLess.withLoaderOptions({
   modifyVars: { "@primary-color": "#9F35FF" },
})(config, env);
 return config;
}

less的基本使用

LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,了解完安装过程,接下来看看less具体怎么使用

变量

在less中利用@符号进行变量的定义,很容易理解:复制代码

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

以上代码编译后输出为:

#header { color: #6c94be; }

less中支持变量名定义为变量,例如:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

解析后:

content: "I am fnord.";

注意: LESS 中的变量为完全的 ‘常量' ,所以只能定义一次

混合

在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样调用就可以:

#menu a {
 color: #111;
 .bordered;
}
.post a {
 color: red;
 .bordered;
}

.bordered class里面的属性样式都会在 #menu a 和 .post a 中体现出来:

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

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.

带参数混合

在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}

然后在其他class中像这样调用它:

#header {
 .border-radius(4px);
}
.button {
 .border-radius(6px); 
}

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}

所以现在如果我们像这样调用它的话:

#header {
 .border-radius; 
}

radius的值就会是5px. 你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:

.wrap () {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}
pre { .wrap }

输出:

pre {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}

@arguments 变量

@arguments 包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
 box-shadow: @arguments;
 -moz-box-shadow: @arguments;
 -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

将会输出:

box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

模式匹配和导引表达式

有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:

.mixin (@s, @color) { ... }
.class {
 .mixin(@switch, #888);
}

如果想让 .mixin 根据不同的 @switch 值而表现各异,如下这般设置:

.mixin (dark, @color) {
 color: darken(@color, 10%);
}
.mixin (light, @color) {
 color: lighten(@color, 10%);
}
.mixin (@_, @color) {
 display: block;
}

现在,如果运行:

@switch: light;
.class {
 .mixin(@switch, #888);
}

就会得到下列CSS:

.class {
 color: #a2a2a2;
 display: block;
}

如上, .mixin 就会得到传入颜色的浅色。如果 @switch 设为dark,就会得到深色. 具体实现如下:

第一个混合定义并未被匹配,因为它只接受 dark 做为首参 第二个混合定义被成功匹配,因为它只接受 light 第三个混合定义被成功匹配,因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值,而变量以外的固定值就仅仅匹配与其相等的传入值。 我们也可以匹配多个参数:

.mixin (@a) {
 color: @a;
}
.mixin (@a, @b) {
 color: fade(@a, @b);
}

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。

为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断,因为前者已在@media query特性中被定义。 以此例做为开始:

.mixin (@a) when (lightness(@a) >= 50%) {
 background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
 background-color: white;
}
.mixin (@a) {
 color: @a;
}

when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

就会得到:

.class1 {
 background-color: black;
 color: #ddd;
}
.class2 {
 background-color: white;
 color: #555;
}

导引中可用的全部比较运算有: > >= = =< <。此外,关键字 true 只表示布尔真值,下面两个混合是相同的:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

除去关键字true以外的值都被视示布尔假:

.class {
 .truth(40); // Will not match any of the above definitions.
}

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

.mixin (@a) when (@a > 10), (@a < -10) { ... }

导引可以无参数,也可以对参数进行比较运算:

@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

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

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

如果你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:

  • ispixel
  • ispercentage
  • isem

最后再补充一点,在导引序列中可以使用and关键字实现与条件:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

使用not关键字实现或条件

.mixin (@b) when not (@b > 0) { ... }

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }
#header .navigation {
 font-size: 12px;
}
#header .logo {
 width: 300px;
}
#header .logo:hover {
 text-decoration: none;
}

在 LESS 中, 我们就可以这样写:

#header {
 color: black;
 .navigation {
 font-size: 12px;
}
 .logo {
 width: 300px;
 &:hover { text-decoration: none }
}
}

或者这样写:

#header  { color: black;
 .navigation { font-size: 12px }
 .logo  { width: 300px;
 &:hover { text-decoration: none }
}
}

代码更简洁了,而且感觉跟 DOM 结构格式有点像. 注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了. 这点对伪类尤其有用如 :hover 和 :focus 例如:

.bordered {
 &.float {
 float: left;
}
 .top {
 margin: 5px;
}
}

会输出

.bordered.float {
 float: left; 
}
.bordered .top {
 margin: 5px;
}

运算

任何数字、颜色或者变量都可以参与运算. 来看一组例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5;

LESS 会输出 6px 括号也同样允许使用:

width: (@var + 5) * 2;

并且可以在复合属性中进行运算:

border: (@width * 2) solid black

命名空间

有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这 样在 #bundle 中定义一些属性集之后可以重复使用:

#bundle {
 .button () {
 display: block;
 border: 1px solid black;
 background-color: grey;
 &:hover { background-color: white }
}
 .tab { ... }
 .citation { ... }
}

你只需要在 #header a 中像这样引入 .button :

#header a {
   color: orange;
   #bundle > .button;
  }

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中,像 @{name} 这样的结构:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery trim() 功能源代码
Feb 14 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
vue动画效果实现方法示例
Mar 18 #Javascript
node.js实现微信开发之获取用户授权
Mar 18 #Javascript
学习node.js 断言的使用详解
Mar 18 #Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 #Javascript
JavaScript显式数据类型转换详解
Mar 18 #Javascript
浅谈js中的bind
Mar 18 #Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 #Javascript
You might like
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
jQuery 技巧小结
2010/04/02 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python正则表达式介绍
2012/08/06 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python hashlib模块的使用示例
2020/10/09 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
公司会计岗位职责
2014/02/13 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
《海上日出》教学反思
2016/02/23 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL