SCSS的用法

[bitfishxyz]

原来的SCSS文件

// variables
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// nesting
nav{
  color:antiquewhite;
  li{
    display: inline;
  }
}

// extend
%flex{
  display: flex;
  align-items: center;
}

.nav{
  @extend %flex;
}

// function
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { 
  @include transform(rotate(30deg));
}

// modules
@import "reset.scss";

// compute
$container_width : 200px;
.main{
  width: $container_width / 2;
}

编译后的CSS文件

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

nav {
  color: antiquewhite;
}
nav li {
  display: inline;
}

.nav {
  display: flex;
  align-items: center;
}

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

.main {
  width: 100px;
}

参考资料

https://github.com/fish-fontend/scss