Sass注释及嵌套规则随笔（一）

概述

虽然一直忙于工作的项目开发，但是对自身前端的知识体系也要不断的进行梳理总结，才能得到技术能力的提升。

Sass注释

注释出现让我们的源代码更加易懂，提高可读性。

Sass中包括基本包括两种注释语句：

• 单行注释语句

// 这是单行注释语法，不会输入到css文件中。

单行注释只保留在sass文件中，不会输入到生成的css文件中。

• 多行注释语句

/* 这是多行注释语法，编译输入到css文件中。 */

多行注释会输入到生成的css文件中。（与css注释语法相同）

• 重要注释

/* ! 多行重要注释，多行注释的扩展形式。 */

在多行注释的基础上首行字符为 ! 标注为重要注释语句。

总结
项目开发过程中，单行注释主要应用到自定义变量、自定义函数、@mixin等sass语法，多行注释主要应用与样式嵌套规则等。

Sass嵌套

Sass能够高效管理css样式文件，Sass提供一套灵活的嵌套规则。

• 选择器嵌套
  直接贴代码，例如：
  源码

.frame {
  a {
    color: #888;
  }

  a:hover {
    color: #000;
  }

  .frame-head {
    color: #aaa;
  }
}

编译生成为：

.frame a {
  color: #888;
}
.frame a:hover {
  color: #000;
}
.frame .frame-head {
  color: #aaa;
}

简化父选择器 &
将上面的例子采用 “&” 字符简化父选择器编写代码，如下:
源码

.frame {
  a {
    color: #888;
    &:hover {
      color: #000;
    }
  }

 &-head {
    color: #aaa;
  }
}

总结
选择器嵌套规则，将样式规则按布局模块进行划分和封装（将顶级父选择器设想为布局模块样式的命名空间，所嵌套的所有样式规则与布局模块一一对应），简化并提高样式的可读性。

• 属性嵌套
  直接贴代码， 例如：
  源码

.frame {
  font: {
    size: 40px;
    weight:  bold;
  }
  // 属性嵌套也可以包含默认值
  background: #f00 {
    repeat: repeat-x;
    position: left center; 
  }
}

编译生成为：

.frame {
  font-size: 40px;
  font-weight: bold;
  background: #f00;
  background-repeat: repeat-x;
  background-position: left center;
}

总结
目前没有发现属性嵌套一些优越性，在项目开发过程中，应用的比较少。如果优势可能会简化一些，但劣势是会影响嵌套的可读性，感觉劣势大于优势。

有一些经验总结，仅代表鄙人个人观点，如哪位大神有疑惑可以留言一起讨论。