-1

Went though SASS/LESS documentation, but could not find anything that I am looking for. I am working on an AngularJS app, which has loads of dynamic, predefined styling (think CMS).

Is it possible with CSS3/LESS/SASS/Anything to create CSS rules dynamically from a element attribute - in the browser?

I know I could do in-line styling, but I am not really comfortable with it - there must be a better way!

From the following HTML

<div id="el" animation-time="3"></div>

Create following css:
#el { transition: 3s linear all; }

I have seen some examples on-line of the following usage, so my hopes are high:

#container {
   min-width: 600px;
   width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Iladarsda
  • 10,640
  • 39
  • 106
  • 170
  • 3
    So you're not comfortable with inline styles but you're perfectly fine with `font-size="32"`? – BoltClock Aug 27 '14 at 14:50
  • @BoltClock inline styling feels like I am back in 1995 ;) I completely understand the amount of code is the same, but I am planning to do some CSS animations etc.. so variable for LENGTH as an attribute would be perfect. – Iladarsda Aug 27 '14 at 14:55
  • -1 css shall style html. Use html to style css to style html is a bad idea. – Grim Aug 27 '14 at 14:56
  • 1
    @PeterRader - whether is best practice or not is complicity separate discussion ;) – Iladarsda Aug 27 '14 at 14:57
  • 1
    You seem to have mistaken inline style attributes for the `` tag. It's the latter that dates back to 1995. The former didn't appear until '96/'97, and hardly anybody used it until as recently as the early 2000s when CSS started becoming the in thing. Either way I don't buy your argument - if it feels so archaic, why are you trying to replicate it anyway? – BoltClock Aug 27 '14 at 14:58
  • @cimmanon Ohh sorry, I wasnt aware.. – Vishwanath Aug 27 '14 at 15:00
  • @BoltClock - font size might not have been a perfect example here, something to do with animation would better fit what I am planning to use it with. Putting best practice a side, is this even possible? – Iladarsda Aug 27 '14 at 15:01
  • @BoltClock - unless I go with inline css, I will have to create 100+ cases in my CSS (animations durations, animation directions, different animation styles etc..), which will never get used - feels wasteful. – Iladarsda Aug 27 '14 at 15:03
  • Your latest question update seems to resemble the `data-*` attributes to some extent. But even with them you cannot directly use them to manipulate CSS props. You would have to use JS and that to me seems like over-complicating things. – Harry Aug 27 '14 at 15:04
  • @Iladarsda If its not best-practice i will neither vote down or up. But if its misuse i respectfully vote it down. – Grim Aug 27 '14 at 15:04
  • 1
    I really have to question here as to why this is even necessary. How can only one specific instance require a single special style? Placing style information in your markup leads to a maintenance nightmare. Whether it's inline CSS, font tags, or something that looks like and smells like but isn't quite a font tag. – cimmanon Aug 27 '14 at 15:09

2 Answers2

1

You can create a list like this:

*[font-size="0pt"] {font-size:0pt}
*[font-size="1pt"] {font-size:1pt}
*[font-size="2pt"] {font-size:2pt} ...

Autor's note to comments:

  • +100 which will never get used - feels wasteful.
Grim
  • 1,938
  • 10
  • 56
  • 123
0

You must identify the HTMLNode. So this may work:

<div id="foobar" animation-time="3s"></div>

With 

 div#foobar{
   transition-duration: expression(foobar.getAttribute('animation-time'));
 }
Grim
  • 1,938
  • 10
  • 56
  • 123