- 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/
是否有某种方法可以使用 JPA 或 Hibernate Crtiteria API 来表示这种 SQL?或者我应该将其作为 native 执行吗? SELECT A.X FROM (SELECT X,
在查询中, select id,name,feature,marks from (....) 我想删除其 id 在另一个 select 语句中存在的那些。 从 (...) 中选择 id 我是 sql
我想响应用户在 select 元素中选择一个项目。然而这个 jQuery: $('#platypusDropDown').select(function () { alert('You sel
这个问题在这里已经有了答案: SQL select only rows with max value on a column [duplicate] (27 个回答) 关闭8年前。 我正在学习 SQL
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and
我在 php 脚本中调用 SQL。有时“DE”中没有值,如果是这种情况我想从“EN”中获取值 应该是这样的,但不是这样的 IF (EXISTS (SELECT epf_application_deta
这可能是一个奇怪的问题,但不知道如何研究它。执行以下查询时: SELECT Foo.col1, Foo.col2, Foo.col3 FROM Foo INNER JOIN Bar ON
如何在使用 Camera.DestinationType.FILE_URI. 时在 phonegap camera API 中同时选择或拾取多个图像我能够一次只选择一张图像。我可以使用 this 在
这是一个纯粹的学术问题。这两个陈述实际上是否相同? IF EXISTS (SELECT TOP 1 1 FROM Table1) SELECT 1 ELSE SELECT 0 相对 IF EXIS
我使用 JSoup 来解析 HTML 响应。我有多个 Div 标签。我必须根据 ID 选择 Div 标签。 我的伪代码是这样的 Document divTag = Jsoup.connect(link
我正在处理一个具有多个选择框的表单。当用户从 selectbox1 中选择一个选项时,我需要 selectbox2 active 的另一个值。同样,当他选择 selectbox2 的另一个值时,我需要
Acme Inc. Christa Woods Charlotte Freeman Jeffrey Walton Ella Hubbard Se
我有一个login.html其中form定义如下: First Initial Plus Last Name : 我的do_authorize如下: "; pri
$.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data
我有一个下拉列表“磅”、“克”、“千克”和“盎司”。我想要这样一种情况,当我选择 gram 来执行一个函数时,当我在输入字段中输入一个值时,当我选择 pounds 时,我想要另一个函数来执行时我在输入
我有一个 GLSL 着色器,它从输入纹理的 channel 之一(例如 R)读取,然后写入输出纹理中的同一 channel 。该 channel 必须由用户选择。 我现在能想到的就是使用一个 int
我想根据下拉列表中的选定值生成输入文本框。 Options 2 3 4 5 就在这个选择框之后,一些输入字段应该按照选定的数字出现。 最佳答案 我建议您使用响应式(Reac
我是 SQL 新手,我想问一下如何根据首选项和分组选择条目。 +----------+----------+------+ | ENTRY_ID | ROUTE_ID | TYPE | +------
我有以下表结构: CREATE TABLE [dbo].[UTS_USERCLIENT_MAPPING_USER_LIST] ( [MAPPING_ID] [int] IDENTITY(1,1
我在移除不必要的床单时遇到了问题。我查看了不同的论坛并将不同的解决方案混合在一起。 此宏删除工作表(第一张工作表除外)。 Sub wrong() Dim sht As Object Applicati
我是一名优秀的程序员,十分优秀!