标签: less

禁用LESS-CSS覆盖calc()

现在我在我的LESS代码中尝试在CSS3中执行此操作:

width: calc(100% - 200px);
Run Code Online (Sandbox Code Playgroud)

但是,当LESS编译时,它输出:

width: calc(-100%);
Run Code Online (Sandbox Code Playgroud)

有没有办法告诉LESS不要以这种方式编译并正常输出?

css css3 less css-calc

427
推荐指数
5
解决办法
10万
查看次数

使用CSS3 calc进行较少积极的编译

我正在使用的Less编译器(OrangeBitsdotless 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扩展器呢?

css compilation css3 less css-calc

329
推荐指数
4
解决办法
12万
查看次数

Twitter Bootstrap定制最佳实践

我正在使用LESS使用Bootstrap 2.0.3.我想广泛地自定义它,但我想尽可能避免对源进行更改,因为库的更改经常发生.我是LESS的新手,所以我不知道它的编译是如何完全有效的.使用基于LESS或LESS的框架有哪些最佳实践?

less twitter-bootstrap

285
推荐指数
4
解决办法
9万
查看次数

将.css文件导入.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文件,只能导入其他无文件文件吗?或者我引用它错了......?!

css import less

217
推荐指数
8
解决办法
12万
查看次数

修改LESS变量的alpha不透明度

使用LESS,我知道我可以改变颜色变量的饱和度或色调.看起来像这样:

background: lighten(@blue, 20%);
Run Code Online (Sandbox Code Playgroud)

不过,我想改变颜色的alpha不透明度.最喜欢这样:

background: alpha(@blue, 20%);
Run Code Online (Sandbox Code Playgroud)

在LESS有一个简单的方法吗?

css variables alpha opacity less

161
推荐指数
2
解决办法
7万
查看次数

在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中将字符串连接在一起?

css concat path less web

125
推荐指数
5
解决办法
7万
查看次数

如何使用Less编译器将HEX颜色转换为rgba?

我有以下代码:

@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)

我需要转换@colorrgba(209, 72, 54, 1).

所以我需要rgba(209, 72, 54, 1)在我的代码中用Less函数替换,该函数rgba()从我的@color变量生成值.

我怎么能用Less做这件事?

css less

124
推荐指数
3
解决办法
7万
查看次数

有SASS.js吗?像LESS.js这样的东西?

我已经使用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)

css sass less

110
推荐指数
5
解决办法
5万
查看次数

LESS中的直接子选择器

反正有没有在其输出中应用直接子选择器(>)?

在我的风格中,我想写下这样的东西:

.panel {
    ...
    > .control {
        ...
    }
}
Run Code Online (Sandbox Code Playgroud)

并且少生成以下内容:

.panel > .control { ... }
Run Code Online (Sandbox Code Playgroud)

css css-selectors less

109
推荐指数
3
解决办法
7万
查看次数

是否可以在CSS calc()中使用vh减去像素?

我在Less文件中有以下CSS规则:

.container {
  min-height: calc(100vh - 150px);
}
Run Code Online (Sandbox Code Playgroud)

这根本不起作用.我想让容器全窗口高度和负头,页脚固定高度.

我怎样才能做到这一点?

css less

105
推荐指数
1
解决办法
12万
查看次数