我在尝试播放CSS3关键帧动画时遇到了一些困难,并且在动画完成后将相关元素粘贴在最后一帧.根据我的理解,我必须为此设置的属性应该是动画填充模式,它应具有前进的值; 这没有任何作用.
.animatedSprite {
.animation-name: sprite;
.animation-duration: .5s;
.animation-iteration-count: 1;
.animation-direction: normal;
.animation-timing-function: steps(3);
.animation-fill-mode: forwards;
//Vendor prefixes... }
这将只播放一次动画,然后返回第一帧.我在JSFiddle(http://jsfiddle.net/simurai/CGmCe/)上找到了关键帧动画的示例,并且将填充模式更改为前进并将迭代计数设置为1也不会执行任何操作.
任何帮助将不胜感激.
我继续安装并测试了node.js然后我通过NPM安装了LESS CSS,但是当我输入命令时
lessc styles.less
要么
lessc styles.less > styles.css
它告诉我 -bash: lessc: command not found
我在MAC Lion终端计划
编辑:
安装Node后,您需要运行此命令
ln -s ~/.npm/less/1.2.1/package/bin/lessc (path to directory you want)
然后,您将能够在该目录中的任何较少文件上运行较少.
它可以工作,但它不会将导入编译成一个CSS文件.它只是将导入保留在文件中.我希望我可以将我正在导入的文件中的所有CSS组合在一起.
在Less中,似乎几乎不可能使用@font-face选择器.当我尝试使用时,Less会出错
font-family: my_font
以下是我尝试使用它的方法:
@font-face {
font-family: my_font;
src: url('http://contest-bg.net/lg.ttf');
}
p {
font-family: my_font, "Lucida Grande", sans-serif;
}
在Less使用中有简单的转义~"..."但不能提出工作代码.
有人成功使用它吗？
在Bootstrap的LESS版本中,有人可以告诉我如何添加第五个设备大小,超大(col-xl-#)？
我有一个inputbase(){}类的LESS文件.我经常使用它,但不是每种输入类型.当我编译时,我在输出的CSS文件中有很多重复的样式.
我看了一下bootstrap如何使用LESS为他们的网格,他们使用相同的方法; 哪里column 1 etc会从column基类继承.这似乎再次产生了很多CSS.
我应该.inputbase .specificClass 在每个<input />人中使用而不是使用LESS继承吗？
试图在我的Windows机器上为CSS设置LESS,我已经安装了ruby和rubygems并完全按照说明操作.
我投入teststyle.less了C:\.
当我输入
lessc teststyle.less
把它编译成.css文件,我收到一个错误:
The filename, directory name, or volume label syntax is incorrect.
在那些熟悉LESS的人中,你们中的任何一个人都能解决我的问题吗？
我搞砸了安装吗？
编译Twitter的Bootstrap 2.3.2时.少于2我发现以下错误:
NameError: #grid > .core > .span is undefined in /home/bootstrap-2.3.2/less/navbar.less on line 199, column 3:
198 .navbar-fixed-bottom .container {
199 #grid > .core > .span(@gridColumns);
200 }
我怎样才能解决这个问题？
我想以百分比计算子容器(div等)的宽度,具体取决于具有LESS CSS的父容器.
我正在使用Ethan Marcotte的论坛:target/context = result.
父容器:620px
子容器:140px
我正在使用这个计算:
div.child-container {
width: (140/620)*100%;
}
但输出是:
div.child-container {
width: 0.2258064516129;
}
我想将小数点移动两位数并添加%,如下所示:
div.child-container {
width: 22.58064516129%;
}
任何提示都非常感谢.
这是一个很长的镜头,但有没有一个工具可以通过删除不需要的特异性来优化CSS选择器？
我发现当我编写CSS时,我故意让我的选择器比必要的更具体,以避免冲突和准文档.
如果有一个工具可以分析给定的一组规则,确定它们与其他规则重叠的"唯一性",然后去除任何不必要的特异性,那将是很好的.
我甚至无法想象一个工具开发人员如何处理所需的所有场景,但我之前被其他人的聪明才智所震撼,并认为值得一提.
更新:
我已经为这个问题添加了一笔赏金,我越是想到它,我就越意识到CSS特异性过滤器的价值.
例如,在Sass和LESS中使用嵌套规则/选择器时,过度嵌套是一种常见且众所周知的反模式,很容易导致过度特定的选择器.
在优秀的TutsPlus课程中有一个很好的例子,可以使用Sass和Compass维护CSS:
body {
div.container {
p {
a {
color: purple;
}
}
}
}
Sass将遵循这些嵌套指令并生成以下CSS输出,不反对任何不需要的特性:
body div.container p a {
color: purple;
}
但是,如果特异性过滤器存在/确实存在,它将为CSS开发人员创造潜在的好处:
您可以将样式表组织为DOM的1:1映射,类似于在Firebug和Chrome开发工具中检查样式规则时所看到的内容.智能编辑器/ IDE可以使用共享样式/类自动填充DOM元素的样式.当然,这种冗余将由特异性过滤器/优化器过滤掉.
样式表可以通过扫描DOM并将其转换为CSS选择器/规则的工具预先填充其结构.这意味着开发人员只需要更新HTML; CSS"树"将保持同步以反映DOM的当前状态.智能编辑器可以让您跳转到元素/类的CSS定义以进行样式化 - 甚至可以在单独的面板中显示其样式规则.
在某种程度上,这几乎看起来是一个倒退 - 就像你在Dreamweaver或WebAssist中找到的功能,以帮助新手学习CSS.但是CSS选择器优化工具的基本思想似乎没什么好处,我所描述的工作流自动化类型将是合乎逻辑的下一步 - 催化剂将是特异性过滤器.
我研究了一些比较知名的CSS编辑器和Web IDE,但除了针对单个元素并为其生成选择器之外,还没有发现任何提供此类功能的东西.
更新2:CSS选择器性能
在回应Spliff的评论时,这里有两篇关于CSS选择器性能的精彩文章:
两人都认为微优化CSS不值得努力,但过度合格的后代选择器是"效率灾难".我还没有对自己进行基准测试,但怀疑我建议采用的那种"DOM Mapping"方法会在没有优化步骤的情况下导致性能下降,无论是手动还是自动化.
相关问题,链接和工具: