SASS - 输出格式
- SASS – 简介
- SASS – 环境搭建
- SASS – 使用Sass程序
- SASS – 语法
- SASS – 变量
- SASS- 局部文件(Partial)
- SASS – 混合(Mixin)
- SASS – @extend(继承)指令
- SASS – 操作符
- SASS – 函数
- SASS – 输出格式
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 - 输出格式的更多相关文章
- SASS - 函数
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 操作符
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - @extend(继承)指令
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 混合(Mixin)
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 语法
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 使用Sass程序
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 简介
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 环境搭建
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- Gulp实战
推荐文章: gulp.js中文网 : http://www.gulpjs.com.cn/ DBPOO : http://www.dbpoo.com/getting- ...
随机推荐
- Django(十五)模板详解:模板标签、过滤器、模板注释、模板继承、html转义
一.模板的基础配置及使用 [参考]https://docs.djangoproject.com/zh-hans/3.0/topics/templates/ 作为Web框架,Django提供了模板,用于 ...
- LINQ---查询语法和方法语法
namespace ConsoleApplication45 { class Program { static void Main(string[] args) { , , , , , , }; va ...
- P1092 最好吃的月饼
1092 最好吃的月饼 (20分) 月饼是久负盛名的中国传统糕点之一,自唐朝以来,已经发展出几百品种. 若想评比出一种“最好吃”的月饼,那势必在吃货界引发一场腥风血雨…… 在这里我们用数字说话,给 ...
- 最简单-转换MBR为GPT
Windows Server 2016可能没有这个 mbr2gpt 这个软件,可以从Windows 10 的C:\Windows\System32 目录下面复制到 Windows Server 201 ...
- spring-boot-autoconfigure-xx.jar核心注解
- R 《回归分析与线性统计模型》page119,4.2
rm(list = ls()) library(openxlsx) library(MASS) data = read.xlsx("xiti_4.xlsx",sheet = 2) ...
- Java笔记--网络编程
1.IP地址:InetAddress类 --唯一的标识Internet上的计算机 --本地回环地址(hostAddress)127.0.0.1 主机名(hostName):localhost //根据 ...
- php笔记04
PHP+MySQL 连接数据库 mysqli <?php $servername="localhost"; $username="root"; $pass ...
- centos7安装google-chrome和chromedriver
1.root用户下进入到etc/yum.repos.d目录下 [root@f7d6b9f2-1291-4d2f-8805-aef94deac9f7 yum.repos.d]# pwd /etc/y ...
- 指令——df
df是disk free 的简称,这个指令的功能和作用是查看磁盘空间. 可以加上 -h 的选项,来提高可读性. [he@localhost ~]$ df -h文件系统(磁盘名称) 总容量 ...