CSS-On-Diet - 简单快捷的CSS预处理器

这是 Sublime Text v2 和 v3 的 CSS-On-Diet 包，适用于 Mac、Linux 和 Windows。 CSS-On-Diet 是一个预处理器。它的工作方式类似于 Emmet，但针对 CSS 层级。

此包包含

1. 语法高亮
2. 构建系统
3. 预处理器本身！

安装

包管理器

您可以通过 Sublime Package Control 进行安装

手动

或者，您可以将 此仓库名 克隆到您的 Sublime Text [2|3]/Packages 目录

包含的预处理器

由于 CSS-On-Diet 预处理器包含在此包中，您无需单独安装它。但是您可以这样做。它将优于包含的版本。

CSS-On-Diet 快速文档

CSS-On-Diet 是一个用于 CSS 文件的预处理器。其主要特性是常用属性的助记符，类似于 Emmet 缩写。其他优点包括直观的媒体断点、嵌套和单行注释、变量和混入、计算器、十六进制 RGBA、压缩器等。

使用旧的CSS

.element {
  letter-spacing: 2px;
  background-color: #1C6BA0;
}

如果所有 CSS 声明都在单独的一行上，您不需要进行任何更改

去除分号

.element {
  letter-spacing 2px
  background-color #1C6BA0
}

在 CSS-On-Diet 中，冒号和分号是可选的

使用助记符

.element {
  les 2p
  bac #1C6BA0
}

常见的 CSS 关键字都有助记符。参数长3个字母，值长2，单位只是一个字母（列表）

媒体断点

@cod-media {
  tablet (min-width: 768px)
}
.element {
  les 2p
  les 3p @tablet
}

响应式网页设计从未如此简单和直观

单行注释

.element {
  les 2p // why not 3?
  bac #1C6BA0 // deep ocean
}

无需记住关闭注释

嵌套注释

.element {
  /*
  les /*3p*/ 2p
  */
  bac #1C6BA0
}

现在您可以在其他注释内部注释代码。终于...

算术

.element {
  les 3p-1
  bac #1C6BA0
}

CSS 需要计算。这是无疑的。

简短 RGBA

.element {
  les 3p-1
  bac #1C6BA0F1
}

只需添加两个数字，您就有颜色透明度

变量

@cod-defines {
  sp2014 3p-1
  ocean #1C6BA0F1
}
.element {
  les sp2014
  bac ocean
}

定义类似于变量。写一次，到处使用。遵循DRY原则！

混合

@cod-defines {
  sp2014 3p-1
  ocean bac #1C6BA0_ARG1_ ;\
        bai url("fish.png")
}
.element {
  les sp2014
  ocean(F1)
}

混合可以是任何位置的内容。参数赋予它们编程能力。

更多详情请参阅CSS-On-Diet页面