CSS Less(ish)

由 kizza 全部

在 Sublime Text 2 & 3 使用 css 文件中的变量和嵌套

详细信息

版本 2015.01.21.00.22.08
主页 github．com
问题 github．com
修改时间 10 年前
最后查看 1 小时前
首次出现 13 年前

安装次数

总数 169K
Win 159K
Mac 7K
Linux 3K

	Aug 6	Aug 5	Aug 4	Aug 3	Aug 2	Aug 1	Jul 31	Jul 30	Jul 29	Jul 28	Jul 27	Jul 26	Jul 25	Jul 24	Jul 23	Jul 22	Jul 21	Jul 20	Jul 19	Jul 18	Jul 17	Jul 16	Jul 15	Jul 14	Jul 13	Jul 12	Jul 11	Jul 10	Jul 9	Jul 8	Jul 7	Jul 6	Jul 5	Jul 4	Jul 3	Jul 2	Jul 1	Jun 30	Jun 29	Jun 28	Jun 27	Jun 26	Jun 25	Jun 24	Jun 23
Windows	0	1	1	0	0	0	0	0	0	0	0	3	1	0	0	0	0	0	0	0	0	1	1	0	0	0	0	2	1	0	0	0	1	0	0	0	1	0	0	0	0	0	0	0	0
Mac	1	1	0	0	0	0	0	0	0	0	0	0	1	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

CSS Less(ish)

A Sublime Text 2 & 3 插件，实现 css 预处理器（例如 LESS）的简化版本功能，以便您可以毫不费力地使用 css 变量和嵌套。

CSS 变量

使用 “@” 符号在注释中存储变量，然后可以在 css 中任何位置使用它们。

/* @link = #6699CC */  
a { color: @link; }

产生

a { color: #6699CC; }

CSS 嵌套

在其它块中嵌套样式，将选择器应用到所有子元素。

header [
    h1 { color:blue }
    a { color:blue }
]

产生

header h1 { color:blue }
header a { color:blue }

CSS 颜色

使用颜色函数声明 css 变量，包括 lighten、darken、saturate 和 desaturate。也可以将现有变量作为参数传入。

/* 
@base-colour = #336699
@link = lighten(@base-colour, 20%) 
*/  
a { color: @link; }

产生

a { color: #3d7ab7; }

CSS 函数

提供了一些 css 简写函数，包括 transition、transform、box-shadow 和 linear-gradient。（这些参考 https://caniuse.cn 以获取针对特定浏览器的规则）

/* 
@transition   = transition(all 0.3s ease)
@transform    = transform(rotate(0.6deg))
@shadow       = box-shadow(0 0 0.4em #000)
@gradient     = linear-gradient(#fff, #ddd)
*/  
div { 
    @transition; 
    @transform;
    @shadow;
    @gradient;
}

产生

div { 
    -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;

    -webkit-transform: rotate(0.6deg);
        -ms-transform: rotate(0.6deg);
            transform: rotate(0.6deg);

    -webkit-box-shadow: 0 0 0.4em #000;
            box-shadow: 0 0 0.4em #000; 

    background-image: -webkit-linear-gradient(bottom, #fff, #ddd);
    background-image: linear-gradient(to top, #fff, #ddd);
}

CSS 数学

还可以进行数值变量的加法和乘法（支持 px、em 或 %）

/* 
@padding = 1em
@width = 10em + 2 * @padding
*/  
div { width: @width; }

产生

div { width: 12em; }

它是如何工作的？

该插件不需要安装任何第三方库或工具 - 事实上，它根本不是真正的 css 预处理器。

当您使用上述功能保存 css 文件时，插件会立即将输出编译为“预保存”，并将其写入磁盘，然后恢复您的原始 css（所有这些操作都是在您看不到的情况下进行的）。

为什么？

CSS 预处理器非常强大，但我希望能够简单且毫不费力地使用它们提供的基本功能。另一个优点是，当调试时，您的 css 样式可以回溯到原始源文档（因为您的 css 智能是从文件本身来的，而不是编译到一个单独的文件中）。

了解更多信息

您可以在 Wiki 中了解更多。