我试图找出,如何在"for in"循环中构建一个CSS选择器.
一些事情:
ul
for row in 1 .. 4
li*{row} <=== thats the tricky part
padding: 10px * row
它应该产生如下:
ul li{ padding: 10px }
ul li li{ padding: 20px }
ul li li li{ padding: 30px }
ul li li li li{ padding: 40px }
那可能吗？？
我正在使用Express for Node.js,而我正在使用的CSS引擎是Stylus.手写笔很棒,除了我似乎无法弄清楚如何传入颜色变量或以其他方式生成随机颜色.我尝试将javascript API用于手写笔,但我只是让自己感到困惑,可能过于复杂.
var stylus = require('stylus');
app.use(stylus.middleware({
src: __dirname + '/public',
compile: function (str, path) {
var mylib = function(style) {
style.define('randomColor', function () {
return '#5f5'; // temporary color just to see if it's working.
});
};
return stylus(str).use(mylib);
}
}));
然后在我的手写笔表中我做:
mainColor = randomColor()
但是,我收到以下错误:
预期RGB或HSL值,得到字符串#5f5
我为我的生活无法弄清楚如何从javascript正确地将颜色变量传递到手写笔表.
这是我的app.js文件:https://gist.github.com/4345823
这是我的Stylus文件:https://gist.github.com/4345839
在app.coffee我有
stylus = require("stylus")
...
app.use stylus.middleware
debug: true
src: __dirname + "/stylus"
dest: __dirname + "/public/css"
compile: (src) ->
console.log(stylus(src))
return stylus(src)
我把样式包含在layout.jade:
link(rel="stylesheet", href="/css/styles.css")
但是在Chrome网络标签中,我看到为styles.css取消了为什么会这样？
当我直接指向浏览器时/css/styles.css,我明白了
Cannot GET /css/styles.css
怎么了？我该如何解决？
我正在一个项目工作,我必须少用,个人我总是使用手写笔,但我不能用这个项目,所以我有下一个问题.我怎么能这样做,我正在用手写笔做得更少？问题是参数的数量.
在手写笔中:
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
.div {
box-shadow 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)
}
.div2 {
box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)
}
输出:
.div {
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px …在jade我希望stylus过滤器使用的范围内创建一个变量.
使用#{var}似乎不起作用.例如,这段代码:
- var color1 = 'blue'
stylus:
div
background-color pink
color #{color1}
给出结果错误:
/home/data/tnt/server/node/www/tech/cool.jade:2
1| div
2| background-color pink
> 3| color #{color1}
4|
expected "indent", got "outdent"
如何在过滤器中看到jade变量？color1stylus
你怎么做/可以在Stylus中做到这一点
.classA.classB {
color: red;
}
请注意,我不意味着.classA.classB不.classA .classB(它们是不同的)
我以为这会做到这一点
.classA
.classB
color red
但这样做(我猜这是有道理的)
.classA .classB{color:#f00}
我意识到我能做到这一点
.classA.classB
color red
但是,这并不会感觉非常"触控笔",并且如果你进一步嵌套会变得笨拙
谢谢吉姆
Stylus 的一大优点是它允许您定义可用于自定义结果输出配置的变量。
例如，
// my-html-object.styl
$my-html-object-color = red
$my-html-object
color $my-html-object-color
但是如何定义这个变量，以便它可以在加载 'my-html-object.styl' 之前被覆盖，以便以下是可能的？
// main.styl
$my-html-object-color = blue
@import('my-html-object')
无法想象如何嵌套grunt 手表和手写笔编译器(livereload将在以后出现)
我也试过使用"new"grunt newer,但我的代码肯定有问题.
有什么建议吗？
grunt.initConfig({
stylus: {
compile: {
options: {
paths: ['stylus'],
import: [
'nib/*'
]
},
files: {
'css/style.css': 'stylus/style.styl',
},
},
},
watch: {
stylus: {
files: ['*/*.*'],
task: ['newer:stylus:compile'],
options : { livereload: true },
},
},
});
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('compile', ['newer:stylus:all']);
此外,如果我跑grunt watch,它运作良好,但什么都不做.并且,如果我运行grunt stylus,它完全编译我的CSS.
如何在Stylus中使用负变量？
我为sprite编写mixin:
sprite-medium(col,row)
width = 40px
height = 40px
width: width
height: height
background: url('../img/medium-sprite.png') no-repeat
background-position: -col*width -row*height
我有一个错误.当然,我可以在调用mixins时写出负值,但这不是一个完美的决定.有人可以帮忙吗？谢谢.
我阅读了http://learnboost.github.io/stylus/docs/hashes.html,但没有一个例子对我不起作用.为了exapmle
foo = {
bar: {
baz: {
raz: 10px
}
}
}
qux = "raz"
padding
padding foo["bar"].baz[qux]
编译错误
expected "indent", got "eos"
我做错了什么？