Sass的四种编译方式
Sass环境搭建,详情见另一篇博文 安装Ruby、Sass与Compass
我们都知道Sass其实有两种,一种是Sass,一种是SCSS。
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
今天我要讲的SCSS编译方式是命令编译方式,在命令编译方式中有不同样式风格的输出方法。分别是
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
例如 style.scss文件的代码如下,现要通过以上四种方式来编译:
@charset "utf-8";
#box{
width:400px;
height:400px;
border:1px solid gray;
h1{
font-size:22px;
color:red;
}
p{
font-size:18px;
color:green;
}
}
(1)、nested(嵌套输出)方式:
现在要将其编译成style.css文件。
命令为: sass style.scss:style1.css --style nested
编译后代码如下:
#box {
width: 400px;
height: 400px;
border: 1px solid gray; }
#box h1 {
font-size: 22px;
color: red; }
#box p {
font-size: 18px;
color: green; }
可以看到代码行间还是有一定的缩进的。
(2)、expanded(展开输出)方式
同样是style.scss文件将其编译为style1.css文件。
命令为: sass style.scss:style1.css --style expanded
编译后代码为:
#box {
width: 400px;
height: 400px;
border: 1px solid gray;
}
#box h1 {
font-size: 22px;
color: red;
}
#box p {
font-size: 18px;
color: green;
}
可以看出编译后和css的书写规则是一样的。
(3)、compact(紧凑输出)方式。
将style.scss文件编译成style2.css文件。
命令为: sass style.scss:style2.css --style compact
编译后结果为:
#box { width: 400px; height: 400px; border: 1px solid gray; }
#box h1 { font-size: 22px; color: red; }
#box p { font-size: 18px; color: green; }
(4)、compressed(压缩输出)方式。
将style.scss文件编译成style3.css文件。
命令为: sass style.scss:style3.css --style compressed
编译后结果为:
#box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}
Sass的四种编译方式的更多相关文章
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- c++ --> c++中四种类型转换方式
c++中四种类型转换方式 c风格转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少缺点, 1)它可以在任意类型之间转换,比如你可以把一个指向const对象的指针转换成指向 ...
- 【转】C++四种类型转换方式
C++四种类型转换方式 https://blog.csdn.net/lv_amelia/article/details/79483579 C风格的强制类型转换(Type Case)很简单,不管什么类型 ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- TypeScript的4种编译方式
1.手动编译 1.1.首先找到TypeScript的安装目录,我的在"C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0".
- lua中for循环的四种遍历方式
lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3 key,value pairs 取每一 ...
- Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (一) —— 总览
Android数据的四种存储方式SharedPreferences.SQLite.Content Provider和File (一) —— 总览 作为一个完成的应用程序,数据存储操作是必不可少的. ...
- HttpwebClient的四种请求方式
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷. 本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...
- Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (三) —— SharePreferences
除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data ...
随机推荐
- Redis分布式集群搭建
Redis集群架构图 上图蓝色为redis集群的节点. 节点之间通过ping命令来测试连接是否正常,节点之间没有主区分,连接到任何一个节点进行操作时,都可能会转发到其他节点. 1.Redis的容错机制 ...
- Oracle数据库中插入日期型数据(to_date的用法)(转载)
往Oracle数据库中插入日期型数据(to_date的用法) INSERT INTO FLOOR VALUES ( to_date ( '2007-12-20 18:31:34' , 'YYY ...
- /sbin/nologin 和 /bin/false 的区别
/bin/false是最严格的禁止login选项,一切服务都不能用,而/sbin/nologin只是不允许系统login,可以使用其他ftp等服务 如果想要用false在禁止login的同时允许ftp ...
- Disruptor并发框架 (二)核心概念场景分析
核心术语 RingBuffer(容器): 被看作Disruptor最主要的组件,然而从3.0开始RingBuffer仅仅负责存储和更新在Disruptor中流通的数据.对一些特殊的使用场景能够被用户( ...
- window.location.hash 使用说明
本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下. location是javascript里边管理地址 ...
- h5拖拽上传图片
h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...
- Xamarin.Android 引导页
http://blog.csdn.net/qq1326702940/article/details/78665588 https://www.cnblogs.com/catcher1994/p/555 ...
- day9集合以及这段时间的总结 未完待续
随笔: # 可变类型:# 列表(可以存放多个值,可以按索引取值,是有序的),# 字典(字典里面是KEY:VALUE类型,key必须是不可变类型,不能按索引取值 因为它们是无序的,按KEY取值),# 集 ...
- thinkphp5使用PHPExcel导入Excel数据
安装PHPExcel扩展类 地址:https://github.com/PHPOffice/PHPExcel ①通过composer安装 ②手动下载, 放在项目的extend目录下 代码中引入 由于P ...
- keepalived(nat)+ftp+http
一. 环境要求需要2台LVS和n(n>=2)台RS操作系统 负载均衡模式 VIP NVIPRHEL7.4 NAT 193.168.141.30 192.168.102.165 LVS1 LVS2 ...