Fig-style NPM | npm.io

❗❗❗ 声明： 本项目停止维护，功能失修

fig 样式写法

原子样式

一般写法

fig 写法:

<div width:100px></div>

原子样式一般写法与 css 语句写法基本一致.

css 写法:

width: 100px;

如果你愿意的话,原子样式也可以在末尾加分号

<div width:100px;></div>

本质上这整体是一个 html 标签的属性名,所以千万不要加空格哦
冒号前部分映射 css 属性,我们称之为fig 属性
冒号后部分映射 css 属性值,我们称之为fig 属性值

映射 css 函数

正常写法,没有特殊要注意的

<div color:rgb(255,0,0)>red</div>

映射 css 复合属性值

<div padding:10_5_20_15></div>

注意一个 html 属性不可有空格

因为不可有空格,所以 fig 复合属性是用下划线分隔的\ 而 css 的复合属性是用空格分隔的

关于 px 单位的省略

px 单位通常可以省略但是也有个别例外\ CSS 中的某些属性可以直接应用数值，而不需要指定单位，这是因为这些属性具有默认的单位。例如，当你设置宽度（width）、边距（margin）、填充（padding）等属性时，如果你没有指定单位，CSS 会默认使用像素（px）作为单位。\ 然而，并不是所有的 CSS 属性都可以省略单位。例如，当你设置字体大小（font-size）时，如果你没有指定单位，它可能不会按照你期望的方式工作，因为 font-size 的默认单位不是像素，而是依赖于父元素的字体大小。

所以这是一个原生 css 的知识,fig 并没有做特殊处理

<div width:100></div>

属性映射

const defaultAttrMap = {
  /* 首字母命名法 */
  w: 'width',
  h: 'height',
  p: 'padding',
  m: 'margin',
  ml: 'margin-left',
  mt: 'margin-top',
  mr: 'margin-right',
  mb: 'margin-bottom',
  pl: 'padding-left',
  pt: 'padding-top',
  pr: 'padding-right',
  pb: 'padding-bottom',
  t: 'top',
  b: 'bottom',
  l: 'left',
  r: 'right',
  c: 'color',
  fs: 'font-size',
  fw: 'font-weight',
  dp: 'display',
  bg: 'background',
  bgc: 'background-color',
  /* 取三命名法 */
  pos: 'position',
  bor: 'border',
  /* 复合命名法 */
  borr: 'border-radius',
  /* 其他 */
  cross: 'align-items',
  main: 'justify-content',
  /* 用户自定义 */
  ...attrMap,
}

以上是部分内置的属性映射,所以上面一般写法的例子也可以这样写\ 映射的对象属性必须是小写哦,这是 html 属性特性导致的\ 但是你可以用字符串属性的方式设置特殊标识

<div w:100></div>

也可以自定义属性映射,如下

<div c:red>!!!</div>

<script>
  fig.setAttrMap({
    c: 'color',
  })
</script>

setAttrMap是暴露在全局的函数\ 接收一个对象\ 用于配置fig 属性和css 属性的映射关系

属性值映射

同上,但属性值没有内置的映射,不过你可以发挥你的想象自行设置,比如

<div display:\>看不到我</div>

<script>
  fig.setValMap({
    '\\': 'none',
  })
</script>

setValMap是暴露在全局的函数\ 接收一个对象\ 用于配置fig 属性值和css 属性值的映射关系
'\\' 第一个反斜杠是用于转义\ 所以原子样式中写一个反斜杠代表 none 属性值\ 斜杠才是自闭和标签哦,这里用反斜杠没关系的

简写形式

当 fig 属性值以数字开头时,我们可以把冒号省略\ 所以这个例子最简单的写法如下

<div w100></div>

!important

标签选择器< 原子样式的优先级 < 属性选择器
可见原子样式的优先级不高\ 所以你可以用类样式轻松覆盖\ 但如果不希望原子样式被覆盖的话,你可以这样做
```
<div bgc:red!>lorem</div>
```
也就是在 fig 属性后加一个感叹号 这样最后千万不可以加分号\ 当然也可以写全称 !important 全称最后可以加分号 如果你真的喜欢这样的话
```
<div bgc:red!important;>lorem</div>
```

fig 函数

空参

fig 函数的声明其实就是写一个 css 类样式\ 只是在使用类样式的标签上不用写类名\ 而是类似函数调用的写法

<style>
  .fig-center {
    display: grid;
    place-content: center;
  }
</style>

<div center()>lorem</div>

自己声明 fig 函数时记得加 fig- 类名前缀,为了避免与普通的类名冲突\ 当然,你也可以用传统的 class 形式

<div class="fig-center">lorem</div>

但是 fig 函数的写法是可以传参的哦

默认传参

<style>
  .fig-wh {
    --wh1: 100%;
    --wh2: transparent;
    width: var(--wh1);
    height: var(--wh1);
    background-color: var(--wh2);
  }
</style>

<div wh()></div>
<div wh(100)></div>
<div wh(100|rgb(225,0,0))></div>

类的命名法是 fig- + fig函数名 类中写上 css 变量,css 变量名必须是 fig函数名 + 数字 数字代表着传参位置,从 1 开始\ 参数根据位置直接传 fig 属性值就可以\ fig 函数中参数中用管道符|分隔\ 如果逗号的话,第三个 div中的fig函数不就相当于穿了四个参了嘛

指定传参

<style>
  .fig-box {
    --width: 100px;
    --height: 100px;
    --p: 0;
    --c: transparent;
    padding: var(--p);
    width: var(--width);
    height: var(--height);
    background-color: var(--c);
  }
</style>

<div box()>1</div>
<div box(width20)>2</div>
<div box(c:rgb(225,0,0)|height20)>3</div>
<div box(p5_10_20)>4</div>

这里 fig 函数的参数写法类似于原子样式\ 不过 fig 属性的位置对应的 css 变量,这样就可以选择性传参了\ 不过传入的是 fig 属性值,也就是说,也可以做属性值映射的

内置函数

.fig-center {
  display: grid;
  place-content: center;
}
.fig-wh {
  --fig1: 100%;
  --fig2: transparent;
  width: var(--fig1);
  height: var(--fig1);
  background-color: var(--fig2);
}
.fig-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.fig-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fig-pseudoEl {
  --a: '';
  --b: '';
  &::before,
  &::after {
    display: block;
  }
  &::after {
    content: var(--a);
  }
  &::before {
    content: var(--b);
  }
}

fig 函数优先级

fig 函数仍然可以被类样式轻松覆盖\ 由于 fig 函数本质是类样式,所以fig 函数比原子样式优先级高

行内选择器(fig 选择器)

原子化的弊端就是当有相同样式的时候需要写相同的原子样式
fig 选择器就是来解决这个问题的

选择器

概述

css 选择器能做的,fig 选择器基本都可以\ 由于 fig 选择器是以 html 属性的形式书写的\ 所以它在一个固定的标签上\ 所以它一定是一个联合选择器\ fig 选择器以所在的标签为参考系,这是他的魅力所在...\ 嗯么,那么..

<div +.box{}>lorem</div>

例如上面这个例子就类似于下面这个 css 选择器

div + .box {
}

但如果你看一下控制台,就会看到实际解析出的选择器长的十分复杂且怪异

css 选择器会选择所有 div,而fig 选择器是以所在的标签为起点
或许应该这样表示

所在标签 + .box {
}

fig 选择器也支持伪类和伪元素选择器,后面例子中会提到

子级选择器

由于 css 的子级选择器的连接符是>,所以如果写在 html 属性中的话

<div>test > lorem</div>

看出问题了吗\ 所以 fig 选择器的子级分隔符做了修改,改为了反斜杠

<div \.box{w100%}>...</div>

等于

所在标签 > .box {
  width: 100%;
}

后代选择器

后代选择器与子级选择器有同样的问题,css 的后代选择器分隔符是空格,在 html 属性中无法使用
所以 fig 选择器的后代分隔符做了修改,改为了两个反斜杠\ 挺合理的吧哈哈哈

<div \\span{color:#6af}>...</div>

其他选择器

其他的与 css 一样,下面举一些栗子

<div  ::after{content:"你好呀"}
      \:nth-child(2){bgc:#fab}
      \#foo,\.bar,\\span{fs2em}
> ... </div>

哈哈哈,还习惯嘛,别忘了这是 div 标签中有三个 html 属性哦

第三个是并集选择器,每个都是相对于所在标签的
也可以写交集,对于自身的交集,比如

<div .active{bgc:red}></div>

当自身有 active 类时,背景色变红

选中后设置样式

直接在大括号中写就好,用分号作分隔\ 原子样式或者 fig 函数都可以

<div +.box{bgc:rgb(225,0,0);h100;center()}>lorem</div>

虽然整体很长,但本质还是一个 html 属性,所以不能有空格,否则会视为多个 html 属性
注意 rgb 是 css 函数,center 是 fig 函数,都是可以使用的,css 函数可以看做是 css 属性值的一部分

注释

单独把一个 html 属性注释掉,原生是做不到的\ 不过如果你想注释掉 fig 样式的效果你可以在它们最前面加一个井号

注释前:

<ul flex1 \li{wh(50|#fab);center();bor:1px_#000_solid} innerRow() main:center cross:center>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

全部注释后:

<ul #flex1 #\li{wh(50|#fab);center();bor:1px_#000_solid} #innerRow() #main:center #cross:center>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>