SASS
Maps represent an association between keys and values, where keys are used to look up values. They make it easy to collect values into named groups and access those groups dynamically. They have no direct parallel in CSS, although they're syntactically similar to media query expressions.
| // Simple map | |
| $static-assets:( | |
| payment-icon: "//cdn.neto.com.au/assets/neto-cdn/skeletal/3.1.0/paymenticons.svg" | |
| ); | |
| .payment-icon { | |
| background-image: url(map-get($static-assets, payment-icon)); | |
| } | |
| /* | |
| .payment-icon { | |
| background-image: "//cdn.neto.com.au/assets/neto-cdn/skeletal/3.1.0/paymenticons.svg"; | |
| } | |
| */ | |
| // Loop throught maps | |
| $social-icons:( | |
| facebook: #3b5998, | |
| twitter: #00acee, | |
| google-plus: #dd4b39, | |
| youtube: #c4302b, | |
| instagram: #3f729b, | |
| pinterest: #c8232c, | |
| tumblr: #34526f, | |
| linkedin: #0e76a8, | |
| ); | |
| // Social icons colours | |
| .text{ | |
| @each $name, $colour in $social-icons { | |
| &-#{$name} { | |
| color: $colour; | |
| } | |
| } | |
| } | |
| /* | |
| .text-facebook{ | |
| color: #3b5998; | |
| } | |
| */ | |
| // Multiple value maps | |
| $payment-icon:( | |
| paypal: (16px, 0 0, 8px), | |
| bpay: (18px, 0 -17px, 6px), | |
| moneyorder: (22px, 0 -35px, 3px), | |
| cheque: (13px, 0 -58px, 8px), | |
| directdeposit: (38px, 0 -72px, -4px), | |
| americanexpress: (21px, 0 -110px, 5px), | |
| mastercard: (36px, 0 -132px, -3px), | |
| visa: (18px, 0 -168px, 6px), | |
| diners: (17px, 0 -197px, 7px), | |
| discover: (10px, 0 -187px, 10px), | |
| afterpay: (13px, 0 -213px, 10px), | |
| q-card: (35px, 0 -244px, 0px), | |
| paymark: (18px, 0 -226px, 7px), | |
| zipmoney: (30px, 0 30px, 2px), | |
| zippay: (18px, 0 49px, 7px) | |
| ); | |
| .payment-icon { | |
| @each $name, $styles in $payment-icon { | |
| $height: nth($styles, 1); | |
| $background-position: nth($styles, 2); | |
| $margin-top: nth($styles, 3); | |
| &-#{$name} { | |
| height: $height; | |
| background-position: $background-position; | |
| margin-top: $margin-top; | |
| } | |
| } | |
| } | |
| /* | |
| .payment-icon-paypal{ | |
| height:16px; | |
| background-position:0 0; | |
| margin-top:8px; | |
| } | |
| */ |
