从 Sass 到 Css答案

【问题标题】：From Sass into Css从 Sass 到 Css
【发布时间】：2017-05-14 08:01:04
【问题描述】：

谁能帮我把这个 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');
});
  });

【问题讨论】：

解决了问题

标签： javascript jquery css sass

【解决方案1】：

给你，你可以使用这个网站来帮助你转换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;
}

【讨论】：

【解决方案2】：

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

【讨论】：