sass语法嵌套规则与注释讲解

语法嵌套规则

选择器嵌套

例如有这么一段css，正常CSS的写法

创新互联公司成都网站建设按需定制，是成都网站建设公司,为玻璃钢坐凳提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站推广热线：028-86922220

.container{width:1200px; margin: 0 auto;}
.container .header{height: 90px; line-height: 90px;}
.container .header .log{width:100px; height:60px;}
.container .center{height: 600px; background-color: #F00;}
.container .footer{font-size: 16px;text-align: center;}

改成写SASS的方法

.container{
  width: 1200px;
  margin: 0 auto;
  .header{
    height: 90px; line-height: 90px;
    .log{
      width:100px; height:60px;
    }
  }
  .center{
    height: 600px; background-color: #F00;
  }
  .footer{
    font-size: 16px;text-align: center;
  }
}

最终生成的格式：

避免了重复输入父选择器，复杂的 CSS 结构更易于管理

父选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

例如有这么一段样式：

.container{width: 1200px;margin: 0 auto;}
.container a{color: #333;}
.container a:hover{text-decoration: underline;color: #F00;}
.container .top{border:1px #f2f2f2 solid;}
.container .top-left{float: left; width: 200px;}

用sass编写

.container{
  width: 1200px;
  margin: 0 auto;
  a{
    color: #333;
    &:hover{
      text-decoration: underline;color: #F00;
    }
  }
  .top{
    border:1px #f2f2f2 solid; 
    &-left{
      float: left; width: 200px;
    }
  }
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

例如：

.container a{color: #333;font-size: 14px;font-family:sans-serif;font-weight: bold;}

用SASS的方式写

.container{
  a{
    color: #333;
    font: {
      size: 14px;
      family:sans-serif;
      weight:bold;
    }
  }
}

注意font：后面要加一个空格

sass注释

Sass支持两种注释

标准的css多行注释 /* ... */ 会编译到.css文件中
单行注释 // 不会编译到.css文件

例如：

$version : "1.0.0";
/* 
  首页相关css
  version：#{$version}
*/
.container{
  width: 1200px;
  .swiper{
    // 网站幻灯片相关css
    width: 100%;
    height: 260px;
    .dot{
      /* 
        幻灯片指示点
        默认白色
        选中时蓝色
      */
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #FFF;
      &.active{
        background-color: blue;
      }
    }
  }
}

编译后：

@charset "UTF-8";
/* 首页相关css version：1.0.0 */
.container { width: 1200px; }

.container .swiper { width: 100%; height: 260px; }

.container .swiper .dot { /* 幻灯片指示点 默认白色 选中时蓝色 */ width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; }

.container .swiper .dot.active { background-color: blue; }
/*# sourceMappingURL=index.css.map */