sass学习笔记(二):sass的不同样式风格的输出方法
sass的不同样式风格的输出方法
1、嵌套式nested
Sass 提供了一种嵌套显示 CSS 文件的方式。例如
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}
在编译的时候带上参数“ --style nested”:
sass --watch test.scss:test.css --style nested
编译出来的 CSS 样式风格:
nav ul {margin: 0;padding: 0;list-style: none; }
nav li {display: inline-block; }
nav a {display: block;padding: 6px 12px;text-decoration: none; }
2、嵌套输出方式 expanded
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}
在编译的时候带上参数“ --style expanded”:
sass --watch test.scss:test.css --style expanded
这个输出的 CSS 样式风格和 nested 类似,只是大括号在另起一行,同样上面的代码,编译出来:
nav ul {margin: 0;padding: 0;list-style: none;}nav li {display: inline-block;}nav a {display: block;padding: 6px 12px;text-decoration: none;}
3、紧凑输出方式 compact
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}
在编译的时候带上参数“ --style compact”:
sass --watch test.scss:test.css --style compact
编译后的代码如下:
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
4、压缩输出方式 compressed
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}
在编译的时候带上参数“ --style compressed”:
sass --watch test.scss:test.css --style compressed
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格:
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
一段时间之后,你实际上就不再需要写 CSS 代码了,只用写 Sass 代码。在这种情况下,你只需要设定输出格式为压缩格式,知道输出的 CSS 代码可以直接使用即可。
5、Sass 的调试
在 Sass3.3 版本之上
sass --watch style.scss:style.css
在命令终端,你将看到一个信息:
>>> Change detected to: style.scss
write style.css
write style.css.map
这时你就可以像下面展示的 gif 图一样,调试你的 Sass 代码。
转载于:https://blog.51cto.com/femydream/1847159
sass学习笔记(二):sass的不同样式风格的输出方法相关推荐
- Mr.J-- jQuery学习笔记(二十七)--DOM操作方法(删除获取文本)
清除 <body> <button>调用remove</button> <div>我是div<p>我是段落</p> </d ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- Mr.J-- jQuery学习笔记(二十一)--模拟微博页面
先看之前的节点操作方法:Mr.J-- jQuery学习笔记(二十)--节点操作方法 Mr.J-- jQuery学习笔记(五)--属性及属性节点 Mr.J-- jQuery学习笔记(十一)--事件委托 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- MATLAB学习笔记——二维和三维绘图
MATLAB学习笔记--二维和三维绘图 近期练习matlab的二维和三维绘图,整理一下,以防忘记. 文章目录 MATLAB学习笔记--二维和三维绘图 一.二维绘图 1.plot命令 2.fplot 命 ...
- Mongodb使用学习笔记(二)
文章目录 Mongodb使用学习笔记(二)之查询篇 1. MongoDB命令学习 (1) MongoDB 查询文档 1.1 全部查询 1.2 单条件查询 1.3 多条件查询 1.3.1 AND拼接多条 ...
- wxpython应用程序对象与顶级窗口_wxPython学习笔记(二)
如何创建和使用一个应用程序对象? 任何wxPython应用程序都需要一个应用程序对象.这个应用程序对象必须是类wx.App或其定制的子类的一个实例.应用程序对象的主要目的是管理幕后的主事件循环. 父类 ...
- qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
- [转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
最新文章
- 异常: java.security.InvalidKeyException: Illegal key size
- Java操作HDFS文件系统
- [Poi2011]Tree Rotations线段树合并
- 苦逼or高薪程序猿,你选谁?WEB前端这个行业普遍年薪20万+,吃鸡如开挂!
- Python语言编程规范与优化建议
- SAP License:药店ERP系统如何实施
- office2019 图目录_【设计图文】电磁阀体中心孔组合机床、机床总体工位布置和钻、扩、铰工位液压系统设计(有cad图)...
- 两个向量的夹角公式_平面向量夹角公式是怎么计算的 上下分别怎么算 细讲
- 基于mvc架构的劳务管理系统
- 云计算技术 - 基础环境搭建
- 【经典面试题】css如何画一个三角形?
- 不用写采集规则也可以轻松采集网站文章,揭秘一款明泽文章采集软件的工作原理
- MATLAB进行非线性拟合
- c语言已知加速度求位移速度,知道初速度知道加速度求位移的公式
- 解析微信开发之搜索歌曲
- 快速粘贴与自动填表软件V1.0 注册版
- 【离散数学】1. 数理逻辑
- jira 饼图中文乱码 显示“口口口”
- java药品销售系统,基于jsp的药品销售系统-JavaEE实现药品销售系统 - java项目源码...
- Linux基础中的基础 一