Sass环境搭建,详情见另一篇博文 安装Ruby、Sass与Compass

  我们都知道Sass其实有两种,一种是Sass,一种是SCSS。

  Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

  今天我要讲的SCSS编译方式是命令编译方式,在命令编译方式中有不同样式风格的输出方法。分别是

  1. 嵌套输出方式 nested
  2. 展开输出方式 expanded
  3. 紧凑输出方式 compact
  4. 压缩输出方式 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的四种编译方式的更多相关文章

  1. sass学习笔记 -- sass的四种编译方法

    sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...

  2. c++ --> c++中四种类型转换方式

    c++中四种类型转换方式   c风格转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少缺点, 1)它可以在任意类型之间转换,比如你可以把一个指向const对象的指针转换成指向 ...

  3. 【转】C++四种类型转换方式

    C++四种类型转换方式 https://blog.csdn.net/lv_amelia/article/details/79483579 C风格的强制类型转换(Type Case)很简单,不管什么类型 ...

  4. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  5. TypeScript的4种编译方式

    1.手动编译 1.1.首先找到TypeScript的安装目录,我的在"C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0".

  6. lua中for循环的四种遍历方式

    lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3   key,value pairs 取每一 ...

  7. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (一) —— 总览

    Android数据的四种存储方式SharedPreferences.SQLite.Content Provider和File (一) —— 总览   作为一个完成的应用程序,数据存储操作是必不可少的. ...

  8. HttpwebClient的四种请求方式

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.      本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...

  9. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (三) —— SharePreferences

    除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data ...

随机推荐

  1. ElasticSearch 学习记录之父子结构的查询

    父子结构 父亲type属性查询子type 的类型 父子结构的查询,可以通过父亲类型的字段,查询出子类型的索引信息 POST /product/_search { "query": ...

  2. git pull与git fetch的区别

    git pull: 取回远程主机某个分支的更新,再与本地的指定分支合并. 用法: git pull <远程仓库> <远程分支名>:<本地分支名> // 如 git ...

  3. find 命令的误差估值与单位调整

    一.命令简介 find 命令的 -size 参数 单位b(不是byte而是block).c.w.k.M.G.默认是单位b ,也就是1block = 512byte = 0.5kb (文件系统ext4) ...

  4. Linux(CentOS6.5)下Nginx注册系统服务(启动、停止、重启、重载等)&设置开机自启

    本文地址http://comexchan.cnblogs.com/ ,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 完成了Nginx的编译安装后,仅仅是能支持Nginx最基本的功能, ...

  5. [编织消息框架][JAVA核心技术]动态代理介绍

    由于java是种强类型静态语言,在执行时无法动态生成代码,静态语言基本都有这特性 动态生成代码有几种好处,也是弱类型语言的优点 1.部份逻辑可以实现热更新 2.远程调用实现非常适合 3.能动态生成扩展 ...

  6. 一起学Linux03之Linux系统目录结构

    我们用XShell登录Linux后,如果你是用root用户登录的,那么直接使用ls命令(List files 列出文件(信息). 注: Linux命令为了方便使用,都是简写.所以,每出现一个新的命令, ...

  7. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

  8. IIFF(立即执行函数表达式)

    立即执行函数表达式(Immediately-invoked function expression,IIFF) 在javascript(ES5)中,是没有块级作用域的概念的 for (var i = ...

  9. Android开发之漫漫长途 X——Android序列化

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  10. 北漂的IT人

    北京的互联网人,是工作日完全没有个人生活的一类人,也是整个北漂大队伍中,下班时间最晚的那一波人,如果赶上周末还要加班,那毫不夸张地说,你的整个人生都在互联网上奋斗着. 虽说十点上班让多少行内外的人羡慕 ...