基本语法

注释

SASS 中的注释一般有两种,//和/**/,例如:

// 不会出现在编译内容中的注释
/* 除压缩模式以外都出现的注释  */
.box {
  color: red;
}

其中/**/还有另外一种用法,通常在样式文件中显示版权信息

/*! 始终存在的注释，即使是压缩模式，通常用来撰写版权信息  */
/*! copyright by wangtunan */
.box {
  color: red;
}

嵌套

SASS 允许将一套CSS样式嵌套进入另外一套样式中,内层的样式将它外层的选择器作为父选择器,嵌套功能避免了重复输入父选择器,而且令复杂的css结构 更易于管理 ,例如:

.box {
  background-color: #fff;
  .item {
    background-color: #58a;
  }
  p,
  span {
    font-size: 16px;
  }
}

• 编译结果:

.box {
  background-color: #fff;
}
.box .item {
  background-color: #58a;
}
.box p,
.box span {
  font-size: 16px;
}

父选择器(&)

基于嵌套规则，在SASS中有一个比较重要的选择器就是父级选择器(&)，在SASS中，它使用&代表外层的父级选择器，这让在复杂场景下重复父级选择器成为可能，例如：添加伪类，实现BEM等等。

.box {
  &::after {
    content: "";
    display: inline-block;
    width: 100px;
    height: 3px;
  }
  &__item {
    background-color: #58a;
    &--title {
      font-size: 16px;
    }
  }
  &__row {
    background-color: #f60;
  }
}

• 编译结果

.box::after {
  content: "";
  display: inline-block;
  width: 100px;
  height: 3px;
}
.box__item {
  background-color: #58a;
}
.box__item--title {
  font-size: 16px;
}
.box__row {
  background-color: #f60;
}

占位符选择器(%)

当我们在撰写一些样式库的时候，有些样式我们并不关心具体的样式名，只关心样式的内容，此时可以通过占位符选择器(%)来实现。

占位符选择器的好处是:

• 在不通过@extend引用的时候不会编译到最终的css代码中。

• 不用强制外部用户遵循样式库的样式命名。

%zhanwei {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 不引用，占位符代码不编译
.title {
  font-size: 14px;
}

// 引用，占位符代码编译
.title {
  @extend %zhanwei;
  font-size: 14px;
}