[[oktatas:web:angular|< Angular]]

====== Angular Scss ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bootstrap =====


<code scss style.scss>
@import "~bootstrap/scss/bootstrap";
</code>


===== Színek átírása =====

<code css 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";
</code>

Az ng serve automatikusan fordít mentéskor.


<code html src/app/app.component.html>
<h1 class="bg-secondary">Valami</h1>
</code>

===== Színválasztó =====

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


===== A bootstrap egyéb színei =====


<code css 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;
}

</code>

A sorrend fontos.


==== Komponensben ====

Itt meg kell ismételni az @import sort:

<code css src/app/app.componenet.scss>
@import "~bootstrap/scss/bootstrap";

h2 {
    background-color: $indigo-300;
}
</code>

===== Saját szemantikus színnév =====

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

<code css 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";
</code>


A szín felhasználása:

<code html src/app/app.component.html>
<h1 class="bg-sectitle">Valami</h1>
</code>