[S2L4] Preprocessing 2

Question 1

Was sind parametrische Mixins?

Answer 1

Less Mixing, welche Parameter und Argumente akzeptieren

Question 2

Wie sieht ein custom Mixin aus?

Answer 2

.custom-layout(@justify, @align){
	display: flex;
	justify-content: @justify;
	align-items: @align;
}
// usage
.custom-layout(flex-end, center);

Question 3

Was ist der unterschied zwischen Yarn und NPM?

Answer 3

• Ziemlich gleich zum installieren und managen von Versionen von Software
• Sind historisch gewachsen machen aber das gleiche

Question 4

Was macht eine Funktion in Less?

Answer 4

-Verändert einen CSS Wert gemäß der Funktion

Question 5

Wie sieht ein Beispiel für eine Funktion in Less aus?

Answer 5

//Darken macht die Farbe um 5% dunkler 
 &:hover {
	// The compiled color returned is #006667 
    background-color: darken(teal, 5%)

Question 6

Was sind Escapes in Less?

Answer 6

-Text der als Strings in Escape Variablen gespeichert wird.

Question 7

Wie sieht ein Escape in Less aus?

Answer 7

// Escaped values
@tablet: ~”(min-width: 500px)”;
@desktop: ~”(min-width: 800px)”;

h1 {
font-size: 2rem;
padding: 10px;

@media @tablet {
padding: 20px;
}

@media @desktop {
font-size: 1.8rem;
padding: 0 10px;

Question 8

Was sind imports in LESS?

Answer 8

-Das Importierten von anderen Less Dateien die man die die LESS Datei laden kann

Question 9

Wie organisiert man eine Less @imports am besten?

Answer 9

-// The cascade matters!

// Vars and Mixins
@import "variables";
@import "mixins";

// General Styles Here
@import "reset";
@import "general-styles";

// Components Here
@import "header";
@import "cta";
@import "main-content";
@import "contact";
@import "footer";

Question 10

Wie organisiert man eine Less @imports am besten?

Answer 10

-// The cascade matters!

// Vars and Mixins
@import "variables";
@import "mixins";

// General Styles Here
@import "reset";
@import "general-styles";

// Components Here
@import "header";
@import "cta";
@import "main-content";
@import "contact";
@import "footer";