compass 编译出 css 默认有注释

2023-03-03 14:02:01html-css05

compass 编译出 css 默认有注释,第1张

你好，这个问题其实不难，只需要简单的修改下compass的配置就可以了

1、打开项目根目录下的 config.rb 文件

2、搜索 line_comments 关键词，默认应该是 # line_comments = false

3、去掉前面的 #，保存 config.rb

4、重新执行 compass compile

这样编译出来的 css 文件中就不会包含自动生成的行注释信息了。

希望能帮你解决问题，望采纳~~

Compass 是一个糟糕的项目。目前最大的Sass框架，它目前由Chris Eppstein自己维护，两个Sass核心设计者之一，目前它仍然十分流行。

注* SASS: Syntactically Awesome Style Sheets，CSS扩展语言可编程样式表）相关文章 LESS vs SASS？选择哪种CSS样式编程语言?

然而，大约一年前，我就完全抛弃Compass了。我将把从我们的项目中删掉。从我自己的网站中删掉。从我身边的项目中删掉。到底发生了什么？我是怎么从"Compass是最好的"转变到“我不需要它了”的呢？

起初我认为Compass是一个比Sass更好的东西，直到认识到它其实并没有带来多大实惠。至少是还不值得将其引入到项目中，特别是Ruby Sass本身已经很慢了...

这里我绝不是说Compass没用。我也不是劝你不要用。我只是想告诉你不使用Compass时另外一种做事方式。

我们先看看Compass有什么功能：

浏览器前辍（-webkit, -moz等），基于CanIUse数据库 (v1.0.0+)

数学计算函数助手，像cos, sin, pi等等

颜色助手像 shade, tint等等

图片助手像 image-width 和 image-height

图像切片自动合并编绎。注* 小图合大图减小连接请求

还有很多其它的附件

Autoprefixer没什么改进

在Compass 1.0.0之前，浏览器前辍是在Compass里手动管理的。这意味着每产生或传递一个新的前缀，都要拉一次新的请求来删除混入的前缀。不是很理想......这就是为什么Chris在V1.0.0里使用了一种更聪明的方法，直接从CanIUse 提取数据。

同时，非常受欢迎的Autoprefixer

库也能做这样的事。在这一点上，无论是Compass

还是Autoprefixer都能100%使用最新的浏览器前辍，但还有一个重要的区别：在Compass中，你仍然必须在属性和值上加一些前辍，而

Autoprefixer作为您部署过程的一部分，随后再处理样式表。

为了输出下面的CSS：

.unicorn { -webkit-transform: translateX(42em) -ms-transform: translateX(42em) transform: translateX(42em)}

使用Compass得这样写：

.unicorn { @include transform(translateX(42em))}

使用Autoprefixer插件：

.unicorn { transform: translateX(42em)}

后者不仅更简单更短，而且不再需要transform的前缀属性，这一切都很好。

你不会经常用到数学运算

我喜欢Sass为我们在样式表中提供的数学运算的能力。当我们使用CSS的预处理时，我们可以在CSS中混入变量，对于以数字为基础的CSS，但忽略数学的支持CSS来讲，这是一个巨大的进步。

最

重要的是，Compass提供了一些先进的数学函数，如 cos, sin, tan, sqrt, pow, pi也许还有 acos,

asin, atan, log 运算和 e 常量。在某些情况下，我不得不承认，此功能可能是有用的。例如，在以前的文章中，我使用的 cos 和

sin 打造完美的混合阴影。前阵子，我记得需要开方 sqrt 来正确地对齐和旋转伪元素。因此，它们有应用情形。

然而，他们的应用场景是如此罕见，我不得不重新考虑Compass在项目中保留数学函数的充分理由，实现上这些函数都可以在但Sass被polyfilled实现。举例来说，这里是一个纯粹的Sass版的 pow 功能：

/// Power function/// @param {Number} $x/// @param {Number} $n/// @return {Number}/// @source https://github.com/adambom/Sass-Math/blob/master/math.scss Sass-Math@function pow($x, $n) { $result: 1 @if $n >= 0 {@for $i from 1 through $n {$result: $result * $x } } @else { @for $i from $n to 0 {$result: $result / $x }} @return $result}

如果你赵的需要Sass中的高级数学函数，我建议你参考一下 Sassy-Math。

您可以自己实现颜色函数

说实施，我对Compass 的颜色函数不是非常的熟悉，因为我从来没有使用过其中任何一个功能。不过Compass提供了如此多的内置函数来处理颜色，我从来没有感觉有多少的需要。

下面有个例子。在CSS中实现渐变。为了让使用 mix 稍微容易点，我写了两个很短的函数，他们在Compass中是被实现了的。

/// Slightly lighten a color/// @access public/// @param {Color} $color - color to tint/// @param {Number} $percentage - percentage of `$color` in returned color/// @return {Color}@function tint($color, $percentage) { @return mix($color, white, $percentage)} /// Slightly darken a color/// @access public/// @param {Color} $color - color to shade/// @param {Number} $percentage - percentage of `$color` in returned color/// @return {Color}@function shade($color, $percentage) { @return mix($color, black, $percentage)}

无论如何，我不认为Compass有必要专门提供这些。

你可以不依赖图片工具

让我们来看一看有用的东西。Compass它是用Ruby编写的，提供的图片助手可以自动计算出类例image-width和image-height这样的属性。这是很实用的，特别当你需要替换图片时，你无需担心尺寸发生变化。

.logo { $logo-path: '/assets/images/logo.png' width: image-width($logo-path) height: image-height($logo-path) // ...}

不幸的是，我们没有办法写polyfill兼容函数来自己实现。Sass无法访问文件系统，因此无法任何弄清楚的图像尺寸。

话虽这么说，我个人倾向于使用SVG并在项目中并尽量地少使用图片。由于SVG是可缩放的矢量图形，我不需要关心它的尺寸。我已经使用好长一段时间了。

SVG Sprite有一大波自动合并的工具

好了，现在我们谈论Sprite Build，它一直是Compass的主要亮点，从文件夹中将小图标自动合并，并创建CSS Sprites只需要一两分钟，也许更少。

@import "compass/utilities/sprites"

@import "my-icons/*.png"

@include all-my-icons-sprites

在我们的样式表中自动创建CSS Sprite还有很多其他的选择。按照同样的思路，只用Compass的Sprite工具，我会觉得很奇怪，不管它有多好。没有必要将二者紧密联系在一起，即使它可能带来一些好处。