sass sass的编译输出样式详解

本篇文章主要介绍了"sass sass的编译输出样式详解"，主要涉及到sass方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： Sass 的编译有多种方法：命令编译GUI工具编译自动化编译此处的讲解主要使用命令行编译方式４种输出样式：１．嵌套(:nested)sass --watch i...

Sass 的编译有多种方法：

• 命令编译
• GUI工具编译
• 自动化编译

此处的讲解主要使用命令行编译方式

４种输出样式：

１．嵌套(:nested)

sass --watch index.scss:index.css --style nested

@mixin size($width,$height){
    width: $width;
    height: $height;
}
$defuColor:#ccc;
.box{
   @include size(200px,300px);
    &:hover{
        background: $defuColor;
        border: 1px solid #f00;
    }
}

.box {
  width: 200px;
  height: 300px; }
  .box:hover {
    background: #ccc;
    border: 1px solid #f00; }

/*# sourceMappingURL=index.css.map */

 ２．展开(:expanded)

sass --watch index.scss:index.css --style expanded

@mixin size($width,$height){
    width: $width;
    height: $height;
}
$defuColor:#ccc;
.box{
   @include size(200px,300px);
    &:hover{
        background: $defuColor;
        border: 1px solid #f00;
    }
}

.box {
  width: 200px;
  height: 300px;
}
.box:hover {
  background: #ccc;
  border: 1px solid #f00;
}

/*# sourceMappingURL=index.css.map */

 ３．紧凑(:compact)

sass --watch index.scss:index.css --style compact

@mixin size($width,$height){
    width: $width;
    height: $height;
}
$defuColor:#ccc;
.box{
   @include size(200px,300px);
    &:hover{
        background: $defuColor;
        border: 1px solid #f00;
    }
}

.box { width: 200px; height: 300px; }
.box:hover { background: #ccc; border: 1px solid #f00; }

４．压缩(:compressed)

sass --watch index.scss:index.css --style expressed

@mixin size($width,$height){
    width: $width;
    height: $height;
}
$defuColor:#ccc;
.box{
   @include size(200px,300px);
    &:hover{
        background: $defuColor;
        border: 1px solid #f00;
    }
}

.box{width:200px;height:300px}.box:hover{background:#ccc;border:1px solid #f00}
/*# sourceMappingURL=index.css.map */

以上就介绍了sass sass的编译输出样式详解，包括了sass方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_3251953.html