#TYSS 语法参考

TYSS 是一套样式语言，用于描述 TYML 的组件样式、显示效果。

为适应广大前端开发者，TYSS 继承 CSS 特性，TYSS 和 CSS 规则完全一致，100% 可以用。同时为更适合开发小程序，对 CSS 进行了扩充，TYSS 增加了 rpx 自适应单位，便于实现对各尺寸屏幕适配开发。

#rpx 单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

建议： 开发小程序时设计师可以用 iPhone6 (750 宽度) 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

#rem 单位

rem ( Relative to font-size of the root element) 与 rpx 的区别在于使用真实物理设备宽度计算，不受设备横竖屏旋转影响。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 7.5rem = 375px = 750 物理像素，0.01rem = 0.5px = 1 物理像素。

基础库 2.6.2 开始支持，低版本需做兼容处理。

#样式导入

使用 @import 语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

项目内容内文件:

@import '../../file.tyss'; /* 相对路径 */
@import '/file.tyss'; /* 绝对路径 */

支持 NPM 包文件导入

@import 'packageName/lib/file.tyss';

#内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

#style 属性

style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。行内样式不支持!important优先级规则。

<view style="color:{{color}};" />

#class 属性

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

#选择器

同 CSS3 选择器 保持一致

注意：

• .tyui- 开头的类选择器为系统组件占用，不可使用。

#全局样式与局部样式

• app.tyss中的样式为全局样式，作用于每一个页面。
• 页面文件夹内的 .tyss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.tyss 中相同的选择器。

#本地资源引用

TYSS 文件里的本地资源引用请使用绝对路径的方式、Base64 数据格式，不支持相对路径引用，例如下方示例。

/* 支持 */
background-image: url('/images/ant.png');
background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHO');
/* 不支持 */
background-image: url('./images/ant.png');

#高级进阶

#LESS 语法支持

为提高开发者编写样式文件的效率，智能小程序默认支持使用 less 语法进行样式编写。

需要注意的一点是，在 LESS 文件中使用 @import 引入 NPM 模块文件时需要加上 ~ 前缀。

@import '~packageName/lib/file.less';

建议：同一个项目内应使用一致的语法进行编程。