@media、@const和@mixin

 @media规则

@media at-rule 可以放置在 CSS 文件的顶层，在 at-rule @set内部，并嵌套在任何其他条件组 at-rule 中。

@media <condition> {
  ... style rules ...
}

<condition> Sciter 中的声明可以接受

1. 单个媒体变量名称，例如 @media print {...} 或

2. 组合多个条件 @media print or handheld {...} 的表达式

 @media查询

谨慎

在某种程度上，Sciter 中的媒体查询格式与 W3C 媒体查询不兼容。

 此 W3C 媒体查询

@media screen and (max-width: 600px) {
  ...
}

 在 Sciter 中是这样的

@media screen and (width < 600px) {
  ...
}

 语法：

@media  { ......规则 }

 <expr> 哪里是

1. name - 内置媒体变量或应用程序定义的媒体变量的名称;

2. and  - 两个布尔表达式的逻辑 AND;

3. or  - 两个布尔表达式的逻辑 OR;

4. <expr> < <expr>

5. <expr> > <expr>

6. <expr> == <expr>

7. <expr> <= <expr>

8. <expr> >= <expr>

    比较表达式

9. (  ) - 可以对表达式进行分组以避免歧义。

内置媒体变量

 @const

  @const 规则

@const name : <value> [... <value>];

允许定义可以使用其名称（以 @ ）而不是值使用的常量：

@const BACKGROUND: no-repeat url(...) 50% 50%;
...
body {
 background: @BACKGROUND;
}

 @mixin

@mixin at-rule 允许定义一组属性，并按前面加上的名称 @ 应用它们。

 Mixin 声明

@mixin mname {
 name1: <value>; /* properties */
 name2: <value>; /* of the set */
  ... 
}

 和用法：

 mixin 用法

some {
 @mname;
 color: black;
  ...
}

 参数化@mixin

带有参数的 @mixin at-rule 允许定义一组属性，并按前面加上的名称 @ 应用它们。

 Mixin 声明

@mixin mname(paramName1[... , paramNameN]) {
 name1: @paramName1;
 name2: @paramName2;
 name3: <value>;
  ... 
}

 和用法：

 mixin 用法

some {
 @mname(val1,val2);
 color: black;
  ...
}

示例，定义按钮的属性集：

 Mixin 声明

@mixin LIKE-BUTTON(color) {
 display:inline-block;
 background-color: @color;
 border: 1px solid #000;
 border-radius: 3px;
 padding: 0.5em 1em;
}

有了这样的定义，我们可以在各种规则中使用它：

a[href] {
 @LIKE-BUTTON(#ff0000);
 display:block; /*even it was defined in the mixin
                   we can redefine it after */ 
}