Comments (12)
@cbleslie, made some progress with it. The unquote
function and a second map for counter ids were helpful. $counter-ids
can also be used in counter resets etc.
In _acm-sig.css
:
$counter-ids:
'section',
'subsection',
'subsubsection',
'subsubsection',
'subsubsubsection',
'subsubsubsubsection';
$counter-styles:
'decimal', //h1
'decimal', //h2
'decimal', //h3
'decimal', //h4
'decimal', //h5
'decimal'; //h6
And then in _counter.scss
:
@mixin generate-counter-content($i: 1, $s: '', $p: '') {
@if $i < 7 {
$parent: $p;
$counter: unquote(nth($counter-ids, $i));
$counter-style: unquote(nth($counter-styles, $i));
$string: $s counter($counter, $counter-style) $counter-header-separator;
$content: $counter-header-prefix $s counter($counter, $counter-style) $counter-header-suffix;
#{$parent} h#{$i}:not(.counter-skip)::before {
content: $content;
}
@include generate-counter-content($i + 1, $string, $parent);
}
}
Output:
h1:not(.counter-skip)::before {
content: "" "" counter(section, decimal) ""; }
h2:not(.counter-skip)::before {
content: "" "" counter(section, decimal) "." counter(subsection, decimal) ""; }
h3:not(.counter-skip)::before {
content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) ""; }
h4:not(.counter-skip)::before {
content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsection, decimal) ""; }
h5:not(.counter-skip)::before {
content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsubsection, decimal) ""; }
h6:not(.counter-skip)::before {
content: "" "" counter(section, decimal) "." counter(subsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsection, decimal) "." counter(subsubsubsection, decimal) "." counter(subsubsubsubsection, decimal) ""; }
from pubcss.
Hey @thomaspark, I am not sure if you have abandoned this project, but I have a preliminary version of PubCSS ported to SASS, at https://github.com/cbleslie/pubcss, It's in a good state as far as having gulp build and watch, but I need help with counters, as you do some tricky Less variable authoring in recursion. Sass doesn't handle fun stuff like variable concatenation so well, so it might be best to generate it using maps.
As of this moment:
- code is mostly ported
- build system is done in gulp, we just need to add autoprefixer... easy to do
- Bower is deprecated, but we can set it up so the css is digestible via NPM if needed.
from pubcss.
Hi @cbleslie, nice work on the sass port and build system! I'll dig in and see how counters could be done.
from pubcss.
Done in #10!
from pubcss.
great work everyone! 🎉
from pubcss.
Totally cool with moving to Sass. A build system would make things much more user-friendly, and Gulp would be my preference as well. Would be a great contribution! 👍
from pubcss.
@thomaspark , one way would be to just make an array and use nth($array, $i)
https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass
from pubcss.
@cbleslie, that looks like the way to go. In fact it should be cleaner than the old recursive approach.
Are you able to get .generate-counter-content
working with it? That's probably the most complex mixin to deal with.
from pubcss.
@thomaspark ,
I sort of got it working. My biggest concern with doing it myself is:
- I don't want to mess up the formatting. I am not entirely familiar with all the formats.
- I'm not super current on counters, and this mixin provides support for, I guess, the multi level counters.
It might take me a while. I can push what I have now. but it's pretty butchered, or at least, it's not perfect. I might be better off pushing what I have and letting you, if you're willing, taking a look at it.
from pubcss.
@thomaspark,
In my fork, on branch feature/counters
, you'll find my broken attempt. Full disclosure, it's bad.
https://github.com/cbleslie/pubcss/blob/feature/counters/src/tools/_counter.scss#L24
https://github.com/cbleslie/pubcss/blob/feature/counters/src/settings/_acm-sig.scss#L74
from pubcss.
@thomaspark I've implemented your fix, rendering wise, it looks good! But for some reason, the counters are not counting :(
from pubcss.
@cbleslie, using your nth() approach for generate-counter-increments()
and generate-counter-resets()
did the trick:
@mixin generate-counter-increments($i: 1) {
@if $i < 7 {
h#{$i}:not(.counter-skip) {
counter-increment: unquote(nth($counter-ids, $i));
}
@include generate-counter-increments($i + 1);
}
}
@mixin generate-counter-resets($i: 1) {
@if $i < 7 {
h#{$i}.counter-reset {
counter-increment: unquote(nth($counter-ids, $i));
}
@include generate-counter-resets($i + 1);
}
}
from pubcss.
Related Issues (18)
- ref is not HTML HOT 5
- MathJax CDN will soon be shut down. HOT 1
- Use puppeteer for generating the PDF's? HOT 5
- Print Authors Multiple Pages HOT 6
- broken linkes HOT 2
- pubcss-ieee.css:166: warning: missing ':'
- Add Springer Publications format for Lecture Notes in Computer Science (LNCS)
- Suggestion: offer the css in github pages HOT 2
- href attribute in cite element is not valid HTML
- APA/AEA style support HOT 3
- Errors when trying to compile custom version. HOT 6
- footnote is not HTML
- Prince to(/vs) wkhtml
- Consider using explicit markup for each section to avoid numbering-related classes HOT 5
- Equations don't render in Chrome on Windows or Android HOT 4
- Author columns broken on Firefox HOT 1
- Floating box (footnote, citation) is trimmed by page limits HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pubcss.