Sass编译输出的CSS格式可以自定义。有4种输出格式:

  • :nested - 嵌套格式
  • :expanded - 展开格式
  • :compact - 紧凑格式
  • :compressed - 压缩格式

默认格式是:nested

可以使用:style选项或使用style命令行参数设置输出格式。

:nested

在执行监测(编译)命令时,可以指定输出格式为nested

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

nested格式下,输出的CSS代码:

div {
padding: 20px;
margin: 20px; } .one {
background: red; } .two {
background: yellow; } .three {
background: #ff8000; } .four {
background: #ffa600; } .five {
background: #ff5900; }

nested是默认格式,可以不指定。

:expanded

展开格式看起来像开发人员手写的格式。

要将CSS输出设置为展开格式,可以使用如下命令:

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

该格式下,输出的CSS代码:

div {
padding: 20px;
margin: 20px;
} .one {
background: red;
} .two {
background: yellow;
} .three {
background: #ff8000;
} .four {
background: #ffa600;
} .five {
background: #ff5900;
}

:compact

紧凑格式占用的空间要小得多,每个CSS选择符定义只占用一行。

要将CSS输出设置为紧凑格式,可以使用如下命令:

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

该格式下,输出的CSS代码:

div { padding: 20px; margin: 20px; }

.one { background: red; }

.two { background: yellow; }

.three { background: #ff8000; }

.four { background: #ffa600; }

.five { background: #ff5900; }

:compressed

压缩格式占用尽可能少的空间,选择符定义不换行,文件最小,一般用于生产版本。

要将CSS输出设置为压缩格式,可以使用如下命令:

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

该格式下,输出的CSS代码:

div{padding:20px;margin:20px}.one{background:red}.two{background:yellow}.three{background:#ff8000}.four{background:#ffa600}.five{background:#ff5900}

SASS - 输出格式的更多相关文章

  1. SASS - 函数

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  2. SASS - 操作符

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  3. SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  4. SASS - 混合(Mixin)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  5. SASS - 语法

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  6. SASS - 使用Sass程序

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  7. SASS - 简介

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  8. SASS - 环境搭建

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  9. Gulp实战

    推荐文章: gulp.js中文网   :     http://www.gulpjs.com.cn/ DBPOO           :   http://www.dbpoo.com/getting- ...

随机推荐

  1. Django(十五)模板详解:模板标签、过滤器、模板注释、模板继承、html转义

    一.模板的基础配置及使用 [参考]https://docs.djangoproject.com/zh-hans/3.0/topics/templates/ 作为Web框架,Django提供了模板,用于 ...

  2. LINQ---查询语法和方法语法

    namespace ConsoleApplication45 { class Program { static void Main(string[] args) { , , , , , , }; va ...

  3. P1092 最好吃的月饼

    1092 最好吃的月饼 (20分)   月饼是久负盛名的中国传统糕点之一,自唐朝以来,已经发展出几百品种. 若想评比出一种“最好吃”的月饼,那势必在吃货界引发一场腥风血雨…… 在这里我们用数字说话,给 ...

  4. 最简单-转换MBR为GPT

    Windows Server 2016可能没有这个 mbr2gpt 这个软件,可以从Windows 10 的C:\Windows\System32 目录下面复制到 Windows Server 201 ...

  5. spring-boot-autoconfigure-xx.jar核心注解

  6. R 《回归分析与线性统计模型》page119,4.2

    rm(list = ls()) library(openxlsx) library(MASS) data = read.xlsx("xiti_4.xlsx",sheet = 2) ...

  7. Java笔记--网络编程

    1.IP地址:InetAddress类 --唯一的标识Internet上的计算机 --本地回环地址(hostAddress)127.0.0.1 主机名(hostName):localhost //根据 ...

  8. php笔记04

    PHP+MySQL 连接数据库 mysqli <?php $servername="localhost"; $username="root"; $pass ...

  9. centos7安装google-chrome和chromedriver

    1.root用户下进入到etc/yum.repos.d目录下  [root@f7d6b9f2-1291-4d2f-8805-aef94deac9f7 yum.repos.d]# pwd  /etc/y ...

  10. 指令——df

    df是disk free 的简称,这个指令的功能和作用是查看磁盘空间. 可以加上 -h 的选项,来提高可读性. [he@localhost ~]$ df -h文件系统(磁盘名称)      总容量  ...