如何生成大量的css模板?

时间:2013-11-18 09:01:10

标签: css templates

在html5up.net中浏览css模板后,我非常好奇设计网站/公司如何制作所有模板。随着他们流失的数量,他们肯定必须有一些有效的系统。起初我认为经验丰富的设计师可能会手工编写组合,并将旧模板中的大块复制/粘贴到新模板中。以这种方式将新模板松散地放在另一个上会产生某种快速的生产...然后我想,由于前端文件的组织有多好,它们不能用手编码(或者至少不是大部分) - 它们是由生成模板的编程构成的,有点像构建模板的模板。我只想推测这种可能性,但我想知道一个人如何制作这样的模板。如果不是这样,那是否可行?

1 个答案:

答案 0 :(得分:0)

这可以通过预处理的CSS来完成。

在最简单的层面上,这些语言/框架可以被视为允许通过使用变量,混合,嵌套和公式派生/内联函数来更改核心模板文件来输出大量的CSS。一旦设置了模板,就可以通过仅改变一个或两个变量来完成诸如站点颜色变化之类的事情。

您可能需要查看SASSwikiarticle

  

Sass是一种脚本语言,被解释为层叠样式   表格(CSS)。 SassScript本身就是脚本语言。萨斯   由两个语法组成。原始语法,称为“缩进的   语法“使用类似于Haml的语法。它使用缩进来   单独的代码块和换行符分隔规则。该   较新的语法“SCSS”使用类似CSS的块格式。它用   用括号表示代码块和分号来分隔a中的行   块。传统上给出了缩进语法和SCSS文件   扩展名.sass和.scss分别。

还有LESSwiki)以类似的方式运作。

  

LESS(Leaner CSS)是由Alexis设计的动态样式表语言   泽利尔。它受Sass影响并影响了新的“SCSS”   Sass的语法,它改编了类似CSS的块格式化语法。   LESS是开源的。它的第一个版本是用Ruby编写的,但是在   在更高版本中,Ruby的使用已被弃用并替换为   JavaScript的。 LESS的缩进语法是嵌套的元语言,如   有效的CSS是有效的LESS代码,具有相同的语义。 LESS提供   以下机制:变量,嵌套,mixins,运算符和   功能; LESS和其他CSS预编译器之间的主要区别   因为LESS允许通过LESS.js进行实时编译   浏览器。 LESS可以在客户端和服务器端运行,或者   可以编译成纯CSS。

最后有styluswiki

  

Stylus是一种受Sass影响的动态样式表语言   而且很少。它被认为是第三个最常用的CSS预处理器   语法。