详细说明如何在React项目中安装和使用Less

较少的安装配置

安装反应-应用-重新布线，反应-应用-重新布线-无，巴别塔-插件-导入插件

执行命令：

NPM安装react-app-rewire-save-dev NPM安装react-app-rewire-less-save-dev NPM安装babel-plugin-import-save-dev配置package.json文件找到scripts属性，修改start值为react-app-rewire start，如下图：所示

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

const { injectBabelPlugin }=require(' react-app-rewired ')；const Rewireless=require(' react-app-Rewireless-less ')；module.exports=函数重写(config，env){ config=rewireless . with loaderooptions({ modify var s : { ' @ primary-color ' : ' # 9f 35ff ' }，})(config，env)；返回配置；}少的基本用途

作为CSS的一种扩展形式，less并没有阉割CSS的功能，而是在现有的CSS语法上增加了很多额外的功能。了解了安装过程之后，我们再来具体看看如何使用LESS。

可变的

用@符号来定义变量很容易理解：复制代码

@ nice-blue : # 5b 83AD；@浅蓝色： @尼斯蓝# 111；# header { color: @浅蓝色；}上述代码编译后的输出为：

# header { color : # 6 c94 be；}less支持将变量名定义为变量，例如：

@fnord:“我是fnord。”；@ var :“fnord”；content: @ @ var解析后：

内容：“我是fnord。”；注意：LESS中的变量是一个完整的“常量”，所以只能定义一次

混合

在LESS中，我们可以将一些常见的属性集定义为一个类，然后在另一个类中调用这些属性。这是一个班级。边框{ border-top:虚线1px黑色；border-bottom:纯黑2px}那么如果我们现在需要将这些公共属性集引入到其他类中，我们只需要在任何类中调用它们，如下所示。

#菜单a { color: # 111。有边界的；}.贴出一张{ color:红色；有边界的；{中的属性样式。带边框的类将反映在#menu a和。张贴a :

#菜单a { color: # 111边框-top:点状1px黑色；border-bottom:纯黑2px}.贴出一张{ color:红色；边框-top:点状1px黑色；border-bottom:纯黑2px}任何CSS类、id或元素属性集都可以用同样的方式引入。

与参数混合

在LESS中，您还可以像函数一样定义一组带有参数：的属性。边框半径(@radius) {边框半径： @ radius；-moz-border-radius : @半径；-web kit-border-radius : @ radius；}然后像这样在其他类中调用它：

#header {。边界半径(4px)；}.按钮{。边界半径(6px)；}我们还可以为这样的参数设置默认值：border-radius(@ radius : 5px){ border-radius : @ radius；-moz-border-radius : @半径；-web kit-border-radius : @ radius；}所以现在如果我们这样称呼，

#header {。边界半径；}半径的值将为5px。也可以定义不带参数的属性集。如果你想隐藏这个属性集，防止它暴露给CSS，但你仍然想在其他属性集中引用它，你会发现这个方法非常容易使用：wrap(){ text-wrap : wrap；white-space:预包装；white-space :-moz-预包装；word-wrap:断字；}pre {。wrap}输出：

预{ text-wrap : wrap；white-space:预包装；white-space :-moz-预包装；word-wrap:断字；}@arguments变量

@arguments包含传入的所有参数。如果不想单独处理每个参数，可以这样写：box-shadow (@x: 0，@y: 0，@blur: 1px，@ color : # 000){ box-shadow : @ arguments；-moz-box-shadow : @ arguments；-web kit-box-shadow : @ arguments；}.箱形阴影(2px，5px)；将输出：

box-shadow : 2px 5px 1px # 000；-moz-box-shadow : 2px 5px 1px # 000；-web kit-box-shadow : 2px 5px 1px # 000；模式匹配和引导表达式

在某些情况下，我们希望根据传入的参数更改混合的默认渲染，例如以下示例：mixin (@s，@ color){ 0.}.类{。mixin(@switch，# 888)；}如果你愿意。mixin要根据不同的@switch值表现不同，请按如下方式进行设置：mixin(深色，@color) { color:加深(@color，10%)；}.mixin (light，@ color){ color : light(@ color，10%)；}.mixin (@_，@ color){ display : block；}现在，如果运行：

@switch:灯；类{。mixin(@switch，# 888)；}您将获得以下CSS:class { color: # a2a2a2display:块；}如上所述，mixin将获得输入颜色的浅色。如果@switch设置为深色，你会得到深色。具体实现如下：

第一个混合定义不匹配，因为它只接受暗作为第一个参数，第二个混合定义成功匹配，因为它只接受光，第三个混合定义成功匹配，因为它接受任意值

只会使用匹配的混合物。变量可以匹配任何传入值，而变量以外的固定值只匹配其相等的传入值。我们还可以匹配多个参数：mixin(@ a){ color : @ a；}.mixin (@a，@b) { color: fade(@a，@ b)；}当我们想要根据表达式而不是值和参数进行匹配时，指导非常有用。如果你非常熟悉函数式编程，你可能已经使用过指南。

为了尽可能保留CSS的声明性，LESS通过引导混合而不是if/else语句来实现条件判断，因为前者已经在@media查询属性中定义了。从这个例子开始：mixin (@a)当(明度(@a)=50%) {底色-颜色：黑色；}.mixin (@a)当(明度(@a) 50%) { background-color:白色；}.mixin(@ a){ color : @ a；}当关键字用于定义引线序列时(本例中只有一个引线)。接下来，我们运行以下代码：class1 {。mixin (# DDD)}。class2 {。mixin (# 555)}将获得：

. class1 {底色-颜色：黑色；color: # ddd}.class2 { background-color:白色；color: # 555}导航中所有可用的比较操作为：===。此外，关键字true仅表示布尔真值，以下两种混合是相同的：真理(@ a)当(@ a) {时.}.当(@ a=true)时为true(@ a).}除关键字true之外的所有值都被视为布尔值false:类{。真理(40)；//将不符合上述任何定义。}前导序列用逗号“，”分隔，当且仅当所有条件都满足时，它将被视为成功匹配。

那个。mixin (@ a)当(@ a 10)、(@ a-10) {时.}指南可以没有参数，或者比较参数：

@ media: mobile。当(@media=mobile)时，mixin (@a).}.当(@media=desktop) {时，mixin (@a).}.当(@a @b) { width: @a }时，最大值(@a，@b)。max (@a，@b) when (@a @b) {width: @b}最后，如果我们想根据值类型进行匹配，可以使用is*函数：当(isnumber (@ b))时，mixin (@ a，@ b: 0).}.当(iscolor (@ b))时，mixin (@ a，@ b: black).}以下是常见的检测功能：

Is color is number is string is关键字is URL如果要确定一个值是纯数字还是某个单位数量，可以使用以下函数：

Ispixel ispercentage isem。最后，可以再补充一点。在导频序列中，and关键字可用于实现and条件：mixin (@ a) when (isnumber (@ a))和(@ a)0.}使用not关键字实现或条件。不在(@b 0)时mixin (@b).}嵌套规则

LESS允许我们以嵌套的方式编写级联样式。我们先来看看下面的CSS:

# header { color: black} #标题。导航{ font-size : 12px；} #标题。徽标{ width: 300px} # header . logo : hover { text-decoration : none；}在LESS中，我们可以这样写：

# header { color: black。导航{ font-size : 12px；} .徽标{ width: 300px:悬停{text-decoration : none}}或者这样写：

# header { color: black。导航{ font-size: 12px }。徽标{ width: 300px: hover { text-decoration : none } }代码比较简洁，感觉有点像DOM结构格式。注意符号的使用——如果你想写一个序列选择器而不是后代选择器，你可以使用它们。这对于伪类尤其有用，例如： Hover和：focus，例如：带边框的{。向左浮动{ float:} .top { margin: 5px}}将输出

. bordered.float { float: left}.有边的。top { margin: 5px}操作

任何数字、颜色或变量都可以参与操作。让我们看一组例子：

@ base : 5%；@ filler : @ base * 2；@ other: @ base @ fillercolor : # 888/4；背景色： @基色# 111；height : 100%/2 @填充物；LESS的操作超出了我们的预期，可以区分颜色和单位。如果单元操作如下，

@ var : 1px 5；LESS将输出6px括号，也允许：

width :(@ var 5)* 2；并且操作：可以在复合属性中执行

border :(@ width * 2)solid black命名空间

有时，您可能会打包一些变量或混合模块来更好地组织CSS，或者只是为了更好地封装。在#bundle中定义了一些属性集后，可以重用：如下所示。

#bundle {。button(){ display : block；border: 1px纯黑；背景-颜色：灰色；悬停{背景色：白色}}。选项卡{.}.引文.}}你只需要介绍。#header a中的按钮3360是这样的

# header a { color: orange#捆绑。按钮；}字符串插值

变量可以以类似于ruby和php的方式嵌入到字符串中，例如@{name} structure :

@ base-URL : ' http://assets . fnord.com '；背景-image : URL(' @ { base-URL }/images/BG . png ')；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。