Less重点功能-参数逻辑条件混合Mixin_Guards

最新推荐文章于 2020-07-24 16:23:29 发布
原创 最新推荐文章于 2020-07-24 16:23:29 发布 · 431 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Less #Less重点功能 #Mixin_Guards

本文介绍了一种使用CSS预处理器定义颜色变量的方法，通过@name参数动态设置颜色值，实现更灵活的颜色管理。例如，当名字为white时，颜色被定义为#fbfbfb。这种方法可以提高代码的可维护性和可读性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

字体颜色定义：

//用#表示，当名字为white时颜色为fbfbfb
#color(@name) when (@name=white){
    color: #fbfbfb;
}
.nav__item{
    #color(white);
}

 

Less基础-功能和使用方法
weixin_50119334的博客
11-09 797
Less基础 维护css的弊端 CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 CSS需要书写大量看似没有逻辑的代码冗余度是比较高的。 不方便维护及扩展，不利于复用。 CSS没有很好的计算能力 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。 Less介绍 Less( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语
react-native-scrollable-mixin:可滚动的React Native组件的标准接口，使组成组件更加容易
04-13
有关此mixin的装饰器版本，请参见 。 安装 npm install react-native-scrollable-mixin 用法 将ScrollableMixin添加到可滚动的React组件中，并实现getScrollResponder() ，该方法必须返回基础可滚动组件的滚动响应...
less新手入门（四）—— Mixin Guards
weixin_34191845的博客
12-22 106
八、Mixin Guards 有条件的 mixin 当您想要匹配表达式时，相对于简单的值或特性，Guards是有用的。如果您熟悉函数式编程，您可能已经遇到过它们。 为了尽可能地保持CSS的声明性质，在@ media查询特性规则中，Less选择通过保护的mixin而不是if/ elsestatements 来执行条件执行。 .mixin (@a) when (lightness(...
3.python中的基本概念
weixin_30549657的博客
11-27 118
注释： 单行注释 # 多行注释 """ ''' 变量： 把程序运行中产生的值，暂时存储在内存，方便后面的程序调用。 变量命名的规则： 1、用数字、字母、下划线组成。 2、不能用数字开头，更不能是纯数字。 3、不能使用python的关键字。 4、不要用中文写代码。 5、不要太长。 6、要有意义 7、区分大小写。 8、推荐使用驼峰或者下划线。 python中的 py...
less 新手入门（四）—— Mixin Guards
胡西风的博客
12-05 396
本文由 简悦 SimpRead 转码， 原文地址 https://www.cnblogs.com/fighxp/p/8080241.html 八、Mixin Guards 有条件的 mixin 当您想要匹配表达式时，相对于简单的值或特性，Guards 是有用的。如果您熟悉函数式编程，您可能已经遇到过它们。 为了尽可能地保持 CSS 的声明性质，在 @ media 查询特性规则中，Less ...
Less的条件表达式Guards
歪脖先生的博客
11-21 2796
Less的条件表达式 当需要根据表达式，而不是参数的值或数量进行匹配时，条件表达式（Guards）就显得非常有用。如果你熟悉函数式编程的话，对条件表达式也不会陌生。 为了尽可能地接近CSS的语言结构，Less使用关键字 when 而不是 if/else来实现条件判断，因为 when 已经在CSS的 @media query 特性中被定义。 表达式中可以使用比较运算符、逻辑运算符、或检查函
Python库 | libsass-0.12.3-cp36-cp36m-macosx_10_12_x86_64.whl
02-17
首先，`libsass`是Sass（Syntactically Awesome Style Sheets）的C++实现，它的主要作用是将Sass语言编译成CSS，使得开发者可以利用Sass的强大功能，如变量、嵌套规则、混合、函数等，来编写更简洁、可维护的样式表...
vue-in-viewport-mixin:Vue 2 mixin确定何时在客户端窗口中可见DOM元素
04-28
Vue在视口Mixin中 Vue 2 mixin通过使用更新Vue数据值来确定DOM元素在客户端窗口中何时可见。 然后，您可以使用这些数据值执行触发转换之类的操作。 您可能需要检查此软件包的指令vesion： 。 演示： : 安装 该...
前端开源库-react-addons-pure-render-mixin
08-29
1. 导入PureRenderMixin：首先需要从`react-addons-pure-render-mixin`模块中导入这个混合物。 ```jsx var PureRenderMixin = require('react-addons-pure-render-mixin'); ``` 2. 应用到组件：将PureRenderMixin...
loopback-allowed-properties-mixin:环回mixin设置可以在请求中接收哪些字段
03-29
回送允许属性混合 环回mixin设置可以在请求中写入哪些字段。 安装 npm install loopback-allowed-properties-mixin --save 用法 将mixins属性添加到您的server/model-config.json ： { " _meta " : { " sources...
less学习（六）— 关于带参数的Mixin
MoLvSHan的博客
11-09 2671
Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in.（当使用混合时，可以通过选择器块带变量参数。） .border-radius(@radius) { -webkit-border-radius: @radius; -moz-
LESS (CSS 框架)
weixin_33713350的博客
03-27 155
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 LESS 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS...
学会如何使用LESS（三）----条件表达式、循环、合并属性和引入
热门推荐
NINE-NINE的博客
06-09 1万+
学会如何使用LESS（三）----条件表达式、循环、合并属性和引入
more与less的作用、区别
flywindnet的专栏
03-16 894
Linux中用来查看大文本时用的翻页命令。 more:可以向下翻页，利用向下箭头来翻页。 例子：more abc.txt less:可上下翻页，利用向上向下箭头翻页。 例子：less abc.txt more与less的区别：more只能向下翻页，不能向上翻。而less比较灵活，可上下翻页。...
React从入门到精通系列之(7)根据条件选择性渲染元素
weixin_34248258的博客
12-14 452
根据条件选择性渲染元素 在React中，您可以根据所需行为来创建并封装的不同组件。 然后，您可以根据某些条件来仅仅渲染其中的某一些。当然，这具体取决于当前应用程序的状态。 React中的分条件渲染与JavaScript中的分条件工作方式相同。 使用JavaScript运算符（如if或条件运算符）来创建一个表示当前状态的元素，让React匹...
less **Mixin**混入
weixin_42235173的博客
06-05 478
Mixin混入 Mixin（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。 */\*-----------------mixin* *混入**----------------\*/** /***颜色***/* .re...
less学习（九）—关于Guards
MoLvSHan的博客
11-14 572
Less Mixin Guards 如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。 它与mixin声明相关联，并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。 下面列出了不同类型的mixins g
Less学习--逻辑运算、属性规则集
hide_in_darkness的博客
07-24 962
逻辑运算 // 算术运算符±*/会在计算之前考虑单位并转换 @base:5%; @couversion-1:5cm+10mm; 属性规则集 可以自己定义一个CSS属性集 @detached-ruleset:{ background:red; width: 100px; height: 200px; }; .top_list_goup{ @detached-ruleset(); //调用时必须加上() } 可以在属性规则集中采用@media冒泡 @my-ruleset: { .my-se
less学习（五）—关于Mixin
MoLvSHan的博客
11-08 595
今天进入到Mixin（混合）的学习，经过前面几天的学习已经初步掌握了关于变量和关于Extend的一些语法和规则，如果有朋友觉得我写的实在渣的话，可以移步less官方文档自行学习。 先上一个基本用法的例子 .box1 { color: red; } .box3 { .box1(); }编译为： /* line 1, http://localhost/about-less/styles.le
cd ~/moveit2_ws rm -rf build install log colcon build --mixin release --packages-select moveit_setup_assistant source install/setup.bash # 再次确认环境加载 usage: colcon [-h] [--log-base LOG_BASE] [--log-level LOG_LEVEL] {build,extension-points,extensions,graph,info,list,metadata,test,test-result,version-check} ... colcon: error: unrecognized arguments: --mixin release bash: install/setup.bash: 没有那个文件或目录
最新发布
04-01
<think>好的，我现在需要帮用户解决Colcon构建时出现的两个问题：一个是使用`--mixin release`参数报错，另一个是`source install/setup.bash`找不到文件。同时，用户提到这是在MoveIt2环境中遇到的问题。 首先，针对`unrecognized arguments: --mixin release`错误。我记得Colcon的mixin配置可能需要特定的配置文件，或者用户可能没有正确安装或配置mixin。应该检查是否安装了colcon-mixin扩展，或者是否拼写错误。例如，可能应该是`--mixin release`还是其他名称，比如`--mixin release-cxx`？另外，用户可能需要确认他们的Colcon版本是否支持这个mixin，或者是否需要更新colcon-mixin包。 接下来是`source install/setup.bash`找不到文件的问题。这通常发生在构建失败或者构建目录不正确的情况下。可能用户运行`colcon build`时出现了错误，导致install目录没有正确生成。或者，用户可能是在错误的目录下运行source命令，比如没有在colcon工作空间的根目录下执行。需要检查构建过程是否成功，以及install目录下是否存在setup.bash文件。 接下来，我需要验证这些可能性。首先，检查colcon-mixin的安装情况。用户可能需要运行`colcon mixin list`来查看可用的mixin列表，如果release不在其中，可能需要添加。另外，MoveIt2可能有特定的构建指令，比如是否需要使用其他参数替代`--mixin release`，或者是否需要先配置mixin仓库。 关于setup.bash的问题，如果构建失败，install目录可能不存在或者不完整。用户需要先确保构建成功，再尝试source。此外，可能构建的输出目录被更改了，比如使用了`--build-base`参数，导致install目录的位置不同。 可能需要指导用户正确安装colcon-mixin，并正确配置mixin，然后重新构建。如果构建成功，install目录应该生成setup.bash。如果构建失败，需要查看构建日志，解决编译错误。 另外，用户可能在运行colcon build时遗漏了一些必要的依赖安装步骤，比如rosdep install --from-paths src --ignore-src -r -y，这可能导致构建失败，从而没有生成install目录。 总结来说，解决步骤应该是： 1. 确保colcon-mixin已安装，并正确配置了mixin仓库，然后检查可用的mixin列表，确认是否存在release或者对应的正确名称。 2. 如果`--mixin release`不可用，可能需要改用其他参数，比如直接使用CMake的构建类型参数，例如`--cmake-args -DCMAKE_BUILD_TYPE=Release`。 3. 确保在构建之前安装了所有依赖项，运行rosdep install命令。 4. 执行colcon build时，确认没有错误，构建成功后，install目录才会生成setup.bash。 5. 如果构建成功但setup.bash仍然找不到，检查是否在正确的目录下运行source命令，通常应该在colcon工作空间的根目录下执行。 同时，用户可能在MoveIt2的特定环境中需要遵循他们的构建文档，可能需要查阅MoveIt2的官方指南，确认是否有特殊步骤或推荐的构建参数。 最后，生成相关问题时要考虑用户可能遇到的后续问题，比如如何调试构建错误，如何添加自定义mixin，或者如何修改构建目录等。</think>### 问题分析与解决 #### 1. `--mixin release`参数报错 **原因**：Colcon的`--mixin`参数需要预先定义对应的配置。`release`可能未被正确配置或`colcon-mixin`扩展未安装。MoveIt2可能推荐特定的构建配置，而非直接使用`--mixin release`。 **解决步骤**： 1. **安装`colcon-mixin`**： ```bash sudo apt-get install python3-colcon-mixin colcon mixin update # 更新mixin仓库 colcon mixin list # 查看可用mixin列表 ``` 若列表中无`release`，需手动添加或改用CMake参数[^1]。 2. **改用CMake构建类型**： 直接指定Release模式： ```bash colcon build --cmake-args -DCMAKE_BUILD_TYPE=Release ``` #### 2. `setup.bash`文件找不到 **原因**：构建失败或构建路径错误，导致`install`目录未生成。 **解决步骤**： 1. **确保构建成功**： - 检查依赖是否安装： ```bash rosdep install --from-paths src --ignore-src -r -y ``` - 重新构建并观察日志： ```bash colcon build --event-handlers console_direct+ ``` 2. **验证文件路径**： - 构建成功后，`install/setup.bash`应位于Colcon工作空间根目录。确认执行`source`命令的路径正确： ```bash cd ~/ros2_ws # 假设工作空间为ros2_ws source install/setup.bash ``` 3. **修复构建错误**： - 若构建失败，根据日志解决编译错误（如缺少包、接口不兼容等）。 --- ### 完整操作流程 ```bash # 1. 安装依赖和colcon-mixin sudo apt-get install python3-colcon-mixin rosdep install --from-paths src --ignore-src -r -y # 2. 构建（使用CMake参数替代--mixin release） colcon build --cmake-args -DCMAKE_BUILD_TYPE=Release # 3. 激活环境 source install/setup.bash ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值