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;
}
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:
[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.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.