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

时间:2016-05-06 08:36:36

标签: css sass gruntjs grunt-contrib-sass

在我的scss文件上执行代码样式的任何繁琐任务?

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

那么这个任务会格式化我的css代码,应用这些可能的方法吗?

我想要存档的例子

谷歌的

Alphabetize声明。 按字母顺序放置声明,以便以易于记忆和维护的方式实现一致的代码。

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;
}

谢谢。

1 个答案:

答案 0 :(得分:2)

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

来自GitHub:

  

scss-lint是一个帮助保持SCSS文件清晰可读的工具

它需要Ruby,这可能会阻止某些人。

有关如何在Grunt中使用此示例的示例,请参阅此article