Html 嵌套类未应用于LESS";功能“;
考虑一下这个更少的文件Html 嵌套类未应用于LESS";功能“;,html,css,less,Html,Css,Less,考虑一下这个更少的文件 @media screen and (max-width: 1200px){ .container(100px); } @media screen and (max-width: 200px){ .container(40px); } .container(@size){ margin: 50px; div.left{ background-color: blue; font-size: @size;
@media screen and (max-width: 1200px){
.container(100px);
}
@media screen and (max-width: 200px){
.container(40px);
}
.container(@size){
margin: 50px;
div.left{
background-color: blue;
font-size: @size;
}
div.right{
background-color: red;
font-size: @size;
}
}
这个HTML文件:
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
左边
正确的
我发现右边的
工作得很好,但左边的没有风格。。。这里怎么了
注意:我尝试了>操作符,&操作符,擦除div并使无效。左无效…您运行的混音没有正确的选择块 尝试将代码更改为:
@media screen and (max-width: 1200px){
.container {
.container(100px);
}
}
@media screen and (max-width: 200px){
.container {
.container(40px);
}
}
.container(@size){
margin: 50px;
div.left{
background-color: blue;
font-size: @size;
}
div.right{
background-color: red;
font-size: @size;
}
}
我不明白你的功能是什么。参数通常应用于属性,而不是选择器。您的代码不会像您可能认为的那样创建
.container div.left
和.container div.right
选择器。请注意,mixin调用会扩展mixin内容,而不是“内容和mixin名称”(因此,上面的代码只会创建div.left
和div.right
。有关正确的示例,请参见下面的@Josh answer。确实如此。我会将示例编辑到答案中,但请确保您的媒体查询按照您的预期进行。尝试添加“默认值”媒体查询外部的路径。@Muli明白了。因此,如果它不适用于您,请仔细检查您的HTML。当然。需要确保您的媒体查询正在执行您希望它们执行的操作。这两个可能不是您期望的操作,一个仅在视口低于1200px时适用,另一个仅在视口低于200px时适用(不太可能)。由于没有特异性差异,您可能只会看到低于1200px的。其次,您需要将参数化的mixin(函数)用作属性,而不是选择器本身。因此,您应该使用.container(100px)
而不是.my element container{.container properties(100px;}
。有意义吗?另外,尽可能使用默认路径。你永远不知道客户将在什么地方查看你的网站,因此,拥有一个服务于媒体查询未涵盖的所有内容的路径始终是一个好主意。我正在寻找的是一种调整字体大小的方法,这是一个好的解决方案吗?(我不需要中间值…)