less 相关问题

Less是一个开源样式表预处理器，它使用动态行为（如变量，混合，操作和函数）扩展CSS。对于UNIX命令，请使用[less-unix]。

PhpStorm：在源 LESS 下分组/嵌套 *.map 文件（以及 *.css 文件）

目前，当配置文件观察器时，PhpStorm 将生成的 *.css 文件嵌套在 *.less 文件下。有什么方法可以获取那里的 *.map 文件吗？例子：这是其中之一吗...

css intellij-idea less phpstorm

回答 4 投票 0

SCSS 中的 Mixin（一个类在另一个类中的属性）

在 LESS 中我可以写这样的东西： .foo{ 红色; } .嘘{ .foo(); 背景：蓝色； } 将 .foo 类的属性“包含”到 .boo 类中。什么是最简单、最明确的...

sass less scss-mixins

回答 2 投票 0

sbt-less 使用旧版本的 less；怎么更新？

sbt-less 和 lessc 产生不同的输出。特别是，lessc（v4.2.0）编译顶部： calc(-@li-vspace + @icon-size / 2 - 5px); 到顶部：计算（-1.7rem + 2rem / 2 - 5px）；而无 sbt

playframework sbt less sbt-web

回答 1 投票 0

为什么不应用此 CSS 规则？

我希望所有文本字体默认使用 Roboto，但也希望某一特定类别使用 Roboto Thin。到目前为止，这是我的代码：少混入 * { 字体系列：“Roboto”，无衬线字体；保证金：0； p...

reactjs less

回答 3 投票 0

我们怎样才能仅使用 flex 来获得这样的布局？

我想要这样的布局，我该如何编写CSS代码？我的 HTML（我已将 CSS 移至 HTML 的样式中）：我想要这样的布局，我该如何编写CSS代码？我的 HTML（我已将 CSS 移至 HTML 中的样式中）： <div class="container" style={{ display: "flex", flexWrap: "wrap" }}> <div class="orange" style={{ flex: 1 }}> <div id="chart" /> </div> <div class="yellow" style={{ flex: 1 }}> <LineChart width={600} height={300} data={this.state.data2} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} /> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> </div> </div> Flex 可以方便地正确定位 sidebar 和 content 元素并调整其大小，如下例所示。不需要任何固定的像素宽度，也不需要对简单的块元素header和footer使用flex。 .header { background: red; } .sidebar { background: orange; } .content { background: yellow; } .footer { background: green; } .container { display: flex; } .sidebar { flex: 1; } .content { flex: 3; } <div class="header">header</div> <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div> <div class="footer">footer</div> 如果侧边栏和内容位于带有 display: flex 的容器中，您可以通过以下样式来实现此目的 .sidebar { // set width width: 200px; // for example } .content { flex: 1; } 尽管您可能会考虑使用固定侧边栏，但这就是您实现图片布局的方式。

css sass flexbox less

回答 2 投票 0

如何在vue组件中使用less变量？

我已经将.less文件导入到vue组件中，但它仍然给我一个错误。我在 asset/less 下的 base.less 中定义了变量。 @font-face { 字体系列：'Poppins'； src: url(../字体/

vue.js less vue-composition-api

回答 1 投票 0

为子类设置背景条件

仅当子按钮具有单击时发生的“折叠”类时，我才想更改父级（面板标题）的背景。我只能使用样式。 HTML：我想仅当子按钮具有单击时发生的“折叠”类时才更改父级（面板标题）的背景。我只能使用样式。 HTML： <div class="panel"> <div class="panel-heading"> <button class="collapsed">...</button> </div> </div> LESS：（我找到了这个，但它不起作用） .panel-heading:has(button[class="collapsed"]) { background-color: #fff !important; } 或 .panel-heading:has(button.collapsed) { background-color: #fff !important; } 有什么建议吗？谢谢！您的代码正在运行，因为背景是白色的，所以您无法区分。尝试使用不同的背景颜色。查看以下代码： .panel-heading:has(button.collapsed) { background-color: pink; } <div class="panel"> <div class="panel-heading"> <button class="collapsed">...</button> </div> </div>

css less

回答 1 投票 0

如何将类样式应用于除特定类及其子类之外的所有内容？（嵌套主题）

html 项目一第二项 2.1 2.2 html <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul> 少 .style-b { li { color: rebeccapurple; } } .style-a { li { color: black; } } 结果图 .style-a 具有更高的优先级，因此嵌套的 .style-b 不起作用。我将css样式简化为一级嵌套li样式，实际上我的项目中有多个嵌套类。我尝试使用 :not() 来排除另一个，但似乎内部的复合选择器是被禁止的。 .style-b *:not(.style-a *) { li { color: rebeccapurple; } } .style-a *:not(.style-b *) { li { color: black; } } 我现在添加另一个类 .important 来提高优先级，并在嵌套类中添加 important 。但它只能支持两级嵌套，真是愚蠢。 ._styleA() { li { color: black; } } ._styleB() { li { color: rebeccapurple; } } .style-a { ._styleA() } .style-a.important { ._styleA() } .style-b { ._styleB() } .style-b.important { ._styleB() } 我终于弄清楚我的问题是如何实现嵌套主题。我发现 React UI 框架ant design的嵌套主题满足了我的需求。我自己也会实现同样的目标。参见ant design的css-var-plan 您可以像这样选择style-bul.style-b > li ul.style-b > li { color: rebeccapurple; } .style-a li { color: black; } <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul>

css less

回答 2 投票 0

如何将班级风格应用于除特定班级及其孩子之外的所有班级？

html 项目一第二项 2.1 2.2 html <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul> 少 .style-b { li { color: rebeccapurple; } } .style-a { li { color: black; } } 结果图 .style-a 具有更高的优先级，因此嵌套的 .style-b 不起作用。我将css样式简化为一级嵌套li样式，实际上我的项目中有多个嵌套类。我尝试使用 :not() 来排除另一个，但似乎内部的复合选择器是被禁止的。 .style-b *:not(.style-a *) { li { color: rebeccapurple; } } .style-a *:not(.style-b *) { li { color: black; } } 我现在添加另一个类 .important 来提高优先级，并在嵌套类中添加 important 。但它只能支持两级嵌套，真是愚蠢。 ._styleA() { li { color: black; } } ._styleB() { li { color: rebeccapurple; } } .style-a { ._styleA() } .style-a.important { ._styleA() } .style-b { ._styleB() } .style-b.important { ._styleB() } 您可以像这样选择style-bul.style-b > li ul.style-b > li { color: rebeccapurple; } .style-a li { color: black; } <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul> 我终于弄清楚我的问题是如何实现嵌套主题。我发现 React UI 框架ant design的嵌套主题满足了我的需求。

css less

回答 2 投票 0

Overflow-x：滚动切断 div 的开头

这可能是一个简单的修复，但我在任何地方都找不到它 - 也许我使用了错误的术语，所以如果我重复已经提出的问题，我深表歉意。我已经创建了

html css sass less

回答 3 投票 0

Overflow-x：滚动切断 div 的开头

这可能是一个简单的修复，但我在任何地方都找不到它 - 也许我使用了错误的术语，所以如果我重复已经提出的问题，我深表歉意。我已经创建了

html css sass less

回答 3 投票 0

更少的嵌套规则 - 我可以将级联选择器放在主选择器之前吗？

我的选择器需要是： .tooltip.right .tooltip-arrow 所以我使用以下嵌套规则： .tooltip-箭头{ .tooltip.right { 左：-(@ttArrowSize - 5); 顶部边距：-@ttArrowSize；