從Sass到Css

Question

有人可以幫助我將這個sass代碼轉換爲清晰的css，當然還需要動畫才能繼續工作，我想在這裏需要多一些js代碼，之前感謝。 https://codepen.io/anon/pen/ENqppw

<div class="search"> 
<span class="search_icon"></span> 
</div> 


.search { 
    width:100px; 
    height:100px; 
    background: #3a3a3a; 
    transition: all 0.4s ease; 
    margin:50px; 
    position:absolute; 
&.open { 
    width: 90%; 
    } 
} 
.search_icon { 
    width: 34px; 
    height: 34px; 
    border-radius: 40px; 
    border: 3px solid red; 
    display: block; 
    position: relative; 
    margin:22px; 
    transition: all .3s ease; 
    &:before { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -2px; 
    top: 30px; 
    display: block; 
    background-color: red; 
    transform: rotate(-45deg); 
    transition: all .3s ease; 
    } 
    &:after { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -12px; 
    top: 40px; 
    display: block; 
    background-color: red; 
    transform: rotate(-45deg); 
    transition: all .3s ease; 
    } 
    .open & { 
    width: 50px; 
    height: 50px; 
    border-radius: 60px; 
    margin-left:95%; 
    &:before { 
     transform: rotate(45deg); 
     right: 23px; 
     top: 12px; 
     height: 29px; 
    } 
    &:after { 
     transform: rotate(-45deg); 
     right: 23px; 
     top: 12px; 
     height: 29px; 
    } 

    } 
} 

$(function() { 
$('.search_icon').on('click', function() { 
    $('.search').toggleClass('open clicked'); 
}); 
    }); 

Answer 1

.search { 
    width: 100px; 
    height: 100px; 
    background: #3a3a3a; 
    transition: all 0.4s ease; 
    margin: 50px; 
    position: absolute; 
} 

.search.open { 
    width: 90%; 
} 

.search_icon { 
    width: 34px; 
    height: 34px; 
    border-radius: 40px; 
    border: 3px solid red; 
    display: block; 
    position: relative; 
    margin: 22px; 
    transition: all .3s ease; 
} 

.search_icon:before { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -2px; 
    top: 30px; 
    display: block; 
    background-color: red; 
    transform: rotate(-45deg); 
    transition: all .3s ease; 
} 

.search_icon:after { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -12px; 
    top: 40px; 
    display: block; 
    background-color: red; 
    transform: rotate(-45deg); 
    transition: all .3s ease; 
} 

.open .search_icon { 
    width: 50px; 
    height: 50px; 
    border-radius: 60px; 
    margin-left: 95%; 
} 

.open .search_icon:before { 
    transform: rotate(45deg); 
    right: 23px; 
    top: 12px; 
    height: 29px; 
} 

.open .search_icon:after { 
    transform: rotate(-45deg); 
    right: 23px; 
    top: 12px; 
    height: 29px; 
} 

Answer 2

在這裏你去，你可以使用這個網站來幫助你轉換http://www.sassmeister.com/

.search { 
    width: 100px; 
    height: 100px; 
    background: #3a3a3a; 
    transition: all 0.4s ease; 
    margin: 50px; 
    position: absolute; 
} 
.search.open { 
    width: 90%; 
} 

.search_icon { 
    width: 34px; 
    height: 34px; 
    border-radius: 40px; 
    border: 3px solid red; 
    display: block; 
    position: relative; 
    margin: 22px; 
    transition: all .3s ease; 
} 
.search_icon:before { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -2px; 
    top: 30px; 
    display: block; 
    background-color: red; 
    transform: rotate(-45deg); 
    transition: all .3s ease; 
} 
.search_icon:after { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -12px; 
    top: 40px; 
    display: block; 
    background-color: red; 
    transform: rotate(-45deg); 
    transition: all .3s ease; 
} 
.open .search_icon { 
    width: 50px; 
    height: 50px; 
    border-radius: 60px; 
    margin-left: 95%; 
} 
.open .search_icon:before { 
    transform: rotate(45deg); 
    right: 23px; 
    top: 12px; 
    height: 29px; 
} 
.open .search_icon:after { 
    transform: rotate(-45deg); 
    right: 23px; 
    top: 12px; 
    height: 29px; 
}