美文网首页
SASS把scss转化为css的四种转化方式与命令

SASS把scss转化为css的四种转化方式与命令

作者: Oo晨晨oO | 来源:发表于2017-09-19 15:03 被阅读179次

    在终端输入命令:
    $ sass --watch scss:css --style expanded
    即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expanded转化方式.

    一共有四种转化方式##

    未转化的代码

    //未编译样式
    .box {
      width: 300px;
      height: 400px;
      &-title {
        height: 30px;
        line-height: 30px;
      }
    }
    

    1.nested 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style nested
    
    /*编译过后样式*/
    .box {
      width: 300px;
      height: 400px; }
      .box-title {
        height: 30px;
        line-height: 30px; }
    

    2.expanded 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style expanded
    
    /*编译过后样式*/
    .box {
      width: 300px;
      height: 400px;
    }
    .box-title {
      height: 30px;
      line-height: 30px;
    }
    

    3.compact 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style compact
    
    /*编译过后样式*/
    .box { width: 300px; height: 400px; }
    .box-title { height: 30px; line-height: 30px; }
    

    4.compressed 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style compressed
    
    /*编译过后样式*/
    .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
    

    相关文章

      网友评论

          本文标题:SASS把scss转化为css的四种转化方式与命令

          本文链接:https://www.haomeiwen.com/subject/nzwwsxtx.html