标签: less

我正在尝试设计表格的样式，但边框没有显示。我以前从未发生过这种情况，所以我不知道该怎么办。

这是我的桌子：

<table class="table">
  <thead>
    <tr>
      <th>Dessert (100g serving)</th>
      <th>Calories</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dessert (100g serving)</td>
      <td>Calories</td>
    </tr>
  </tbody>
</table>

这是我的较少：

@dark-text: rgba(0,0,0,0.87);
@dark-text-secondary: rgba(0,0,0,0.54);
@dark-text-disabled: rgba(0,0,0,0.26);

.table {
    z-index: 10;

    thead {
        tr {
            border-bottom: 3px solid @dark-text-disabled;
            z-index: 10;

            th {
                color: @dark-text-secondary;
                z-index: 10;
            }
        }
    }

    tbody {
        tr {
            border-bottom: 3px solid @dark-text-disabled;
            z-index: 10;

            td {
                z-index: 10;
            }
        }
    }
}

http://codepen.io/anon/pen/JdOaVO

我有以下LESS变量:@yellow:#fbba00;

我想将这种颜色应用于trwith 的背景opacity: 0.2.

我试过以下,但问题是不透明度应用于整个tr,而不仅仅是背景.

我看见几个题目涉及背景混浊(1,2),但他们总是用rgba()设置颜色.它与我要找的不匹配(LESS变量).

在LESS/CSS文件中:

@yellow: #fbba00;

.bg-light-yellow {
    background-color: @yellow;
    opacity: 0.2;
}

在HTML页面中:

<tr class="bg-light-yellow">
    ...
</tr>

我试图在我的 Angular 2 应用程序中覆盖一些 Material2 样式，但到目前为止我无法让它工作。具体来说，我想覆盖 md 菜单的背景颜色。这是我的 html 的样子：

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg">
  <button md-menu-item routerLink="option-A" class="sub-drop-item">Option A</button>
...
</md-menu>

这就是我尝试在 LESS/CSS 中添加的内容：

md-menu.sub-drop-bg /deep/ {
  background-color: #555 !important;
}

到目前为止，这似乎没有效果。默认#fff背景颜色仍然显示为 md 菜单背景。

作为附加信息，当我将鼠标悬停在元素上并检查元素时，我看到默认mat-menu-content类的样式为白色背景，如下所示：

.mat-menu-content {
    background: #fff;
}

我已经尝试将该类添加到我的组件 CSS 中，并使用它来覆盖背景颜色，但也无济于事。如果我在浏览器控制台中为该类“取消选择”该颜色，背景颜色就会消失（变为透明）。但是，正如我所说，在我重新加载时，添加该类并覆盖 CSS 中的颜色不会覆盖白色。

如何仅使用 CSS 来完成此操作？

我在这里做错了什么？

我正在使用 less@3.8.1

A.css（从 url 导入的 css 文件）

@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');

App.less（导入 A.css 的较少文件）

@import (css) './A.css';

使用 webpack 构建，它会尝试加载

./https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin

而不是来自 url 的 css。

堆：

@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
^
Can't resolve './https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin' in ...

总结 A.Less - 导入 -> B.css - (B.css 使用通过 url 导入) -> 不工作

我有以下列表：

$reboot: (
    'color': #000,
    'font-size': 16px,
    'font-weight': 400,
    'font-family': -apple-system, BlinkMacSystemFont, 'Segoe UI',.........etc,
);

现在，我想使用color唯一的这种方式$reboot.color/ $reboot['color']或任何其他方式，这里我不需要循环。我需要在不同的地方一些特定的物品。

是否可以使用列表中的单个项目（无循环）？

我需要帮助尝试将此LESS嵌套CSS转换为标准CSS.有人可以帮忙吗？

.leftNav {
    a.TopLevel {
        float:none;
    }

    ul#topnav {
        > li {
            float:none;
            height: 2em;
            margin: 2px;
            background-color: rgb(1,64,117);
            border: 1px solid rgb(1,64,117);

                color: #fff;
            border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, rgb(30,94,147)),  color-stop(0.99, rgb(1,64,117)) );
            background: -moz-linear-gradient(center top,  rgb(30,94,147) 3%, rgb(1,64,117) 99% );
        }

        > li .sub {
            left:120px;
            top: 0px;
        }

        > li > h2 > a {
            color: #fff;
        }

        > li:hover > h2 > a, > li > h2 > …

我做了很多前端工作,并且正在考虑选择CSS LESS,但是在学习它的过程中,意识到它可能不会像我认为的那样工作,并且可能无法帮助我.所以我认为下面是CSS LESS的工作原理,使用它的人可以确认一下吗？

CSS LESS使用SimpLESS编译器工作,并且通过实现编程元素,使初始css编码的过程更加容易.然而,上传CSS代码之前,必须从动态.LESS格式转换成正常的CSS格式,一旦上传到服务器,只能充当一个静态的.css文件.

以上是正确的吗？我问,因为我使用了许多已经创建了大部分样式表的wordpress网站和主题,如果我必须将.less格式编译为.css格式并且每次重新上载而不是能够将其用作一个像jQuery这样的动态预加载库,那么我可能无法从CSS中获得尽可能多的东西,因为我之前认为它会让我受益.

我正在使用Bootstrap并专注于移动导航.当盘旋时,图标(三条水平线)具有灰色背景颜色; 但是,背景颜色仅在图标的一半处(见图).我不介意这种背景颜色,但我想要在顶部有圆形边缘的完整图标,因为它们位于底部.我怎样才能做到这一点？任何想法/建议表示赞赏.

我正在浏览 bootstrap 的 less 代码。我很好奇定义 css 类时“>”和“&”是什么意思？

  .navbar-nav {                                                                           
    > li > a {                                                                            
      color: @navbar-custom-link-color;                                                   

      &:hover,                                                                            
      &:focus {                                                                           
        color: @navbar-custom-link-hover-color;                                           
      }                                                                                   
    }                                                                                     
    > .active > a {                                                                       
      &,                                                                                  
      &:hover,                                                                            
      &:focus {                                                                           
        color: @navbar-custom-link-active-color;                                          
      }                                                                                   
    }                                                                                     
    > .disabled > a {                                                                     
      &,                                                                                  
      &:hover,                                                                            
      &:focus {                                                                           
        color: @navbar-default-link-disabled-color;                                       
        background-color: @navbar-default-link-disabled-bg;                               
      }                                                                                   
    }                                                                                     
  } 

有less.js的详细教程可以参考吗？

我学的很少,让我知道如何创建一个文件"styles.css"被调用,并在其中导入其他文件少,以便更有序和分离我的CSS即;

我想在一个较少的文件中自定义标头,以及在其他较少的竞争文件中发生的事情

如果这不可能？

因此,在编译时,所有内容都保存在我的库styles.css中