sass转css

<meta charset="utf-8">

<article class="_2rhmJa">

在终端输入命令:
$ 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}

</article>

链接:https://www.jianshu.com/p/218667ec881d

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规...
    Junting阅读 3,465评论 5 5
  • 2015年10月19日1.SASS和SCSS的区别1)文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而...
    a0d560da7818阅读 867评论 0 4
  • 1.背景介绍 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域),需要书写大量看似没有逻辑的代码,不...
    远望的云阅读 32,515评论 3 35
  • 一、ruby安装 sass基于Ruby语言开发而成,因此安装sass前需要安Ruby。ruby的下载地址:[htt...
    聽說_0100阅读 806评论 0 0
  • 命令行编译 //单文件转换命令sass input.scss output.css //单文件监听命令sass -...
    俗三疯阅读 346评论 0 0

友情链接更多精彩内容