css - SASS 的 grunt-task 允许选项来强制执行代码样式

标签 css sass gruntjs grunt-contrib-sass

在我的 scss 文件上做代码样式有什么繁重的任务吗?

我想在我的 .scss 文件中应用代码样式,这可能吗?

那么该任务将应用下面的约定来格式化我的 css 代码,这可能吗?

示例我想要归档的内容

来自谷歌:

按字母顺序排列声明。 将声明按字母顺序排列,以便以易于内存和维护的方式实现一致的代码。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

或来自 idiomatic-css :

申报顺序 如果要一致地对声明进行排序,则应遵循单一、简单的原则。

较小的团队可能更喜欢将相关属性(例如定位和框模型)聚集在一起。

.selector {
    /* Positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Display & Box Model */
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #333;
    margin: 10px;

    /* Other */
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    text-align: right;
}

谢谢。

最佳答案

我认为您最好的选择是 scss-lint

来自 GitHub:

scss-lint is a tool to help keep your SCSS files clean and readable

它需要 Ruby,这对某些人来说可能是一个障碍。

可以在 article 中找到有关如何将其与 Grunt 一起使用的示例

关于css - SASS 的 grunt-task 允许选项来强制执行代码样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37067854/

相关文章:

html - 为什么宽度是: 100% not working for my responsive design?

css - 如何在 Ionic 3 中添加自定义 CSS

Node.js/Grunt 导出日志到文件

javascript - 如何从 grunt 任务中运行 grunt 任务?

html - CSS 鼠标悬停高亮表格超链接

javascript - 仅更改折叠容器的图像 src

css - CSS 渐变定义的顺序重要吗?

css - SASS - 源 map 位置

css - 从混合中合并选择器

node.js - 如何运行 grunt doular-server?