Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_scss

< Angular

Angular Scss

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