Vraag Variabelen gebruiken voor CSS-eigenschappen in Sass


Ik schrijf een @mixin met wat wiskunde erin die het percentage breedte van een element berekent, maar aangezien het erg handig is, zou ik dezelfde functie ook willen gebruiken voor andere eigenschappen, zoals marges en opvullingen.

Is er een manier om de eigenschapnaam door te geven als argument voor een mixin?

@mixin w_fluid($property_name, $w_element,$w_parent:16) {
    $property_name: percentage(($w_element/$w_parent));
}

21
2018-03-08 11:18


oorsprong


antwoorden:


Je moet gebruiken interpolatie (Bv. #{$var}) op uw variabele zodat Sass deze als een CSS-eigenschap behandelt. Zonder dit voer je alleen een variabele opdracht uit.

@mixin w_fluid($property_name, $w_element, $w_parent:16) {
    #{$property_name}: percentage(($w_element / $w_parent));
}

39
2018-03-08 11:26



In aanvulling op de reactie @rcorbellini

Je kunt string en variabele samen gebruiken

@mixin margin($direction) { // element spacing

    margin-#{$direction}: 10px;

}

7
2018-03-20 10:22