rails资产管道:无效CSS



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

/* 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文件中吗?什么东西?

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

问题出在空白行!已删除,并且不会引发错误。天哪,空行是无效的CSS或SASS???

(代码仍然没有完成它应该做的事情,但这是一个完全不同的问题:-)

最新更新