---
title: TYSS Reference
---

# TYSS Reference

Tuya Style Sheets (TYSS) is a programming language used to describe the component styles and presentation of a document written in the Tuya Markup Language (TYML) markup language.

To facilitate frontend development, TYSS has the most features of Cascading Style Sheets (CSS). CSS rules apply to TYSS. Meanwhile, CSS is extended so that it is more suitable for Smart MiniApp. The concept of Responsive Pixel (`rpx`) is introduced to TYSS, so your miniapp development can adapt to different mobile screen dimensions.

## rpx unit

`rpx` can be used to adapt to screen width. The specified screen width is 750rpx. Take iPhone 6 as an example. The screen width is 375px and has totally 750 physical pixels. `750rpx = 375px = 750` physical pixels, `1rpx = 0.5px = 1` physical pixel.

| Device | rpx converted to px (screen width/750) | px converted to rpx (750/screen width) |
| ------------ | -------------------------- | -------------------------- |
| iPhone5      | 1rpx = 0.42px              | 1px = 2.34rpx              |
| iPhone6      | 1rpx = 0.5px               | 1px = 2rpx                 |
| iPhone6 Plus | 1rpx = 0.552px             | 1px = 1.81rpx              |

_We recommend that you can regard iPhone 6 (750 physical pixels) as the design standard._

_Burrs might occur on certain small screens. Try to avoid these burrs during your development._

## rem unit

Different from `rpx`, relative to font-size of the root element (`rem`) ensures the calculation of the width of a real device screen is not affected by switching between the portrait and landscape orientations. Take iPhone 6 as an example. The screen width is 375px and has totally 750 physical pixels. `7.5rem = 375px = 750` physical pixels, `0.01rem = 0.5px = 1` physical pixel.

| Device | rem converted to px (screen width/75) | px converted to rem (75/screen width) |
| ------------ | ------------------------- | ------------------------- |
| iPhone5      | 0.1rem = 4.2px            | 1px = 0.0234rem           |
| iPhone6      | 0.1rem = 5px              | 1px = 0.02rem             |
| iPhone6 Plus | 0.1rem = 5.52px           | 1px = 0.0181rem           |

> The syntax applies to base library v2.6.2 and later. Operations to resolve the compatibility problems are required for earlier versions.

## Style import

Use the `@import` statement to import external style sheets. `@import` must be followed by the relative path of an external style sheet, with `;` indicating the end of the statement.

Project internal file:

```css
@import '../../file.tyss'; /* Relative path */
@import '/file.tyss'; /* Absolute path */
```

An npm package file can be imported.

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

## Inline style

Framework components support the use of style and class attributes to control styles.

### style attribute

The `style` attribute is used to receive a dynamic style and parse it in running. Try not to write static styles to `style`. Otherwise, rendering might be retarded. The `!important` priority rule is not supported.

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

### class attribute

The `class` attribute is used to receive a static style. The attribute value is the set of class selector names (style class names) in the style rules. Style class names do not include dots (`.`), and they are separated with white-space characters.

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

## Selector

Same as the [CSS3 selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).

Things to note:

- The class selectors starting with `.tyui-` are occupied by the system component. Do not use them.

## Global style and local style

- The style defined in the `app.tyss` is a global style and acts on every page.
- The style defined in the `.tyss` file of a page is a local style and acts on only the corresponding page. It overwrites the same selector in `app.tyss`.

## Local reference

Use an absolute path to reference a local file in the Base64 format in TYSS.

**Note**: Relative paths are not supported.

```css
/* Supported */
background-image: url('/images/ant.png');
background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHO');
/* Not supported */
background-image: url('./images/ant.png');
```

## Advanced syntax

### LESS syntax

To improve the efficiency of writing style files, Smart MiniApp supports [LESS](https://lesscss.org/) syntax for style programming.

Note that the LESS file that uses `@import` to introduce an npm module file must be prefixed by `~`.

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

> We recommend that you use the same programming syntax in the same project.