---
title: 原生小程序 TYSS 语法参考
summary: "TYSS 样式语言的语法参考，涵盖 rpx 和 rem 自适应单位、样式导入、内联样式、选择器及 LESS 支持。"
questions:
  - TYSS 中 rpx 单位是什么，如何进行屏幕适配换算？
  - rem 单位与 rpx 单位有什么区别？
  - 如何在 TYSS 中导入外部样式表？
  - 框架组件支持哪些方式来控制样式？
  - style 属性和 class 属性在使用上有什么注意事项？
  - 全局样式和局部样式的作用范围分别是什么？
  - TYSS 中引用本地资源有哪些限制？
  - 小程序是否支持使用 LESS 语法编写样式？
---

# 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` 物理像素。

| 设备         | rpx 换算 px (屏幕宽度/750) | px 换算 rpx (750/屏幕宽度) |
| ------------ | -------------------------- | -------------------------- |
| iPhone5      | 1rpx = 0.42px              | 1px = 2.34rpx              |
| iPhone6      | 1rpx = 0.5px               | 1px = 2rpx                 |
| iPhone6 Plus | 1rpx = 0.552px             | 1px = 1.81rpx              |

_建议： 开发小程序时设计师可以用 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` 物理像素。

| 设备         | rem 换算 px (屏幕宽度/75) | px 换算 rem (75/屏幕宽度) |
| ------------ | ------------------------- | ------------------------- |
| iPhone5      | 0.1rem = 4.2px            | 1px = 0.0234rem           |
| iPhone6      | 0.1rem = 5px              | 1px = 0.02rem             |
| iPhone6 Plus | 0.1rem = 5.52px           | 1px = 0.0181rem           |

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

## 样式导入

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

项目内容内文件:

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

支持 NPM 包文件导入

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

## 内联样式

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

### style 属性

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

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

### class 属性

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

```html
<view class="normal_view" />
```

## 选择器

同 [CSS3 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors) 保持一致

注意：

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

## 全局样式与局部样式

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

## 本地资源引用

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

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

## 高级进阶

### LESS 语法支持

为提高开发者编写样式文件的效率，智能小程序默认支持使用 [less](https://lesscss.org/) 语法进行样式编写。

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

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

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