{"id":1926,"date":"2017-03-13T15:27:56","date_gmt":"2017-03-13T15:27:56","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1926"},"modified":"2018-10-10T17:15:57","modified_gmt":"2018-10-10T17:15:57","slug":"using-sass-maps-e-g-to-get-colors-for-custom-components","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1926","title":{"rendered":"Using Sass Maps e.g. to get colors for custom components"},"content":{"rendered":"<p>This is described in the theming docs <a href=\"http:\/\/ionicframework.com\/docs\/v2\/theming\/theming-your-app\/\">here<\/a>.<\/p>\n<p>The above mentions using the color function to apply a color to an element.<\/p>\n<p>The $colors defines a sass map of the color variants for Ionic. You can use the sass map-get() function to get colors from the map, as posted <a href=\"https:\/\/forum.ionicframework.com\/t\/how-to-use-variable-scss-color-in-scss-file\/68813\/2\">here<\/a>:-<\/p>\n<blockquote>\n<pre><span style=\"font-family: 'Lucida Console'; font-size: small;\">ion-menu ion-item span {       \r\n color: map-get($colors, primary);\r\n}<\/span><\/pre>\n<\/blockquote>\n<p>However the correct way uses the color function as per the above theming docs and the comment in the above post:-<\/p>\n<blockquote>\n<pre><span style=\"font-family: 'Lucida Console'; font-size: small;\">ion-menu ion-item span {\r\n  color: color($colors, primary, base);\r\n}<\/span><\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>This is described in the theming docs here. The above mentions using the color function to apply a color to an element. The $colors defines a sass map of the color variants for Ionic. You can use the sass map-get() function to get colors from the map, as posted here:- ion-menu ion-item span { color: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[200],"tags":[16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1926"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1926"}],"version-history":[{"count":6,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1926\/revisions"}],"predecessor-version":[{"id":2173,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1926\/revisions\/2173"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}