YUS框架之us指令

洛三少發表於2023-03-06

  眾所周知的是,頁面的樣式渲染是由CSS來完成的。例如:width:100px;代表元素寬度為100畫素;height:50px;代表元素高度為50畫素;font-size:15px;代表元素中字型大小為15畫素;下面一段就是標準的CSS語句:

.css1 {
width:100px;
height:100px;
line-height:100px;
background:#ff0;
}

  上面的CSS程式碼,代表一個寬、高、行高為100px,並且背景色為黃色的方框元素,那麼,用Yus如何來實現上述CSS程式碼的功能呢,先直接給出例子:

<div class="us-w-100 us-h-100 us-lh-100 uc-bg-ff0"></div>

解釋如下:

us-w-100,代表寬度為100畫素,即:width:100px;

us-h-100,代表高度為100畫素,即:height:100px;

us-lh-100,代表行高為100畫素,即:line-height:100px;

us-bg-ff0,代表背景色為#ff0黃色,即:background:#ff0;

由於在Yus中,數值相同的情況下,中間的屬性可以用逗號分隔連續書寫,所以上邊的程式碼可以精簡為:

<div class="us-w,h,lh-100 uc-bg-ff0"></div>

 

US指令說明

專案 描述
語法 指令由三部分部分,第一部分us宣告尺寸指令,第二部分為引數屬性縮寫,第三部分為數值。
示例:us-屬性引數-數值。
屬性引數 是CSS屬性的縮略寫法,如w代表width,m代表margin,詳情參見下列《屬性參數列》
數值 數值為正數的情況下直接書寫,數值為負數的情況下,用ms或^符號來代替。
示例:us-t-ms100或us-t-^100
n 向下延伸層級,例如n為3時,影響第三代子元素,即children().children().children()
單位 數值如果不帶單位的情況下,預設使用px畫素單位,us指令支援的尺寸單位包括px,pt,em,cm,vw,vh,vmin,vmax等,百分比可以使用%符號或pr
 

屬性參數列

yus將css常用屬性簡單的劃分為兩大類,即尺寸、顏色。yus認為所有px,pt,em,cm,vw,vh或者百分比符號%,都是尺寸的計量單位,可以使用us命令進行渲染,下表列出所有尺寸單位涉及到的屬性引數:
屬性引數 示例 CSS寫法 功能描述
w us-w-500 {width:500px;} 元素寬度,如果作用在<span>或<li>等標籤上,需要首先新增block或inline樣式,而這些class樣式是yus系統自帶的《內嵌樣式》,直接書寫呼叫即可。
例如:
<span class="block us-w-300">或<li class="inline us-w-300">
h us-h-20vh {height:20vh;} 元素高度
說明一下vw、vh,vmin,vmax幾個尺寸單位,1vw等於視窗寬度的1%,1vh等於視窗高度的1%,vmax視窗寬度或高度相對大的,vmin視窗寬度或高度相對小的。
lh us-lh-30 {line-height:30px;} 文字行高
fs us-fs-15 {font-size:15px;} 文字大小
t us-t-10vh {top:10vh;} 上方距離,設定頂端距離的元素,必須同時設定position位置屬性,使用內嵌class樣式自帶的poa、por、pof都可以,參考 《內嵌樣式》
r us-r-10 {right:10px;} 右側距離,需設定position位置屬性。
b us-b-10 {bottom:10px;} 下方距離,需設定position位置屬性。
l us-l-10 {left:10px;} 左側距離,需設定position位置屬性。
m us-m-2em {margin:2em;} 元素外邊距,此示例代表元素外邊距為2個字元。
CSS中margin屬性可以這些書寫:{margin:2cm 4cm 3cm 4cm;}或{margin:10px 5px;}。Yus同樣也支援這種書寫方式,只是在格式上稍有區別,同時對us-,uc-指令不再敏感。
例如:
us-m-[2cm 4cm 3cm 4cm]或us-m-[10px 5px]
mt us-mt-8 {margin-top:8px;} 元素上方外邊距。
mr us-mr-8 {margin-right:8px;} 元素右側外邊距。
mb us-mb-8 {margin-bottom:8px;} 元素下方外邊距。
ml us-ml-8 {margin-left:8px;} 元素左側外邊距。
p us-p-8px {padding:8px;} 元素內邊距。
pt us-pt-8 {padding-top:8px;} 元素上方內邊距。
pr us-pr-8 {padding-right:8px;} 元素右側內邊距。
pb us-pb-8 {padding-bottom:8px;} 元素下方內邊距。
pl us-pl-8 {padding-left:8px;} 元素左側內邊距。
bw us-bw-1 {border-width:1px;} 邊框寬度,設定元素邊框寬度,必須同時設定元素邊框的線型,例如:solid或dotted,內建線型class樣式參見 《內嵌樣式》
bt us-bt-1 {border-top-width:1px;} 邊框上方寬度。
br us-br-1 {border-right-width:1px;} 邊框右側寬度。
bb us-bb-1 {border-bottom-width:1px;} 邊框下方寬度。
bl us-bl-1 {border-left-width:1px;} 邊框右側寬度。
ra us-ra-5 {border-radius:5px;} 元素邊框圓角。
ls us-ls-5 {letter-spacing:5px;} 元素字母間距。
ti us-ti-2em {text-indent:2em;} 段落首行文字縮排,例子中為縮排兩個字元。
ws us-ws-5 {word-spacing:5px;} 文字間距。
ow us-ow-2 {outline-width:2px;} 元素周圍輪廓線的寬度。
oo us-oo-5 {outline-offset:5px;} 輪廓線偏移量。
xw us-xw-500 {max-width:500px;} 設定最大寬度。
nw us-nw-500 {min-width:500px;} 設定最小寬度。
xh us-xh-500 {max-height:500px;} 設定最大高度。
nh us-nh-500 {min-height:500px;} 設定最小高度。
va us-va-5 {vertical-align:5px;} 設定元素的垂直對齊方式,注意此處只可以使用數值,如top、middle等值的寫法,下面另外說明。
cp us-cp-5 {grid-column-gap:5px;} 定義網格佈局中,列間隙的大小。
rp us-rp-5 {grid-row-gap:5px;} 定義網格佈局中,行間隙的大小。
gap us-gap-5 {grid-gap:5px;} 定義網格佈局中,行與列間隙的大小。
z us-z-10 {z-index:10;} 設定元素的堆疊順序。
fw us-fw-700 {font-weight:700;} 設定文字的粗細,其中數值700等價於bold。
opa us-opa-0.5 {opacity:0.5;} 設定元素的不透明級別。
o us-o-5 {order:5;} 設定彈性盒物件元素的順序。
g us-g-3 {flex-grow:3;} 設定或檢索彈性盒子的擴充套件比率。
s us-s-2 {flex-shrink:2;} 設定flex元素的收縮規則。
fb us-fb-80 {flex-basis:80px;} 設定彈性專案的初始長度。
f us-f-1 {flex:1;} 設定或檢索彈性盒模型物件的子元素如何分配空間。

相關文章