详解在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 ui对话框实例代码
May 10 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
AngularJS与后端php的数据交互方法
Aug 13 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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
世界收音机发展史
2021/03/01 无线电
聊天室php&amp;mysql(一)
2006/10/09 PHP
php数组查找函数总结
2014/11/18 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
react基本安装与测试示例
2020/04/27 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python模拟事件触发机制详解
2018/01/19 Python
python批量修改图片大小的方法
2018/07/24 Python
Python中包的用法及安装
2020/02/11 Python
python包的导入方式总结
2021/03/02 Python
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
工作中个人的自我评价
2013/12/31 职场文书
金融管理应届生求职信
2014/02/20 职场文书
学习方法演讲稿
2014/05/10 职场文书
学生打架检讨书
2014/10/20 职场文书
护士节慰问信
2015/02/15 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python