sass 在线编译工具之初学

编译工具网址：http://sassmeister.com/

 

Sass是一门非常优秀的CSS预处语言,简化工作流程，易开发，维护！Sass同css非常相似，但是Sass中没有花括号（{}）跟分号（;）,Sass使用两个空格来定义嵌套的区别,需要安装ruby。

eg:

#skyscraper_ad
  display: block
  width: 120px
  height: 600px

 

1.变量（Variables）:用美元符号$来声明

eg:

$red: #ff4848

 

2.嵌套（Nesting）:选择器嵌套和属性嵌套

eg:

$font-size:12px;
.speak
  .name
    font:
      weight:bold
      size:$font-size+10px
  .position
    font:
      weight:normal
      size:$font-size

 

3.混合（Mixins）:混合可以让你定义一整块的Sass代码，甚至你可以给他们定义参数，更酷的是你还可以设置默认值。使用@maxin来定义混合，使用@include来调用混合。

eg:

@mixin border-radius($variable:5px)
  -webkit-border-radius:$variable
  -moz-border-radius:$variable
  border-radius:$variable
如何用？
h1
  @include border-radius(10px)
p
  @include horder-radius

 

4.选择器继承:选择继承另一个选择器的所有样式风格，使用@extend来继承

eg:

h1
  border:1px solid #ddd
  border-radius:4px
p
  @extend h1
  border-color:#f00