sess文件编译输出css的四种方式以及使用

 sess文件输出css有下面四种方式:

 :nested(嵌套)
 :compact(紧凑)
 :expanded(展开)
 :compressed(压缩)

 如何使用:

 sass --watch style.scss:style.css --style compressed

 默认输出css方式是嵌套:也就是 nested(嵌套)

原始写在本地的sess样式文件,例如:
.widget-social { text-align: right; a, a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); } a:hover { color: #B00909; } }

  nested(嵌套)

.widget-social {
  text-align: right; }
  .widget-social a,
  .widget-social a:visited {
    padding: 0 3px;
    color: #222222;
    color: rgba(34, 34, 34, 0.77); }
  .widget-social a:hover {
    color: #B00909; }

  expanded(展开)

.widget-social {
  text-align: right;
}
.widget-social a,
.widget-social a:visited {
  padding: 0 3px;
  color: #222222;
  color: rgba(34, 34, 34, 0.77);
}
.widget-social a:hover {
  color: #B00909;
}

  compact(紧凑)

.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover { color: #B00909; }

  compressed(压缩)

.widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222;color:rgba(34,34,34,0.77)}.widget-social a:hover{color:#B00909}

  

posted on 2019-11-20 11:09  忘忧很努力呀~  阅读(537)  评论(0编辑  收藏  举报