现在我在我的LESS代码中尝试在CSS3中执行此操作:
width: calc(100% - 200px);
Run Code Online (Sandbox Code Playgroud)
但是,当LESS编译时,它输出:
width: calc(-100%);
Run Code Online (Sandbox Code Playgroud)
有没有办法告诉LESS不要以这种方式编译并正常输出?
我正在使用的Less编译器(OrangeBits和dotless 1.3.0.5)正在积极地进行翻译
body { width: calc(100% - 250px - 1.5em); }
Run Code Online (Sandbox Code Playgroud)
成
body { width: calc(-151.5%); }
Run Code Online (Sandbox Code Playgroud)
这显然是不希望的.我想知道是否有办法向Less编译器发出信号,在编译期间基本上忽略该属性.我搜索了Less文档和两个编译器的文档,但我找不到任何东西.
Less或less编译器是否支持此功能?
如果没有,是否有一个CSS扩展器呢?
我正在使用LESS使用Bootstrap 2.0.3.我想广泛地自定义它,但我想尽可能避免对源进行更改,因为库的更改经常发生.我是LESS的新手,所以我不知道它的编译是如何完全有效的.使用基于LESS或LESS的框架有哪些最佳实践?
你能把.css文件导入.less文件......?
我很少熟悉并且用它来完成我的所有开发.我经常使用如下结构:
@import "normalize";
//styles here
@import "mixins";
@import "media-queries";
@import "print";
Run Code Online (Sandbox Code Playgroud)
所有导入都是其他.less文件,所有文件都可以正常工作.
我当前的问题是这样的:我想将.css文件导入.less文件,引用.css文件中使用的样式,如下所示:
@import "../style.css";
.small {
font-size:60%;
.type;
}
// other styles here
Run Code Online (Sandbox Code Playgroud)
.css文件包含一个被调用的类,.type但是当我尝试编译.less文件时,我得到了错误NameError: .type is undefined
.less文件不会导入.css文件,只能导入其他无文件文件吗?或者我引用它错了......?!
使用LESS,我知道我可以改变颜色变量的饱和度或色调.看起来像这样:
background: lighten(@blue, 20%);
Run Code Online (Sandbox Code Playgroud)
不过,我想改变颜色的alpha不透明度.最喜欢这样:
background: alpha(@blue, 20%);
Run Code Online (Sandbox Code Playgroud)
在LESS有一个简单的方法吗?
我认为这是不可能的,但我想如果有办法,我会问.我的想法是我有一个变量用于web资源文件夹的路径:
@root: "../img/";
@file: "test.css";
@url: @root@file;
.px {
background-image: url(@url);
}
Run Code Online (Sandbox Code Playgroud)
我得到了这个结果:
.px { background-image: url("../img/" "test.css"); }
Run Code Online (Sandbox Code Playgroud)
但是,我希望字符串组合成一个字符串,如下所示:
.px { background-image: url("../img/test.css"); }
Run Code Online (Sandbox Code Playgroud)
是否可以在Less中将字符串连接在一起?
我有以下代码:
@color : #d14836;
.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
to(transparent));
Run Code Online (Sandbox Code Playgroud)
我需要转换@color为rgba(209, 72, 54, 1).
所以我需要rgba(209, 72, 54, 1)在我的代码中用Less函数替换,该函数rgba()从我的@color变量生成值.
我怎么能用Less做这件事?
我已经使用LESS.js之前.它易于使用,类似于
<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)
我看到SASS.js.我怎样才能以类似的方式使用它?解析SASS文件以便在HTML中立即使用.看起来SASS.js更适合与Node.js一起使用?
var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'
sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}
Run Code Online (Sandbox Code Playgroud) 反正有没有在其输出中应用直接子选择器(>)?
在我的风格中,我想写下这样的东西:
.panel {
...
> .control {
...
}
}
Run Code Online (Sandbox Code Playgroud)
并且少生成以下内容:
.panel > .control { ... }
Run Code Online (Sandbox Code Playgroud) 我在Less文件中有以下CSS规则:
.container {
min-height: calc(100vh - 150px);
}
Run Code Online (Sandbox Code Playgroud)
这根本不起作用.我想让容器全窗口高度和负头,页脚固定高度.
我怎样才能做到这一点?