如何使用LESS

Question

我需要编写要应用于单个html文件的特定CSS

当前使用：带有LESS的Angular 1.5

目前，我正在使用角度应用程序，其中页眉和页脚很常见，但中间内容将有所不同...

<div class="header">Header</div>
<div class="container">
     <div class="home-page">Home</div>
</div>    
<div class="footer">Footer</div>

这是第二页代码

<div class="header">Header</div>
<div class="container">
     <div class="contact-us">Contact</div>
</div>
<div class="footer">Footer</div>

现在，我需要在第二页中固定页脚，在第一页中固定页脚。 在这里，每个页面的文件数要少一些。

我的问题是，如果我在更少的文件中写入.footer{position:fixed}，那么所有页面都会受到影响。

我找到了Internal css is working in ContactUs.html（或）Adding new CSS in JS file using element之类的解决方案，但我想知道有什么方法可以使用更少或更少的CSS文件解决问题？

请找到供参考。每当我们看到roadmap-page已加载时，都需要应用CSS。

Answer 1

您可以使用CSS兄弟选择器 + 实现此目的。如果 A B C D 0 99 78 61 69.5 1 16 73 8 12 2 62 27 30 28.5 3 80 7 76 78 4 15 53 80 66.5 与.footer同胞，则位置将固定。您可以在常见的styles.css或styles.less文件中编写以下CSS代码

.contact-us

如果您要动态地将类设置为页脚组件，则最好使用.contact-us + .footer { position: fixed; } .home-page + .footer { position: relative; } 装饰器。我会做的是

footer.component.ts

@Input()

footer.component.html

@Input() styleClass = 'footer';

contacts.component.html

<div [class]="styleClass">Footer text</div>

home.component.html

<app-footer [styleClass]="'footer-fixed'">Footer text</div>

CSS

<app-footer>Footer text</div>