使用LESS,我知道我可以改变颜色变量的饱和度或色调.看起来像这样:
background: lighten(@blue, 20%);
Run Code Online (Sandbox Code Playgroud)
不过,我想改变颜色的alpha不透明度.最喜欢这样:
background: alpha(@blue, 20%);
Run Code Online (Sandbox Code Playgroud)
在LESS有一个简单的方法吗?
我需要获取变量高度和宽度元素#sentence的尺寸,以便更改与其相关的其他元素的尺寸.#sentence在浏览器窗口中居中,无论其内容如何,都确定其高度和宽度.我的代码看起来像这样:
HTML
<body>
<div id="wrapper">
<div id="cell">
<span id="sentence">
sentence
</span>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
CSS
body, html {
font-size: 18pt;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#wrapper {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
#cell {
display: table-cell; vertical-align: middle;
}
#sentence {
display: inline-block;
background-color: #abc;
padding: 1em;
}
Run Code Online (Sandbox Code Playgroud)
JS
$(document).ready(function(){
var h = $("#sentence").height();
alert(h);
});
Run Code Online (Sandbox Code Playgroud)
当我尝试获取.height()或.width()的#sentence,我回来不一致的值.通常对于28的高度,但有时它会回到19.对于宽度,我得到84或有时52.
我想也许差异是由于滚动条暂时出现然后在页面加载时消失.我尝试添加overflow: hidden;到html并body …
是否有一种很好的,干净的方法将字符串和变量连接成 Jade可以理解的变量名?
理想情况下,它看起来像这样:
each #{shape + 'Text'} in #{shape + 'Texts'}
li #{shape + 'Text'}
Run Code Online (Sandbox Code Playgroud)
我试过使用,window[shape + 'Text']但似乎没有用.也许我做错了?
这就是我想要这样做的原因:
我有一个名为的数组shapes,如下所示:['square', 'triangle', 'circle']
我正在使用Jade的each ... in ...函数来遍历这个数组.在我的函数的每次迭代中,我需要做each ... in ...一些其他几个数组中的另一个.而是采用了直线上升的变量来选择遍历哪个数组,像each shape in shapes,我想连接shape,以获得像一个字符串each squareText in squareTexts或each circleText in circleTexts.
目前,我正在使用条件来实现我想要的结果,但它是冗长的而不是语言的极简主义精神.
提前感谢任何建议.