Question

我正在尝试使用http://designshack.net/articles/css/build-an-animated-photo-wall-with-css/ 在我的rails应用程序中实现照片墙。我将列表，段落和图像的CSS插入到我的custom.css.scss中的图像高度和宽度的唯一变化，如下所示：

/* picture wall */

/*------CONTAINER------*/
.container {
  width: 320px;
  margin: 0 auto 50px auto;
}

/*------LIST------*/
.container ul {
  list-style-type: none;
}
 
.container li {
  float: left;
  position: relative;
  width: 280px;
  height: 187px;
  overflow: hidden;
}
 
.container li:hover {
  cursor: pointer;
}

/*------PARAGRAPH------*/
.container li p {
  color: transparent;
  background: transparent;
  font: 200 10px/80px 'Arvo', Helvetica, Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
   
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px; 
 
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.container li:hover p {
  color: white;
  background: #000; /*fallback for old browsers*/
  background: rgba(0,0,0,0.7);
}

/*------IMAGES------*/
.container img {
  width: 80px;
  height: 80px;
   
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.container li:hover img {
  width: 100px;
  height: 100px;
}

资产管道在该文件中引发以下错误：

Invalid CSS after "  position:": expected pseudoclass or pseudoelement, was " absolute;"

注释掉位置线会显示文件中的下一行：

Invalid CSS after "  top:": expected pseudoclass or pseudoelement, was " 0;"

语法问题？我可以不简单地将有效的CSS放入scss文件中吗？是什么赋予了？

Answer 1

尝试使用text-transform: uppercase;删除该行下方的空格。

Answer 2

问题在于空白行！删除它并没有抛出错误。 Jeez，空白行无效CSS或SASS ???

（代码仍然没有做它应该做的，但这是一个完全不同的问题： - ）

rails资产管道：无效的CSS

2 个答案: