css - 如何在 less 中定义变量

标签 css less

我正在尝试在 less 中为媒体查询断点设置变量:

我的定义是这样的:

@sm-screen: "(min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";

因此,当我尝试使用它时,我会执行以下操作:

@media @sm-screen {
   .something {
       display: none;
   }
}

它几乎可以工作,但它也会输出双引号,因此编译后的 css 最终看起来像:

@media "(min-width: 768px) and (max-width: 991px)" {
    .something {
        display:none;
    }
}

我如何定义它以便编译后的 CSS 不会用双引号引起来?我尝试从变量定义中删除它们,但 less 无法编译,我收到以下错误:

ParseError: Expected ')' in C:\xampp\htdocs\fund-manager\resources\assets\less\variables.less on line 11, column 14:

最佳答案

我不得不像这样用 ~ 字符转义字符串:

@sm-screen: ~"(min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";

关于css - 如何在 less 中定义变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29863682/

相关文章:

html div垂直对齐

css - 网络包 4 : How to get CSS source maps working with LESS?

css - 相同样式的多个类和伪类更少?

css - LESS SCSS MIXIN 转换

php - CSS 预处理器 : Sass, Less、Php 和 Vals 来自数据库

css - Magento CSS 版本控制

javascript - Element.scrollHeight 与 height() 方法返回的高度的区别

php - 需要删除默认的 Wordpress 分页

html - HTML、正文和 div 有问题

css - 使用 Less CSS 可变字体大小