CSS 中的无效属性值使用：Bourbon SASS。 +retinaimage 从 V4 开始使用 V6 弃用

Question

我目前正在他的 YouTube 频道上学习 Brad Hussey SASS 课程：https://youtu.be/q5BO71n8Fbk?list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR

我目前正在播放视频 #10。

在当前版本中使用 Bourbon，6。Bourbon 在 v4 之后弃用了 +retinaimage，在他们的网站上它只是说使用 vanilla CSS。好吧，我想。所以我用 CSS 代替了 +retinaimage。这是代码：

.brand
  +hide-text
  background-image: url('..img/bourbon-logo_2x.png', 294px 56px)
  background: center no-repeat
  height: 56px
  margin: $gutter auto

代码来自一个名为 _common.sass 的 SASS 部分，它编译为 app.css，而从 sass 编译为 app.css 的代码是：

.brand {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
  background: center no-repeat;
  height: 56px;
  margin: 30px auto; }

看起来合乎逻辑。

很遗憾，图片未显示在页面上。我复制了图像的整个项目路径，使用不同的 URL 指向托管图像。

我仍然收到错误。

我进行了搜索，查看了 YouTube 评论并尝试了建议。

仍然出现错误，所以我想问我做错了什么？

我会上传我抓取的2张图片。希望有人出租车帮助。

西蒙

Invalid property from Chrome DEV

Larger Screenshot

Answer 1

你的第二个 background 语句覆盖了第一个。

  background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
  background: center no-repeat;

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

MDN

调换顺序：

 background: center no-repeat;
 background-image: url("..img/bourbon-logo_2x.png", 294px 56px);

CSS 中的无效 属性 值使用：Bourbon SASS。 +retinaimage 从 V4 开始使用 V6 弃用

Invalid property value in CSS using: Bourbon SASS. +retinaimage deprecated from V4 using V6

css

sass

bourbon

CSS 中的无效属性值使用：Bourbon SASS。 +retinaimage 从 V4 开始使用 V6 弃用