标签: less
在Less中循环遍历变量名称数组
在我们的应用程序中,我们有一个预设的颜色列表供用户选择,与该用户相关的所有内容都将具有该颜色.
在整个应用程序中,我们将有各种模块,其颜色附加为类名.
例如.
<div class="example_module green">
...
</div>
我们在CSS中使用LESS.
在很多地方我们都在做这样的事情:
.example_module.green { background: @green; }
.example_module.red { background: @red; }
.example_module.blue { background: @blue; }
etc
我希望能够将所有这些颜色名称设置为数组并迭代它们.如果我们将来添加颜色,我们只需将它添加到一个地方.
伪代码:
@colors: ['green', 'red', 'blue'];
for each @color in @colors {
.example_module.@color { background: @color; }
}
在LESS中甚至支持这样的东西吗？
推荐指数
解决办法
查看次数
如何在Notepad ++中为.less添加语法高亮？
我希望Notepad ++将我的.less文件视为我的.css文件,从而为.less我打开的任何文件获取语法高亮.
推荐指数
解决办法
查看次数
LESS文件无法加载(404)
我正在使用IIS 7.5,我无法加载较少的文件,因为它给出了404错误.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Less Tutorial</title>
<link rel="stylesheet/less" href="style.less" />
<script src="less-1.0.41.min.js"></script>
</head>
<body>
<div id="container">
<a href="#">My Anchor</a>
</div>
</body>
</html>
减:
@primary_color: green;
#container {
width: 200px;
height: 200px;
background: @primary_color;
}
推荐指数
解决办法
查看次数
是否可以内联LESS样式表？
例如,是否可以执行以下操作:
<style type="text/less">
#foo {
.bar {
font-weight: bold;
}
}
</style>
推荐指数
解决办法
查看次数
所有bootstrap断点都已弃用？
看看variables.less(以及来自google搜索),看起来所有bootstrap的断点更少的变量都被弃用了.它是否正确？如果我们想根据bootstrap的屏幕大小断点分配样式,有人知道我们应该使用什么吗？使用带LESS的Bootstrap v3.1.1.谢谢.
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop …推荐指数
解决办法
查看次数
如何将一个包含较少css文件的目录编译为css？
我有一个目录充满了较少的CSS文件.将它们编译为普通css的最佳方法是什么？(用于部署)
我喜欢运行如下命令:
lessc -r less/ css/
其中lessc是较少的编译器(通过节点包管理器安装)
推荐指数
解决办法
查看次数
变量名称错误"未定义",即使导入了"variables.less"
我今天开始使用LESS了.但它有点奇怪.此代码不起作用.我收到一个错误:
! Variable Name Error: @linkColor in a is undefined.
我的引导:
@import "variables.less";
@import "normalize.less";
variables.less:
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
normalize.less:
a {
color: @linkColor;
}
a:visited {
color: @linkColor;
}
a:hover {
color: @linkColorHover;
}
当我做一个
@import"variables.less"
在normalize.less文件中,一切正常.
谢谢你的帮助 :)
推荐指数
解决办法
查看次数
引用类/ mixin而不完全导入LESS文件
我正在使用wordpress的根主题:https://github.com/retlehs/roots/
它已经预编译了bootstrap.css,并建议使用app.css进行任何自定义.由于我没有通过html或javascript将类添加到按钮的选项,我想使用LESS源来引用一个css类,例如,我想给一个提交按钮引导按钮样式:
input#submit{
.btn;
.btn-primary;
}
如果我使用@import 'bootstrap.less';它将整个bootstrap css添加到app.css中.我怎样才能使用bootstrap.less作为编译参考？
推荐指数
解决办法
查看次数
双边框有不同的颜色
使用Photoshop,我可以将两个不同的边框放在一个具有两种不同颜色的元素上.有了它,我可以用我的元素制作许多动态的阴影效果.即使使用Photoshop效果,我也能用Drop Shadow和Inner Shadow来管理它.
关于Web设计问题,如果我有如下图所示的设计,我怎样才能用CSS实现？真的有可能吗？
注意:我给白色元素两个边框:外边框是白色,内边框是灰色的.它们一起创造出动感的外观,使其感觉像插入元素,白色元素是枕头压花.所以事情有点:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
但是你知道它是双重声明,并且无效.那么如何在CSS中管理这样的事情呢？
如果我把它放在那里border-style: double你知道我不能通过两种不同的颜色为单边double.
div.white{
border: double white grey;
}
另外,我熟悉LESS CSS预处理器.所以如果使用CSS预处理器可以做到这一点,请告诉我.
推荐指数
解决办法
查看次数
媒体查询中的LESS CSS设置变量？
我正在开发一个特定于iPad的网站.为了使我的网站在视网膜显示器iPad和旧版iPad上工作,我想在媒体查询中设置LESS CSS中的变量,如:
@media all and (max-width: 768px) {
@ratio: 1;
}
@media all and (min-width: 769px) {
@ratio: 2;
}
因此,当您设置像素的任何内容时,您可以这样做
width: 100px * @ratio;
但我得到一个编译错误,说没有定义@ratio.有可能有一个解决方法使其工作？谢谢.
推荐指数
解决办法
查看次数