CSS 新语法(目前还没有浏览器支持)

Perlvim

1. #!html5 /* declaration */
   
2. /* head title */
   
3. head { title: 'Hello world'; }
   
4. /* html element */
   
5. head link {
   
6.     rel: stylesheet;
   
7.     type: 'text/css';
   
8.     href: 'mystyle.css';
   
9. }
   
10. /* <script scr="sample.js" /> */
    
11. script {
    
12.     type: text/javascript;
    
13.     src: sample.js;
    
14. }
    
15. 
    
16. /* <h1>My first Heading</h1> */
    
17. /* 也可以写 html 因为有时候 更简洁 */
    
18. 
    
19. h1 { content: 'My first Heading'; }
    
20. p  { content: 'My first paragraph'; }
    
21. a {
    
22.     href: 'http://www/w3schools.com';
    
23.     content: This is a link;
    
24. }
    
25. /* default save css to an file named michael.css */
    
26. button {
    
27.     type: button;
    
28.     onclick: myfunction;
    
29.     content: Click me;
    
30. }
    
31. /* 开始一个脚本 */
    
32. form {
    
33.     method: post;
    
34.     action: xxx.htm;
    
35.     onsubmit: alert('My first Javascript');
    
36. }
    
37. /* myfunction is an function behavior */
    
38. &myfunction p {
    
39.     content: 'This is a paragraph';
    
40. }

复制代码

epstar

顶上去!顶上去!

Perlvim

最近一直在做一个编译器，将 css 扩展后的语法，解析成 内联 css 和 jQuery 的格式。
以下是一个 css 的格式：

1. p {
   
2.     class: classname;
   
3.     onclik: function;
   
4. }
   
5. /* 没有匿名函数名称更清晰 */
   
6. &function p.classname {
   
7.     width: 100;
   
8. }

复制代码

转换成的 js 代码如下：

1. $(document).ready(function() {
   
2.     $("p").click(function() {
   
3.         $(".classname").css("width", "100");
   
4.     });
   
5. });

复制代码

这种语法更简洁，也更容易理解。
我打算在Less-css 基础上扩展 html 的结构和内容部分和javascript 的行为部分。
这个项目是用Perl实现的解析器。
代码地址：