How to get html data-attribute value in css regular expressions


Tags: html,css,sass

Problem :

This is my Html. I gave data-views as 190.

<ul>
   <li class="lecture" data-views="190"></li>
</ul>

This is my CSS Code. I am trying to get data-attribute value dynamically. How can I get this value of data-views as width .

$aaa:attr(data-views);
ul li:before{
  content:$aaa;
}
[data-views='$aaa']{
font-size:40px;
}
ul li{
  width : $aaa;
}


Solution :

Your SCSS produces the following CSS:

ul li:before {
  content: attr(data-views);
}

[data-views='$aaa'] {
  font-size: 40px;
}

ul li {
  width: attr(data-views);
}

That is perfectly valid CSS, but has 2 problems:

  1. [data-views='$aaa'] is probably not what you wanted, [data-views] makes more sense. This will select (have effect on..) elements that have the data-views attribute.
  2. width: attr(data-views) is legal, but unsupported by any browser at the moment. Unfortunately, there's nothing you can do about it.

As SASS (like all other preprocessed CSS flavors) produces standard CSS, you can only do whatever CSS allows you to. You can't have the preprocessor "compute" CSS rules out of non existing (at compile time) markup.


    CSS Howto..

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    How to transform (move whole child dives) div to max width with css?

    How to hide text behind image

    How to make a different background for each link from a navbar? [closed]

    How to make width of a dynamic table not increase?

    How to explain CSS clear property? [duplicate]

    How to remove hover effect for some of the cells in angularjs

    How do you disable horizontal scrolling on a webpage?

    Howto get html popup inside svg at correct position (using javascript)

    Change how CSS border edges meet? [duplicate]

    How to use bootstrap grid system overlaying a map

    How to make TD behaving like TR(row) with CSS?

    How to access files from this hierarchy?

    Hiding and showing elements with their respective styles in Javascript

    How to make groups of divs the same width using only CSS?

    How do I correct overlapping spacing error in CSS when it wraps text?

    How to create a progress bar animation

    How to make recessed button in CSS

    How to slide up / slide down an element with Zepto on mobile devices?

    How to disable the Dropdown?

    HTML Tables - how can I make all cells other than the last always be wide enough?

    How to get an outline border on a colgroup?

    How to properly use CSS in GWTP?

    How can I put a graphic marker next to an item using pure CSS?

    How to create stretch height block with CSS

    How to keep Fixed position navigation static positioned when resizing window

    How to flip background image using CSS?

    How do I add a “popup” shadow to an HTML element

    How to reduce space between unordered list and its previous element(center)?

    Text Underline Showing Underline