- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使用 Less 的 extend
函数时遇到了一些问题。在某些情况下它不起作用,我不明白为什么。有一段有问题的代码:
.page-header {
.bar:extend(.fixedElement) { // it works
...
}
.menu:extend(.fixedElement) { // it works
...
}
// some other stuff
.menu-list {
...
.btnStyle {
padding: 18px 20px;
min-height: 60px;
width: 100%;
display: block;
border-bottom: 1px solid @light2;
}
.linkStyle:extend(.btnStyle) { // doesn't work
//.btnStyle;
background-color: @light1;
.remCalc(14);
&:active {
background-color: transparent;
}
}
.chosen {
background-color: transparent;
&:after {
color: @primaryColor;
}
}
...
.level-2 {
& > ul {
a:extend(.linkStyle) { // doesn't work
//.linkStyle;
}
}
}
.level-3 {
...
& > ul > li {
.btn-menu {
&.shown:extend(.chosen) { // doesn't work
//.chosen;
}
}
& > a:extend(.linkStyle) { // doesn't work
//.linkStyle;
}
}
.selected {
.btn-menu:extend(.chosen) { // doesn't work
//.chosen;
}
}
}
.btn-menu:extend(.btnStyle) { // doesn't work
//.btnStyle;
...
}
}
}
和:
.gradientBg {
background: rgb(200, 200, 200);
background: -webkit-linear-gradient(295deg, rgb(200, 200, 200) 10%, rgb(255, 255, 255) 90%);
background: -o-linear-gradient(295deg, rgb(200, 200, 200) 10%, rgb(255, 255, 255) 90%);
background: linear-gradient(25deg, rgb(200, 200, 200) 10%, rgb(255, 255, 255) 90%);
border: 1px solid @light2;
}
.gr-box, .btn-1 {
&:extend(.gradientBg); //it works
}
由 .fixedElement
或 .gradientBg
扩展的元素可以正常编译为 CSS,但不能通过 .btnStyle
、.linkStyle
和 .chosen
(它们只是不在 CSS 中;现在它只在每次放置 mixin 时起作用)。编译过程中没有任何错误。
我使用带有 Less Autocompile 1.1.9 扩展的 Brackets 1.3。我做错了什么?
最佳答案
Quoting Less Website: emphasis is mine
Extend by default looks for exact match between selectors. It does matter whether selector uses leading star or not. It does not matter that two nth-expressions have the same meaning, they need to have to same form in order to be matched. The only exception are quotes in attribute selector, less knows they have the same meaning and matches them.
下面的代码会起作用,因为 extend
函数的参数与另一个已定义的选择器完全匹配。 (注意:为了简单起见,我删除了一些属性。)
.gradientBg { background: rgb(200, 200, 200); }
.gr-box, .btn-1 { &:extend(.gradientBg); }
但下面的代码将不起作用,因为嵌套选择器的编译选择器路径将是 .parent .gradientBg
并且提供给 extend
函数的参数不是精确的匹配。
.parent{
.gradientBg { background: rgb(200, 200, 200); }
}
.gr-box, .btn-1 { &:extend(.gradientBg); }
在上述情况下,Less 编译器甚至不会抛出错误,因为当没有匹配项时它会自动失败。
当使用extend
特性来扩展嵌套选择器时,应该提供一个完全匹配的选择器(完整的选择器路径)(或者)应该使用all
关键字。
下面的内容将作为完整的匹配选择器路径提供给 extend
函数。
.parent{
.gradientBg { background: rgb(200, 200, 200); }
}
.gr-box, .btn-1 { &:extend(.parent .gradientBg); }
或者,根据您的需要,即使这样也可以工作,因为使用了 all
关键字。
.parent{
.gradientBg { background: rgb(200, 200, 200); }
}
.gr-box, .btn-1 { &:extend(.gradientBg all); }
但请注意输出选择器如何具有结构 .parent .gr-box
和 .parent .btn-1
。这是因为 Less 仅用新选择器替换选择器的匹配部分。在 .parent .gradientBg
(原始选择器)中,匹配部分(作为参数提供给 extend
)只是 .gradientBg
,因此是输出选择器在 extend
之后将是 .parent .gr-box
。
Here is what the Less website says about extend "all": emphasis is mine
When you specify the all keyword last in an extend argument it tells Less to match that selector as part of another selector. The selector will be copied and the matched part of the selector only will then be replaced with the extend, making a new selector.
使用 all
关键字时还应注意的另一件事是,Less 会扩展所有具有匹配部分的选择器的属性。因此,例如,如果我们考虑以下 Less 代码。
.parent{
.gradientBg { background: rgb(200, 200, 200); }
}
.parent2{
.gradientBg{ color: red; }
}
.gr-box, .btn-1 { &:extend(.gradientBg all); }
输出如下,因为 .gradientBg
选择器在 .parent
和 .parent2
中使用。
.parent .gradientBg, .parent .gr-box, .parent .btn-1 {
background: #c8c8c8;
}
.parent2 .gradientBg, .parent2 .gr-box, .parent2 .btn-1 {
color: red;
}
关于css - 扩展功能不适用于嵌套选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31367799/
我之前让 dll 注入(inject)器变得简单,但我有 Windows 7,我用 C# 和 C++ 做了它,它工作得很好!但是现在当我在 Windows 8 中尝试相同的代码时,它似乎没有以正确的方
我正在尝试制作一个名为 core-splitter 的元素,该元素在 1.0 中已弃用,因为它在我们的项目中起着关键作用。 如果您不知道 core-splitter 的作用,我可以提供一个简短的描述。
我有几个不同的蜘蛛,想一次运行所有它们。基于 this和 this ,我可以在同一个进程中运行多个蜘蛛。但是,我不知道如何设计一个信号系统来在所有蜘蛛都完成后停止 react 器。 我试过了: cra
有没有办法在达到特定条件时停止扭曲 react 器。例如,如果一个变量被设置为某个值,那么 react 器应该停止吗? 最佳答案 理想情况下,您不会将变量设置为一个值并停止 react 器,而是调用
https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js 上面的链接定义了外部js文件,我不知道Angular-1.0.0rc9.js的注入(in
我正在尝试运行一个函数并将服务注入(inject)其中。我认为这可以使用 $injector 轻松完成.所以我尝试了以下(简化示例): angular.injector().invoke( [ "$q
在 google Guice 中,我可以使用函数 createInjector 创建基于多个模块的注入(inject)器。 因为我使用 GWT.create 在 GoogleGin 中实例化注入(in
我在 ASP.NET Core 1.1 解决方案中使用配置绑定(bind)。基本上,我在“ConfigureServices Startup”部分中有一些用于绑定(bind)的简单代码,如下所示: s
我在 Spring MVC 中设置 initBinder 时遇到一些问题。我有一个 ModelAttribute,它有一个有时会显示的字段。 public class Model { privat
我正在尝试通过jquery post发布knockoutjs View 模型 var $form = $('#barcodeTemplate form'); var data = ko.toJS(vm
如何为包含多态对象集合的复杂模型编写自定义模型绑定(bind)程序? 我有下一个模型结构: public class CustomAttributeValueViewModel { publi
您好,我正在尝试实现我在 this article 中找到的扩展方法对于简单的注入(inject)器,因为它不支持开箱即用的特定构造函数的注册。 根据这篇文章,我需要用一个假的委托(delegate)
你好,我想自动注册我的依赖项。 我现在拥有的是: public interface IRepository where T : class public interface IFolderReposi
我正在使用 Jasmine 测试一些 Angular.js 代码。为此,我需要一个 Angular 注入(inject)器: var injector = angular.injector(['ng'
我正在使用 Matlab 代码生成器。不可能包含代码风格指南。这就是为什么我正在寻找一个工具来“ reshape ”、重命名和重新格式化生成的代码,根据我的: 功能横幅约定 文件横幅约定 命名约定 等
这个问题在这里已经有了答案: Where and why do I have to put the "template" and "typename" keywords? (8 个答案) 关闭 8
我开发了一种工具,可以更改某些程序的外观。为此,我需要在某些进程中注入(inject)一个 dll。 现在我基本上使用这个 approach .问题通常是人们无法注入(inject) dll,因为他们
我想使用 swing、spring 和 hibernate 编写一个 java 应用程序。 我想使用数据绑定(bind)器用 bean 的值填充 gui,并且我还希望它反射(reflect) gui
我有这段代码,当两个蜘蛛完成后,程序仍在运行。 #!C:\Python27\python.exe from twisted.internet import reactor from scrapy.cr
要点是 Spring Batch (v2) 测试框架具有带有 @Autowired 注释的 JobLauncherTestUtils.setJob。我们的测试套件有多个 Job 类提供者。因为这个类不
我是一名优秀的程序员,十分优秀!