ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

CSS自动注释

由 sc8696 ST2

Sublime插件，用于CSS自动注释

详情

  • 2014.02.26.19.04.29
  • github．com
  • github．com
  • 10年前
  • 38分钟前
  • 11年前

安装

  • 总计 3K
  • Win 2K
  • Mac 624
  • Linux 224
8月6日 8月5日 8月4日 8月3日 8月2日 8月1日 7月31日 7月30日 7月29日 7月28日 7月27日 7月26日 7月25日 7月24日 7月23日 7月22日 7月21日 7月20日 7月19日 7月18日 7月17日 7月16日 7月15日 7月14日 7月13日 7月12日 7月11日 7月10日 7月9日 7月8日 7月7日 7月6日 7月5日 7月4日 7月3日 7月2日 7月1日 6月30日 6月29日 6月28日 6月27日 6月26日 6月25日 6月24日 6月23日
Windows 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Mac 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

README

源代码
raw．githubusercontent．com

Sublime自动CSS注释

使用像DSS或KSS这样的自动生成风格指南固然很好，但是输入这些注释真的很麻烦！

这个Sublime插件将尝试为你整理所有这些东西，并为你想要注释的任何CSS块进行注释。

如何？

只需在CSS部分直接上方输入///后跟Tab键，搞定！
它还会检查你的CSS/SCSS/LESS文件的其余部分，寻找相关的状态或属性，并将它们作为状态添加到注释中，同时还会给出一个建议的标记

安装

包管理器

按Ctrl + Shift + P（在OSX上为Cmd + Shift + P）并搜索“安装”
然后在Sublime包管理器中搜索“CSS自动注释”并选择它

手动

只需下载这个存储库并将文件夹放入Sublime Packages文件夹中

示例

比如说你有一些很棒的CSS，像这样

button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;
}
button.active{
  background: maroon;
}

button:disabled{
  background: #aaa;
  color: #777;
}

就这样做

///[tab]
button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;
}
button.active{
  background: maroon;
}

button:disabled{
  background: #aaa;
  color: #777;
}

神奇！

/**
  * @name Button
  * @description Style for the button element
  * @state .active - active state
  * @state :disabled - disabled state
  * @markup
  *   <button>markup</button>
  */

button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;
}
button.active{
  background: maroon;
}

button:disabled{
  background: #aaa;
  color: #777;
}

哇！

现在你可以花更少的时间在注释样式表上，而更多地时间是写样式表。

它也支持嵌套的SCSS/LESS结构

/**
  * @name Button
  * @description Style for the button element
  * @state .active - active state
  * @state :disabled - disabled state
  * @markup
  *   <button>Markup</button>
  */

button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;

  &.active{
    background: maroon;
  }

  &:disabled{
    background: #aaa;
    color: #777;
  }
}

然后运行你的DSS构建器，就会蹦出一些很漂亮的、毫不费力的风格指南！

例如。