Как найти вложенные классы, используя LESS - PullRequest
Новая
       6

Как найти вложенные классы, используя LESS

0 голосов
/ 25 февраля 2019

Мне нужно написать конкретный CSS для отдельного html-файла

В настоящее время используется: Angular 1.5 с LESS

В настоящее время я использую угловое приложение, где верхний и нижний колонтитулы являются общими, но среднимисодержимое будет меняться, как показано ниже ... 

<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, но я хотел знать, есть ли способ решить проблему, используя файл less или css?

Пожалуйста, найдите the image here для справки.CSS нужно применять всякий раз, когда мы видим, что загружено roadmap-page.

1 Ответ

0 голосов
/ 25 февраля 2019

Для этого можно использовать селектор брата CSS + .Если .footer находится на уровне .contact-us, то положение будет фиксированным.Вы можете написать приведенный ниже код CSS в своем обычном файле styles.css или styles.less 

.contact-us + .footer {
  position: fixed;

}

.home-page + .footer {
  position: relative;

}

Если вы хотите динамически установить класс для компонента нижнего колонтитула, лучше использовать декоратор @Input().То, что я хотел бы сделать, это

footer.component.ts

@Input() styleClass = 'footer';

footer.component.html

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

contacts.component.html

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

home.component.html

<app-footer>Footer text</div>

CSS

.footer-fixed { position: fixed } .footer { position: relative }

...