W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2017

Re: [csswg-drafts] [css-functions] enable the use of counter() inside calc()

From: Melanie Sumner via GitHub <sysbot+gh@w3.org>
Date: Sun, 26 Feb 2017 00:28:40 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-282523030-1488068918-sysbot+gh@w3.org>
Hi, ran into a case today where this would have helped, so posting a 
comment here. 

I'm setting up some CSS for an image/logo slider. While I know right 
now that there are 8 images, I don't know how many there will be in 
the future (nor do I wish to have to know).  I'm using only CSS to 
animate it, and it would be useful to be able to say "for each one of 
the items that exist (, increment this property by x." 
I ended up using sass to do something like this: 
```    
@for $i from 1 through 8 {  
    &:nth-of-type(#{$i}) {
        $delay: calc(5s * #{$i});
        animation: slideIn 45s linear $delay infinite;
    }
}

-- 
GitHub Notification of comment by MelSumner
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/1026#issuecomment-282523030
 using your GitHub account
Received on Sunday, 26 February 2017 00:28:48 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:29 UTC