Search code examples
htmlcsssasscompass-sass

How to put Javascript in Sass?


So I'm put this code in my Sass file

width: 100%;
height: auto;
overflow: hidden;
display: block;
display: -webkit-box;
height: $ font-size *$ line-height *$ lines-to-show;
font-size: $ font-size;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;

The code is limit how many lines should show,


But it's not working on Sass

I have no idea to fix this one

I search this kind of question, but I can't find it..


Solution

  • You need to change your variables ($sampleVariable) and remove the space after the $. Also you need to define those variables that you used at the top of your file for this to compile.

    Your sample code could be like this:

    // variable definition
    $font-size: 1em;
    $line-height: 1.3;
    $lines-to-show: 3;
    
    // rest of the code
    .selector {
       width: 100%;
       height: auto;
       overflow: hidden;
       display: block;
       display: -webkit-box;
       height: $font-size * $line-height * $lines-to-show; // no spaces between $ and variable name
       font-size: $ font-size;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       text-overflow: ellipsis;
    }