sass quick start

Posted 2022-03-03 rosendolu

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

参考：

• sass basics
• 阮一峰：sass用法指南