-1

I wanna change bootstrap sass variables from the views and I have tried internal css and it doesn't work any ideas:

<% if current_user.admin == true%>
    <!-- Change sass variables-->
 <% else %>
    <!-- use default sass variables -->
 <% end %>
J.Foe
  • 43
  • 4
  • SASS gets compiled to pure CSS for production, you cannot change the variables in runtime. – Tamer Shlash Aug 13 '17 at 17:50
  • you cannot change sass variables on erb templates .. you can define different CSS classes to use in `if .. else` blocks – sa77 Aug 13 '17 at 17:58
  • @sa77 I'm sorry I'm a little new to this so can you explain a little more or give me some sort of reference links – J.Foe Aug 13 '17 at 18:00
  • @J.Foe couldn't find link with related content .. added an answer. give that a try ! – sa77 Aug 13 '17 at 18:16

1 Answers1

1

SASS variables cannot be changed on erb templates. One way to do it is by defining different CSS classes with the help of SASS mixins for each of these if .. else cases. For example:

SASS rules:

$default-color: #666;
$admin-color: #333;


@mixin common-style($color) {
  color: $color;
  padding: 10px;
  border: 1px solid black;
}

.default-div {
  @include common-style($default-color)
}

.admin-div {
  @include common-style($admin-color)
}

Then, on your view file:

<% if current_user.admin == true%>
    <!-- use admin CSS -->
    <div class='admin-div'>
    </div>
 <% else %>
    <!-- use default CSS rules -->
    <div class='default-div'>
    </div>
 <% end %>
sa77
  • 3,563
  • 3
  • 24
  • 37