oktatas:web:angular:angular_scss
Tartalomjegyzék
Angular Scss
- Szerző: Sallai András
- Copyright © Sallai András, 2022
- Web: https://szit.hu
Bootstrap
- style.scss
@import "~bootstrap/scss/bootstrap";
Színek átírása
- style.scss
/* 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.
- src/app/app.component.html
<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
- style.scss
/* 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:
- src/app/app.componenet.scss
@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.
- style.scss
/* 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:
- src/app/app.component.html
<h1 class="bg-sectitle">Valami</h1>
oktatas/web/angular/angular_scss.txt · Utolsó módosítás: 2022/11/04 08:09 szerkesztette: admin