Sass学习之路(4)——不同样式风格的输出方式
因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种。
比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧:
- nav {
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- li { display: inline-block; }
- a {
- display: block;
- padding: 6px 12px;
- text-decoration: none;
- }
- }
1.嵌套输出 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; }
2.展开输出 expanded:
- 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; }
- nav li { display: inline-block; }
- nav a { display: block; padding: 6px 12px; text-decoration: none; }
这个也就是所谓的单行CSS格式啦,还是有不少人喜欢这个风格的
4.压缩输出 compressed:
- 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的时候指定输出风格,接下来我会分享命令行和gulp两种方法:
1.命令行编译:
sass --watch style1.scss:style1.css --style compressed
嘛,其实很简单,就是在原来编译指令的后面加了 --style 输出风格
所以只要依据需求,把compact,compressed这样的参数写在--style后面就行
2.gulp编译:
gulpfile.js代码如下:
- var gulp = require('gulp');
- var sass = require('gulp-sass');
- gulp.task('sass', function () {
- return gulp.src('./sass/**/*.scss')
- .pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
- .pipe(gulp.dest('./css'));
- });
其实这个大家应该也能看得出来,就是在原本sass()中加了一个参数outputStyle:'编译风格'。
tips:在不指定风格的情况下,默认为嵌套输出。
Sass学习之路(4)——不同样式风格的输出方式的更多相关文章
- [Sass]不同样式风格的输出方法
[Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...
- gulp-sass设置不同样式风格的输出方法
sass最终输出的样式包括下面几种样式风格:嵌套输出方式 nested展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed sass: nav { ul { ...
- Sass学习之路(1)——Sass简介
Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等. 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些 ...
- Sass学习之路:注释、变量以及导入
前言 由于.sass不兼容CSS代码,所以以下内容完全使用.scss的语法. Sass注释 Sass中除了提供CSS中的标准注释之外,还提供了一种静默注释: /* 我是标准注释 */ // 我是静默注 ...
- Sass学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- Sass学习之路(2)——Sass环境安装(windows版)
因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...
- Sass学习之路(5)——变量
1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如: $width:200px;//定义了一个名为width的变量,值为200px 2.普通变量和默认变 ...
- Sass学习之路(3)——Sass编译
Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还 ...
- Flume学习之路 (三)Flume的配置方式
一.单一代理流配置 1.1 官网介绍 http://flume.apache.org/FlumeUserGuide.html#avro-source 通过一个通道将来源和接收器链接.需要列出源,接收器 ...
随机推荐
- UNIX环境高级编程笔记之文件I/O
一.总结 在写之前,先唠几句,<UNIX环境高级编程>,简称APUE,这本书简直是本神书,像我这种小白,基本上每看完一章都是“哇”这种很吃惊的表情.其实大概三年前,那会大三,我就买了这本书 ...
- 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)
从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...
- SNF开发平台WinForm之八-自动升级程序部署使用说明-SNF快速开发平台3.3-Spring.Net.Framework
9.1运行效果: 9.2开发实现: 1.首先配置服务器端,把“SNFAutoUpdate2.0\服务器端部署“目录按网站程序进行发布到IIS服务器上. 2.粘贴语句,生成程序 需要调用的应用程序的Lo ...
- 论文第5章:Android绘图平台的实现
面向移动设备的矢量绘图平台设计与实现 Design and Implementation of Mobile Device-oriented Vector Drawing Platform 引用本论文 ...
- linux rdate
检查服务器时间,发现服务器时间与当前时间错了很多.于是调整. 使用ntpdate ,不管如何设置,包括关闭防火期,设置ntp.conf,结果都不成功. 随即使用网上提供的另外一种方法,临时先解决一下燃 ...
- how to create a framework for ios . cool!
预热. http://www.raywenderlich.com/65964/create-a-framework-for-ios http://insert.io/framework-ios8-xc ...
- win7激活
应亲戚要求,装了次win7系统,重新删除分区,格盘,重新划分好分区.完毕.发现系统分区全自动变成动态磁盘.使用win7激活工具时,注意选择使用 小马通用版激活工具. 动态磁盘 稍后解释 小马工具
- 【转载】两个排序数组的中位数 / 第K大元素(Median of Two Sorted Arrays)
转自 http://blog.csdn.net/zxzxy1988/article/details/8587244 给定两个已经排序好的数组(可能为空),找到两者所有元素中第k大的元素.另外一种更加具 ...
- bower的使用
一.bower的安装 安装nodejs的最新版本: 安装npm. 由于npm是nodejs的包管理器,所以在将nodejs安装完成后,npm也就自动安装完成. 安装git. 安装bower. 使用 n ...
- linux主机间复制文件
命令基本格式: 1.从 本地 复制到 远程 * 复制文件: * 命令格式: scp local_file remote_username@re ...