-
Notifications
You must be signed in to change notification settings - Fork 40
Description
Hello Pirates!
I am really loving using Nucleus so far, but I just ran into a hiccup and wanted to formally request a feature: parsing documentation for dynamically generated objects.
My Use Case
I would prefer to define configuration for header levels in one variable and iterate over that variable to generate the elements, instead of defining them all individually. Given the following configuration map:
%text-header {
font-family: $header-font-stack;
}
/**
* Configuration for headers
*
* http://typecast.com/blog/a-more-modern-scale-for-web-typography
*
* @nuclide font-size-headers
* @section Config > Typography
*/
$headers: (
h1: (
font_size: 3em,
line_height: 1.05em
),
h2: (
font_size: 2.25em,
line_height: 1.25
),
h3: (
font_size: 1.75em,
line_height: 1.25em
),
h4: (
font_size: 1.125em,
line_height: 1.22222222em
)
);
I want to iterate over that map to generate all the elements I need, instead of doing each one individually:
@each $header, $config in $headers {
/**
* @atom #{$header}
* @section Typography > Headers
* @markup
* <#{$header}>This is an #{$header}</#{$header}>
*/
#{$header} {
@extend %text-header;
font-size: map-deep-get($config, "font_size");
line-height: map-deep-get($config, "line_height");
}
}This correctly generates the elements I want
/**
* Generic header styles
*
* @nuclide text-header
* @section Config > Typography
*/
h1, h2, h3, h4 {
font-family: "topgolf-header", sans-serif;
}
/**
* @atom h1
* @section Typography > Headers
* @markup
* <h1>This is an h1</h1>
*/
h1 {
font-size: 3em;
line-height: 1.05em;
}
/**
* @atom h2
* @section Typography > Headers
* @markup
* <h2>This is an h2</h2>
*/
h2 {
font-size: 2.25em;
line-height: 1.25;
}
/**
* @atom h3
* @section Typography > Headers
* @markup
* <h3>This is an h3</h3>
*/
h3 {
font-size: 1.75em;
line-height: 1.25em;
}
/**
* @atom h4
* @section Typography > Headers
* @markup
* <h4>This is an h4</h4>
*/
h4 {
font-size: 1.125em;
line-height: 1.22222em;
}The problem is, of course, that the .scss is parsed, not the final .css, and that prevents it from showing up in my styleguide.
Is there a way to make this work? Or am I going to have to fall back to the write-them-out-individually way?
Thank you for your help!