搜索
查看: 4133|回复: 2

[教程] HTMLayout中使用 style-set 重用CSS样式

  [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2013-5-17 16:01:31 | 显示全部楼层 |阅读模式
style-set 类似SASS、LESS这些CSS预处理语言中的Mixins( 混合 )
    - 分离出需要重用的CSS样式并放到单独的mixin里( 在HTMLayout里称之为 style-set )。

htmlayout的默认CSS 中使用style-set比较多,可以看一下。

在CSS中定义style-set的语法:
@set 样式组名字 {
     CSS选择器 {

     }
}
使用 style-set 的语法:
CSS选择器 {
     style-set : 样式组名字;
}

在style-set 中可以使用子节点的选择器指定样式。
但是可惜的是不能象SASS、LESS那样支持多层嵌套,也不能直接包含根节点的样式 - 根节点的样式必须写在 :root选择器下面。

下面是一个完整的示例:
  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form( right=599;bottom=399;text="style-set 演示")
  4. /*}}*/

  5. import web.layout;
  6. var wbLayout = web.layout( winform );

  7. wbLayout.html =/***
  8. <html theme="test">   
  9. <body>
  10.         <div data-url="http://bbs.aardio.com" >
  11.                 <span .cls-a> test 1</span>
  12.                 <span .cls-b> test 2</span>
  13.         </div>
  14.         
  15.         <span .cls-a> test 3 - 注意 style-set 作用域外不受影响</span>
  16. </body>
  17. ***/

  18. wbLayout.css = /**
  19. @set css-rule {

  20.         .cls-a{
  21.             color:red;
  22.         }
  23.         
  24.         .cls-b{
  25.             color:blue;
  26.         }
  27.         
  28.         :root { /* 使用:root表示当前作用域的根节点 */
  29.             width:300px;
  30.             height:300px;
  31.             border:1px solid red;
  32.         }
  33. }

  34. html[theme="test"] div[data-url="http://bbs.aardio.com"]{

  35.     style-set:css-rule;
  36. }
  37. **/
  38.   
  39. winform.show()
  40. win.loopMessage();
复制代码
在 style-set 内部使用伪类 :root 表示当前指定的根节点。

style-set  还有那么一点OOP的功能,可以实现简单的继承,如下:

  1. @set css-rule-base {         
  2.         :root { /* 使用:root表示当前作用域的根节点 */
  3.             width:300px;
  4.             height:300px;
  5.             border:1px solid red;
  6.         }
  7. }

  8. /*一个尖括号后面指定基类*/
  9. @set css-rule < css-rule-base {
  10.         .cls-a{
  11.         color:red;
  12.         }
  13.         
  14.         .cls-b{
  15.          color:blue;
  16.         }
  17. }
复制代码

回复

使用道具 举报

8

主题

67

帖子

449

积分

二级会员

Rank: 3Rank: 3

积分
449
发表于 2013-5-22 17:27:33 | 显示全部楼层

谢谢楼主分享

谢谢楼主分享
回复

使用道具 举报

0

主题

6

帖子

36

积分

新手入门

Rank: 1

积分
36
发表于 2014-1-26 21:12:03 | 显示全部楼层

谢谢楼主分享


谢谢楼主分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-22 05:36 , Processed in 0.046875 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表