4种灵活的Scss编译输出风格整理

tracy 发布于2019-08-30 15:56 / 3603人阅读

摘要：编译命令为生成结果为展开输出方式，也是一般前端开发直接写使用较多的一种风格。其所有内容均不换行，而且会删除所有注释和空格。

很多人从使用Scss的那一刻起，就被别人告诉了如何编译。所以，基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS，以满足更多人的需求。不同的输出方式如下：

嵌套输出方式 nested

展开输出方式 expanded

紧凑输出方式 compact

压缩输出方式 compressed

那么，以后就可以随意的使用参数来生成自己喜欢的CSS风格。

来一个导航推荐，笔点网址导航 - 用心做最简洁的网址导航

1、nested

nested为嵌套输出风格，即左花括号和CSS类名（第一行）齐行。右侧花括号和最后一行齐行，不换行。

此风格一般使用较少，因为正常这样写CSS的人不多，风格比较别扭。

编译命令为：

sass abc.scss:abc.css --style nested

生成结果：

.header {
  background: #f00;
  color: #000;
  font-size: 20px; }
.sidebar {
  float: left;
  width: 300px;
  height: 500px; }
.main {
  float: right;
  width: 800px;
  padding: 20px;
  min-height: 500px; }

2、expanded

expanded为展开输出方式，也是一般前端开发直接写CSS使用较多的一种风格。其左花括号和第一行齐行，不换行。右侧的花括号在结尾处换行，另起一行。

编译命令为：

sass abc.scss:abc.css --style expanded

生成结果：

.header {
  background: #f00;
  color: #000;
  font-size: 20px;
}
.sidebar {
  float: left;
  width: 300px;
  height: 500px;
}
.main {
  float: right;
  width: 800px;
  padding: 20px;
  min-height: 500px;
}

3、compact

compact为紧凑输出方式，也是前端开发直接写CSS使用较多的另外一种方式。其左花括号和右花括号均不换行。花括号内的CSS属性值也不换行，一个接着一个写。

对于比较喜欢写单行CSS的朋友十分友好。

编译命令为：

sass abc.scss:abc.css --style compact

生成结果：

.header { background: #f00; color: #000; font-size: 20px; }
.sidebar { float: left; width: 300px; height: 500px; }
.main { float: right; width: 800px; padding: 20px; min-height: 500px; }

4、compressed

compressed为压缩输出方式。其所有内容均不换行，而且会删除所有注释和空格。把所有代码压成一团。

一般在上线情况，或者完全不用阅读修改CSS文件的情况下使用。文件会比较小。

编译命令为：

sass abc.scss:abc.css --style compressed

生成结果：

.header{background:#f00;color:#000;font-size:20px}.sidebar{float:left;width:300px;height:500px}.main{float:right;width:800px;padding:20px;min-height:500px}

云服务器 GPU云服务器 java 4种变量最灵活的编程语言 SCSS 免费的数据整理软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117502.html

CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
【Sass/SCSS】预加载器中的“轩辕剑”

摘要：预加载器中的轩辕剑，这也不是我帮它吹，是它自己说的，下图为例。是由语言编写的一款预处理语言，有严格的缩进风格。指令将文件包含在中，不需要额外的请求。语法指令告诉一个选择器的样式从另一选择器继承。【Sass/SCSS】预加载器中的轩辕剑博客说明文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！说明随着前端技术发展的越来越迅速，前端的样式...

cnsworder 2021-11-18 10:07 评论0 收藏0
前端架构gulp与webpack（知识点整理）

摘要：是通过加载器和插件对资源进行处理的。另外我们知道是对整个过程进行控制，所以在其配置文件中配置的每一个对项目中该配置路径下所有的资源都可以管理。一概念介绍 gulp 是 task runner，Webpack 是 module bundler。可以这么说， Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代，或者直接说和对方不重叠的。 1 什么是gulp Gulp...

willin 2019-08-21 18:34 评论0 收藏0
前端代码评审 Checklist 清单

摘要：从而辅助整个团队提高代码质量统一代码规范。如果你的团队还没有这么一份代码评审清单，也许这正是你需要的如果你的团队已经有了代码评审参照标准，这份清单也许能起到锦上添花的效果。如果违反这个规则，那么代码会很难被测试或者重用。前言前端团队有评审代码的要求，但由于每个开发人员的水平不同，技术关注点不同，所以对代码评审的关注点不同，为了保证代码质量，团队代码风格统一，特此拟定...

xzavier 2019-08-23 18:33 评论0 收藏0