码迷,mamicode.com
首页 > 其他好文 > 详细

sass quick start

时间:2019-07-01 00:31:33      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:guide   watch   round   clu   css   element   col   for   odi   

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 quick start

标签:guide   watch   round   clu   css   element   col   for   odi   

原文地址:https://www.cnblogs.com/rosendolu/p/11111786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!