< Angular

Angular Scss

Szerző: Sallai András

Copyright © Sallai András, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bootstrap

@import "~bootstrap/scss/bootstrap";

Színek átírása

/* You can add global styles to this file, and also import other style files */ $theme-colors: ( "primary": navy, "secondary": gold ); @import "~bootstrap/scss/bootstrap";

Az ng serve automatikusan fordít mentéskor.

<h1 class="bg-secondary">Valami</h1>

Színválasztó

A böngészőben, google keresőbe:

color picker

A bootstrap egyéb színei

/* You can add global styles to this file, and also import other style files */ @import "~bootstrap/scss/bootstrap"; h2 { background-color: $yellow-100; }

A sorrend fontos.

Komponensben

Itt meg kell ismételni az @import sort:

@import "~bootstrap/scss/bootstrap"; h2 { background-color: $indigo-300; }

Saját szemantikus színnév

A következő példában egy sectitle nevű színt határozok meg.

/* You can add global styles to this file, and also import other style files */ $theme-colors: ( "primary": navy, "sectitle": gold ); @import "~bootstrap/scss/bootstrap";

A szín felhasználása:

<h1 class="bg-sectitle">Valami</h1>