个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
所以我有一个相当大的代码库，它使用更少(很多文件)。我想将 css 转换为使用 BEM(实际上是 BEM 的一个变体)，我很想找到一种简单的方法来检查 less 文件，包括命名约定。
有什么办法吗？
所以基本上我想要所有默认的 css lint 东西并另外定义可能不会被破坏的命名约定。
例如类需要以 c-、u- 或 o- 开头，不允许使用其他类。
最佳答案
如果后处理器像 https://github.com/necolas/postcss-bem-linter出于某种原因不会为你工作。您可以编写自己的插件，也可以创建一个 Less 插件。 Less plugin可以是visitors也可以是postprocess，自己用。
E.g. classes need to start with c-, u- or o-, other classes are not permitted.
检查上述要求的访客插件示例:
<!DOCTYPE html>
<html>
<head>
<title>BEM Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="bem.less" rel="stylesheet/less">
<script>
var ValidateBEM = function(less) {
this._visitor = new less.visitors.Visitor(this);
};
ValidateBEM.prototype = {
isReplacing: true,
run: function (root) {
return this._visitor.visit(root);
},
visitRuleset: function (rulesetNode, visitArgs) {
console.log(visitArgs);
if(rulesetNode.selectors) {
for (var i = 0; i < rulesetNode.selectors.length; i++) {
if(rulesetNode.selectors[i].elements[0].value.match(/^\./)){
if(!rulesetNode.selectors[i].elements[0].value.match(/^\.[cuo]-/))
{
console.log(rulesetNode.selectors[i].elements[0]);
throw { type: 'BEM Validation',
message: "class names should start with c-, u- or o-",
filename: rulesetNode.selectors[i].elements[0].currentFileInfo.filename,
index: rulesetNode.selectors[i].elements[0].index };
}
}
}
}
return rulesetNode;
}
};
var ValidateBEMPlugin = {
install: function(less, pluginManager) {
pluginManager.addVisitor(new ValidateBEM(less));
}
};
less = {
env: "development",
plugins: [ValidateBEMPlugin]
};
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>
</head>
<body>
<header>
<h1>header</h1>
</header>
</body>
</html>
当 bem.less 包含以下类时:
.class {
t:test;
}
在上面将导致如下所示的错误:
Grunt-contrib-less 也允许你使用 Less 插件:
less: {
production: {
options: {
paths: ["assets/css"],
plugins: [
new (require('less-plugin-bem'))({browsers: ["last 2 versions"]}),
] }
}
}
上面使用的插件只能在浏览器中使用，参见How to exend the Less compiler with a custom function leveraging a plugin如何创建 CLI 版本。
关于css - 使用包括 BEM 在内的 gulp 验证更少，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29014372/
24
4
0
我一直在使用 less 进行前端开发，但最近几天我遇到了这个错误。 我正在使用 PhpStorm 的观察器将 less 文件编译为 css 文件。但是当我编辑 less 文件时，编译器将这一行添加到
我在互联网上搜索Erlang的流程模型并找到了一些图表 slides 3-4在乔·阿姆斯特朗的一次演讲中。它们显示了 Erlang、java 和 C# 之间进程创建和消息传递时间之间的许多差异。谁能告
我怎样才能用更少的钱创建这个类？ .class { display: none; } a:hover .class { display: block; } 最佳答案 像这样？ .cla
全部，我有一些代码在 less 中做一个循环。但是如果我把px改成'%'，less就不能编译less文件。我该怎么做呢？谢谢。 @iterations: 100; // helper class, w
According to the docs如果我做类似的事情: .child, .sibling { .parent & { color: black; } &
这是一个现有的通用 css 规则(原始文件): .caption-top { color: red; } 这是示意图，因为在现实生活中，我需要根据上下文将 .caption-top 选择器变成其他
所以问题是我想连接到msaccess 数据库，每次打开它时都有密码。 如果我直接打开 Access 文件，密码就有效。 如果我删除密码，我可以建立连接，这意味着如果不涉及密码，我的代码可以工作 密码是
news.less 看起来像这样； @import: "libs/base.less" base.less 看起来像这样； @import "colors.less"; @
当我在这里使用 WINLess 编译这段代码时出现错误: .icon-text-shadow (@icon-text-shadow: 0.0625rem 0.0625rem rgba(132, 108
我正在处理大型矩阵，例如 Movielens 20m dataset .我重组了在线文件，使其与页面上提到的尺寸(138000 x 27000)相匹配，因为原始文件包含的索引更大(138000 x 1
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我是 Android 新手，刚来这里。 我只知道 Bitmap 逐像素存储图像并且不进行任何压缩。 Drawable和Bitmap一样吗？ 或者 同样的图片文件，Drawable 比 Bitmap 占
我是一名前端开发人员，最近考虑使用 SASS 或 LESS 进行 CSS 开发。 不过，我不使用 Ruby，也不想依赖于使用 JavaScript 的用户。有没有人对使用 PHP 项目使用 SASS
我需要将日历添加到表单中。 我想安装这个项目: https://github.com/vitalets/bootstrap-datepicker 但据说: 某些样式需要 Bootstrap 的下拉组件
如果您运行如下代码: length(unique(runif(10000000))) length(unique(rnorm(10000000))) 你会看到只有大约 99.8% 的 runif 值是
我正在这样做Question首先使用 PriorityQueue 解决了这个问题:- public ArrayList solve(int A, int B, int C, int D) {
基本上就是标题所说的。我知道如果我只有一个字母，我可以使用 char 作为类型，但我需要 2 个字母的数据类型，例如“XY”。有没有比字符串使用更少存储空间(位)或更小的东西？或者多个字母通常只是保存
我有两个表，用户表和程序表。现在我只有 5-10 个计划和数以万计的用户，他们可以注册任何一个计划(也可以注册多个计划)。因此，在多对多关系的情况下，我正在考虑创建一个单独的表，例如 link_use
我们有一个基于 LESS 的样式表，我们希望为其生成多种颜色变化。我们已经定义了一个包含颜色变化(现在为 blue.less)的包含文件，并希望生成和使用该包含文件的绿色和红色变化。 我们想要做的是通
我想知道我是否可以改进我的 LESS-Snippet。我有很多带有颜色名称的变量/我自己的颜色标题和相关的前景和背景颜色。我根据我的颜色定义类名称。 @logocolorgreen: #40FF01;
我是一名优秀的程序员,十分优秀！