提高寫css的一點技法

2021-10-09 21:37:53 字數 1049 閱讀 1769

提高寫公共樣式的一些寫法,靈感**於 bootstra 框架

先在專案中寫一些公共樣式 common.scss

.flex-column 

$flexs: 1,2;

@each $i in $flexs

}.block

.inline-block

.text-center

.text-left

.border-radius-10

.color-3

$font-size: 14,28;

@each $i in $font-size

.line-h-#

}$gaps: 6,8,10,16,18,22,24;

@each $i in $gaps

.p-b-#

.p-l-#

.p-r-#

.m-t-#

.m-b-#

.m-l-#

.m-r-#

}

在 html 中使用

class

="flex-box"

>

class

="flex-1 font-14 color-3"

>

title

div>

class

="flex-2 p-r-10"

>

src=

"logo.svg"

/>

div>

div>

這樣使用的

好處:缺點:

另一種復用css的原則:使用相同 class

例如:class="card"class="btn"其他地方復用 card、btn class

優點:

缺點:

一般使用會結合上面兩種寫法,少量公共通用的樣式寫成 class 應用到 html 中,

需要特殊定製的樣式,再增加 class 控制樣式。

他們寫的,一點思考,一點敬意

技術的正宗與野路子 我們的大腦好比記憶體。既然是記憶體,就裝不下所有的知識。但應該能裝下對於知識的索引,否則我們便沒法工作了。啊,我的程式為啥卡住啦 本文簡答介紹在linux環境下如何利用gdb來分析卡住的程式,本文使用的python為cpython2.7。2019,能否解開時間的困局?通常在年初的...

一點一點學寫Makefile 1

相信很多linux開發者 都得自己來寫makefile,剛開始學習學寫這個的時候都會碰到很多困難,我之前沒有自己獨立完成過makefile,都是在公司已有的模板上新增。現在突然有乙個很大的想法就是從零開始寫makefile,這個部落格就是我的學習筆記。如下 cpp view plain copy i...

寫文件的一點感想

用了一周的時間,把機房管理系統的主要文件寫完了,主要是寫了四個文件 可行性研究報告,需求分析,概要設計,詳細設計。寫文件也不是一件容易活兒。我把我對軟體文件的認識寫出來。用問答的形式。1 問,寫文件到底是在寫什麼?答 寫文件到底在寫什麼。我說,我們在寫思想。你怎麼想的你就怎麼寫出來。寫出來以後就不光...