Question

我的应用程序中有几页需要将某些样式应用于页面。目前我已将相同的CSS添加到选择器类。

firstPage.scss

firstPage{
  ion-content.content{
     background-color: $bgcolor;
  }
}

nthPage.scss

nthPage{
  ion-content.content{
    background-color: $bgcolor;
  }
}

如果我不想在所有这些页面上使用相同的选择器，那么还是有角度或离子的任何其他方法，它允许我附加一个公共类属性和唯一选择器吗？可能来自@Component或@IonicPage方法？

Answer 1

您可以使用sass中的@extend。

您可以创建基本样式。

.basePage{
  background-color: $bgcolor;
}

然后将其扩展到您的网页。

nthPage{
  ion-content.content{
    @extend .basePage;
  }
}

请注意，您的基类应该对nthPage所在的sass文件可见。因此，您可能希望将基类放在base.scss中，然后将其导入nthPage.scss。

更多信息here。

Answer 2

我找到了完美的解决方案。

当我尝试这样的事情时，Angular没有将一个类附加到选择器。

@Component({
  selector: 'page-my-page.common-page',
  templateUrl: 'post-ad-contact.html'
})

但它以这种方式附加了一个属性。

@Component({
  selector: 'page-my-page[common-page]',
  templateUrl: 'post-ad-contact.html'
})

现在我可以将常用样式附加到common-page属性，而不必为每个页面定义或使用常见样式扩展每个页面。

[common-page]{
  background-color: $mybg;
  .common-class{
    border: red;
  }
  ...
}

Answer 3

您甚至可以寻求：

    @Component({
           selector: 'app-nthpage',
           templateUrl: './nthpage.page.html',
           styleUrls: ['./nthpage.page.scss', '../firstpage/firstpage.page.scss'],
    })

离子页面为少数选定页面添加公共类

3 个答案: