Sass Mixin multiple properties in a loop
I'm lost and not sure why this compiles but doesn't output anything. Also not even sure if I'm approaching this correctly. I started using a mixin within a loop to define a bunch of colors. This works great, except that depending on the place I may need to pass the colors to the color, border-color, or background-color properties. Also, I may need to pass the same color to one of those properties in a :hover state. This compiles, yet doesn't actually output anything if called.
// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;
$categories: () !default;
$categories: map-merge((
"red": $category-1,
"blue": $category-2,
"black": $category-3,
"green": $category-4,
"yellow": $category-5,
"pink": $category-6,
"gray": $category-7,
"orange": $category-8,
"brown": $category-9,
), $categories);
// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
#{$parent} {
@each $prop in $props {
$prop:$color;
}
@if ($hovers) {
&:hover {
@each $hover in $hovers {
$hover:$color;
}
}
} @else {}
}
}
// Testing
@each $color, $value in $categories {
@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}Ignore the oddities with the colors please and that they aren't actually the colors that they are labeled.
sass
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
add a comment |
I'm lost and not sure why this compiles but doesn't output anything. Also not even sure if I'm approaching this correctly. I started using a mixin within a loop to define a bunch of colors. This works great, except that depending on the place I may need to pass the colors to the color, border-color, or background-color properties. Also, I may need to pass the same color to one of those properties in a :hover state. This compiles, yet doesn't actually output anything if called.
// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;
$categories: () !default;
$categories: map-merge((
"red": $category-1,
"blue": $category-2,
"black": $category-3,
"green": $category-4,
"yellow": $category-5,
"pink": $category-6,
"gray": $category-7,
"orange": $category-8,
"brown": $category-9,
), $categories);
// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
#{$parent} {
@each $prop in $props {
$prop:$color;
}
@if ($hovers) {
&:hover {
@each $hover in $hovers {
$hover:$color;
}
}
} @else {}
}
}
// Testing
@each $color, $value in $categories {
@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}Ignore the oddities with the colors please and that they aren't actually the colors that they are labeled.
sass
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
add a comment |
I'm lost and not sure why this compiles but doesn't output anything. Also not even sure if I'm approaching this correctly. I started using a mixin within a loop to define a bunch of colors. This works great, except that depending on the place I may need to pass the colors to the color, border-color, or background-color properties. Also, I may need to pass the same color to one of those properties in a :hover state. This compiles, yet doesn't actually output anything if called.
// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;
$categories: () !default;
$categories: map-merge((
"red": $category-1,
"blue": $category-2,
"black": $category-3,
"green": $category-4,
"yellow": $category-5,
"pink": $category-6,
"gray": $category-7,
"orange": $category-8,
"brown": $category-9,
), $categories);
// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
#{$parent} {
@each $prop in $props {
$prop:$color;
}
@if ($hovers) {
&:hover {
@each $hover in $hovers {
$hover:$color;
}
}
} @else {}
}
}
// Testing
@each $color, $value in $categories {
@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}Ignore the oddities with the colors please and that they aren't actually the colors that they are labeled.
sass
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
I'm lost and not sure why this compiles but doesn't output anything. Also not even sure if I'm approaching this correctly. I started using a mixin within a loop to define a bunch of colors. This works great, except that depending on the place I may need to pass the colors to the color, border-color, or background-color properties. Also, I may need to pass the same color to one of those properties in a :hover state. This compiles, yet doesn't actually output anything if called.
// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;
$categories: () !default;
$categories: map-merge((
"red": $category-1,
"blue": $category-2,
"black": $category-3,
"green": $category-4,
"yellow": $category-5,
"pink": $category-6,
"gray": $category-7,
"orange": $category-8,
"brown": $category-9,
), $categories);
// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
#{$parent} {
@each $prop in $props {
$prop:$color;
}
@if ($hovers) {
&:hover {
@each $hover in $hovers {
$hover:$color;
}
}
} @else {}
}
}
// Testing
@each $color, $value in $categories {
@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}Ignore the oddities with the colors please and that they aren't actually the colors that they are labeled.
// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;
$categories: () !default;
$categories: map-merge((
"red": $category-1,
"blue": $category-2,
"black": $category-3,
"green": $category-4,
"yellow": $category-5,
"pink": $category-6,
"gray": $category-7,
"orange": $category-8,
"brown": $category-9,
), $categories);
// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
#{$parent} {
@each $prop in $props {
$prop:$color;
}
@if ($hovers) {
&:hover {
@each $hover in $hovers {
$hover:$color;
}
}
} @else {}
}
}
// Testing
@each $color, $value in $categories {
@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;
$categories: () !default;
$categories: map-merge((
"red": $category-1,
"blue": $category-2,
"black": $category-3,
"green": $category-4,
"yellow": $category-5,
"pink": $category-6,
"gray": $category-7,
"orange": $category-8,
"brown": $category-9,
), $categories);
// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
#{$parent} {
@each $prop in $props {
$prop:$color;
}
@if ($hovers) {
&:hover {
@each $hover in $hovers {
$hover:$color;
}
}
} @else {}
}
}
// Testing
@each $color, $value in $categories {
@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}sass
sass
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
asked Nov 15 '18 at 14:55
Tom SavageTom Savage
715
715
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Figured it out, needed to change my statements being used for property names to this format:
{$prop}, and #{$hover}.
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322154%2fsass-mixin-multiple-properties-in-a-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Figured it out, needed to change my statements being used for property names to this format:
{$prop}, and #{$hover}.
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
add a comment |
Figured it out, needed to change my statements being used for property names to this format:
{$prop}, and #{$hover}.
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
add a comment |
Figured it out, needed to change my statements being used for property names to this format:
{$prop}, and #{$hover}.
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
Figured it out, needed to change my statements being used for property names to this format:
{$prop}, and #{$hover}.
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
answered Nov 15 '18 at 15:16
Tom SavageTom Savage
715
715
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322154%2fsass-mixin-multiple-properties-in-a-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
