WTSC

介绍

WTSC 是什么？

WTSC 读音/WTSC/，WTSC 是一个 ts 生成 CSS 的框架，包括 css 缓存生成处理，效率优秀符合直觉的 CSS in TS 的解决方案,TSC ts 生成 css，项目起名时并没想到 WTSC 会在百度搜成‘无痛生产’，起初并没有恶搞成分。

起步

安装

TIP

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的基础知识。如果你刚开始学习前端开发，这也许可以，但是可能会让您感觉到某些困惑

尝试 Vue.js 最简单的方法是使用 例子，你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。

例子

我们可以使用 wtsc 改变一个 div 的颜色

可以在一个 vue 项目中添加一个文件

Click me to view the code

 
 
 
 
 
 
 



 
 




<template >
  <div
    :style="wtsc
    .add.height(px(61))
    .add.width(px(100))
    .add.background(rgb(255, 0, 0))
    .out()"
  ></div>
</template>
<script lang="ts" setup>

import { defWTSC, rgb, px } from '@wormery/wtsc'
const wtsc = defWTSC({})

</script>
<style >
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

进阶

还是刚才的方块，我们应该怎么增加伪元素呢？

很简单只需要像下面这样

Click me to view the code


 



 
 
 











<template >
  <div
    :class="wtsc
    .add.height(px(61))
    .add.width(px(100))
    .add.background(rgb(255, 0, 0))
    .class('class')
    .add.background(mixColor(rgb(255, 0, 0), rgb(255, 255, 255, 0.5)))
    .pseudo(':hover')
    .out()"
  ></div>
</template>
<script lang="ts" setup>

import { defWTSC, rgb, px, mixColor } from '@wormery/wtsc'
const wtsc = defWTSC({})

</script>
<style >
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

为什么第二个方法要改变第 3 行呢？

因为行内 style 不支持 hover 语法

注意

  1. 当添加 wtsc.class()方法后 out()将显式的输出 className
  2. 当 out 前面有未被输出的语句块，将会自动添加到 class 主 css 中去

添加点击变色

Click me to view the code









 
 




























<template >
  <div
    :class="wtsc
    .add.height(px(61))
    .add.width(px(100))
    .add.background(color)
    .class('twolive')
    .add.background(createHoverColor(color))
    .pseudo(':hover')
    .add.background(createPressedColor(color))
    .pseudo(':active')
    .out()"
  ></div>
</template>
<script lang="ts" setup>
import { defWTSC, rgb, px, mixColor } from '@wormery/wtsc'
import { RGBColor } from '../../src/CSSValue/color/RGBColor';
import { RGBAColor } from '../../src/CSSValue/color/RGBAColor';
const wtsc = defWTSC({})

const color = rgb(255, 0, 0)

function createHoverColor(
  color: RGBColor,
  overlayAlpha: number = 0.50
): RGBColor {
  return mixColor(color, rgb(255, 255, 255, overlayAlpha));
}

function createPressedColor(
  color: RGBColor,
  overlayAlpha: number = 0.15
): RGBAColor {
  return mixColor(color, rgb(0, 0, 0, overlayAlpha))
}

</script>
<style >
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

注意

如果您创建了多个根级 wtsc 每个 wtsc 存储隔离，渲染互不影响，但是由于根的名字相同，是有可能出现同一名字的 class,当然相同 class 的两个 dom 对象将拥有这两个 dom 的样式，所以不建议创建多个，并且创建多个 wtsc 随时也都可能废弃,也可能出现一些其他不可预料的问题，如果您发现了某个问题，可以提出 issues