sass quick start

install

choco install sass  

tip:首先需要安装好chocolatey

preprocessing

sass input.scss output.css  

sass --watch input.scss output.css

sass --watch app/sass:public/stylesheets  // directory seperating by colon

basic usage

  • variables
$font18:18px;

.font{
  font-size:$font18;
}
// 字符串中用 #{}
$dir:bottom;
.border {
  border-#{$dir}:1px solid gray;
}
  • nesting
<div class="block">
  <div class="block_elemenet">this is a title
    <div class="block_element-modifier">modifier</div>
  </div>
</div>
.block {
  .block_element {
    .block_element--modifier {
    }
  }
}
  • Import
//  "_reset.scss"  

@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
  • mixins
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
  • @extend
.class1 {
}
.class2 {
  @extend .class1;
}
  • operators
// 可以使用运算符
.class {
  width: 600px / 960px * 100%;
}
  • functions

参考:

上一篇:[GEE Tips-2]自行打包Google Drive中的多个文件


下一篇:数据结构排序之快速排序(quick sort)