addClass（）工作但它有一个css优先级问题

Question

所以我想在另一个类中添加class（），但这不能正常工作。

在scss我有：

body {
 main {
   section.theory {
    position: absolute;
    width: 100vw;
    height: calc(100vh - 100px);
    top: 100vh;
    background-color: $white;
    box-shadow: 0px -5px 5px #cfcfcf;
    overflow: hidden;
   }
 }

 .J-bigSection-visible {
   top: 100px;
 }      
}

在javascript中我有：

$('#theory-trigger').on('click', function(){
   $('section.theory').addClass('J-bigSection-visible');
});

当我看到页面源时，DOM会读取函数并添加类，但css不会被应用。它显示下划线，所以顶部：100vh停留。

如果我写.css（{＆＃39; top＆＃39;：＆＃39; 100px＆＃39;}）;在jQuery上它可以工作，但在这个项目中我想只留下css。 我究竟做错了什么？ ：/