SASS - 输出格式
2024-09-04 03:09:54
- 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}
最新文章
- GJM ：异步Socket [转载]
- Tomcat中JVM内存溢出及合理配置
- nginx 配置wordpress固定链接（自定义）
- jqurey click和blur执行时间冲突
- Nginx下Redmine2.6配置
- POJ 3659 Cell Phone Network (树dp)
- Test a ; vs Test a( ) ;
- swift把汉字转换为拼音，并且截取首字母做索引用
- day7_python学习笔记_chapter9_文件
- 易Android登录Demo
- 利用JS做网页特效——大图轮播
- Linux安装nginx代理服务器
- Flex实现双轴条状图
- POJ2960 S-Nim 【博弈论】
- 如何不使用loop循环创建连续的数组
- Java 定时任务的几种实现方式
- python运算符,数据类型,数据类型操作,三目运算,深浅拷贝
- js-语言精粹-函数记忆
- How to update jQuery Mobile in Dreamweaver CS6
- ubuntu 安装 sublime