注意：我剛剛翻譯了下面的文字並將其發佈在這裡。參考文獻在本文末。
CSS 是一種高度專業化的程式語言，專注於樣式系統。由於這個單一用例及其聲明性，有時很難理解。有些人甚至否認它是一種程式語言。讓我們透過編寫一個聰明且靈活的樣式系統來證明他們是錯的。
控制結構
更傳統和通用的語言（如JavaScript）為我們提供了「條件」（if/then）、「循環」（for、while）、「邏輯門」（===、&& 等）等工具. ) 和“變數”。這些結構在 CSS 中的命名不同，它們的語法也非常不同，以更好地適應文件樣式化的特定用例，其中一些結構直到幾年前才在 CSS 中可用。
變數
變數是最直接的。它們在 CSS 中被稱為 自訂屬性（儘管每個人都稱它們為變量，甚至是他們自己的語法）。
:root {
--color: red;
}
span {
color: var(--color, blue);
}
登入後複製
雙破折號宣告一個變數並賦值。這必須發生在一個範圍內，因為在選擇器之外執行此操作會破壞 CSS 語法。請注意 :root 選擇器，它作為全域範圍起作用。
狀況
條件可以用多種方式編寫，這取決於您想要使用它們的位置。選擇器具有其元素的範圍，媒體查詢具有全域範圍並且需要它們自己的選擇器。
屬性選擇器：
[data-attr='true'] {
/* if */
}
[data-attr='false'] {
/* elseif */
}
:not([data-attr]) {
/* else */
}
登入後複製
偽類
:checked {
/* if */
}
:not(:checked) {
/* else */
}
登入後複製
媒體查詢：
:root {
color: red; /* else */
}
@media (min-width > 600px) {
:root {
color: blue; /* if */
}
}
登入後複製
循環
計數器是CSS中最直接的循環形式，但也是使用場景最受限的一種。您只能在內容屬性上使用計數器，將其顯示為文字。您可以在任何給定點調整“增量”、“起點”和“值”，但輸出始終僅限於文字。
main {
counter-reset: section;
}
section {
counter-increment: section;
counter-reset: section;
}
section > h2::before {
content: 'Headline ' counter(section) ': ';
}
登入後複製
但是如果您想使用循環來定義重複佈局模式怎麼辦？這種類型的循環有點晦澀：它是網格的自動填充屬性。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
登入後複製
這會用盡可能多的元素填充網格，同時縮放它們以填充可用空間，但在必要時將它們分成多行。只要找到網格項目並將其限制為最小寬度 300px 和最大寬度為其網格容器大小的一小部分，它就會重複。看到可能比解釋更容易：
最後，還有「循環選擇器」。他們接受一個參數，該參數可以是一個可以非常精確地選擇的公式。
section:nth-child(2n) {
/* seleciona todos os elementos pares */
}
section:nth-child(4n + 2) {
/* seleciona a cada quarto items, iniciando a partir do segundo */
}
登入後複製
對於非常特殊的情況，您可以將 :nth-child() 與 :not() 結合使用，例如：
section:nth-child(3n):not(:nth-child(6)) {
/* seleciona a cada 3 elementos, mas não o sexto elemento */
}
登入後複製
您可以將 :nth-child() 替換為 :nth-of-type() 和 :nth-last-of-type() 來變更最後範例的範圍。
邏輯閘
Ana Tudor 寫了一篇關於 CSS 邏輯閘的文章。 Login Gates 致力於將變數與計算結合的想法。然後，她繼續用它來建模和動畫 3D 物件。這聽起來像是神秘的魔法，隨著文章的繼續，它會變得更加瘋狂，而且它通常是為什麼 CSS 實際上是一種程式語言的最佳解釋之一。
技巧
貓頭鷹選擇器
* + * {
margin-top: 1rem;
}
登入後複製
貓頭鷹選擇器選擇一個項目後面的每個項目。對此應用 margin-top 可以有效地增加專案之間的間隙，就像 grid-gap 一樣，但沒有網格系統。這也意味著它更具可自訂性。您可以覆蓋邊距頂部並使其適應任何類型的內容。想要每個項目之間有 1rem 的空間，但在標題之前有 3rem 的空間？使用貓頭鷹選擇器比在網格中更容易做到這一點。
Kevin Pennekamp 有一篇關於此的深入文章，甚至用偽代碼解釋了他的演算法。
Conditional Styling
Podemos criar toggles em nosso código css que ligam e desligam certas regras com variables e calc. Isso nos dá condições muito versáteis.
.box {
padding: 1rem 1rem 1rem calc(1rem + var(--s) * 4rem);
color: hsl(0, calc(var(--s, 0) * 100%), 80%);
background-color: hsl(0, calc(var(--s, 0) * 100%), 15%);
border: calc(var(--s, 0) * 1px) solid hsl(0, calc(var(--s, 0) * 100%), 80%);
}
.icon {
opacity: calc(var(--s) * 100%);
transform: scale(calc(var(--s) * 100%));
}
登入後複製
Dependendo do valor de --s, .box habilitará ou desabilitará seus alert styles.
Automatic contrast colors
Vamos levar a mesma lógica um passo adiante e criar uma color variable que depende do seu contraste com a background color:
:root {
--theme-hue: 210deg;
--theme-sat: 30%;
--theme-lit: 20%;
--theme-font-threshold: 51%;
--background-color: hsl(var(--theme-hue), var(--theme-sat), var(--theme-lit));
--font-color: hsl(
var(--theme-hue),
var(--theme-sat),
clamp(10%, calc(100% - (var(--theme-lit) - var(theme-font-threshold)) * 1000), 95%)
);
}
登入後複製
Este snippet calcula um background color a partir de valores HSL e uma font color black ou white, invertendo o valor de lightness (luminosidade) do background. Isso por si só pode resultar em baixo contraste de cor (uma fonte cinza de 40% em um background cinza de 60% é praticamente ilegível), então subtrairei um valor threshold (o ponto em que a cor muda de white para black), multiplicarei por um valor insanamente alto como 1000 e farei clamp nele entre 10% e 95%, para obter uma porcentagem de lightness válida no final. Tudo é controlável editando as quatro variáveis no início do snippet.
Este método também pode ser usado para escrever lógica de cores intrincada e themes automáticos, com base apenas em valores HSL.
Limpando as stylesheets
Vamos combinar o que temos até agora para limpar a stylesheet. Ordenando tudo por viewports parece um pouco espaguete, mas ordenar isso por componente não parece nada melhor. Com variables, podemos ter o melhor dos dois mundos:
/* define variables */
:root {
--paragraph-width: 90ch;
--sidebar-width: 30ch;
--layout-s: "header header" "sidebar sidebar" "main main" "footer footer";
--layout-l: "header header" "main sidebar" "footer footer";
--template-s: auto auto minmax(100%, 1fr) auto /
minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
--template-l: auto minmax(100%, 1fr) auto /
minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
--layout: var(--layout-s);
--template: var(--template-s);
--gap-width: 1rem;
}
/* manipula variables por viewport */
@media (min-width: 48rem) {
:root {
--layout: var(--layout-l);
--template: var(--template-l);
}
}
/* realiza o bind no DOM */
body {
display: grid;
grid-template: var(--template);
grid-template-areas: var(--layout);
grid-gap: var(--gap-width);
justify-content: center;
min-height: 100vh;
max-width: calc(
var(--paragraph-width) + var(--sidebar-width) + var(--gap-width)
);
padding: 0 var(--gap-width);
}
登入後複製
Todas as global variables são definidas no topo e ordenadas por viewport. Essa seção efetivamente se torna a Definition of Behavior, esclarecendo questões como:
- Quais aspectos globais da stylesheet temos? Estou pensando em coisas como font size, colors, medidas repetidas, etc.
- Quais aspectos que mudam frequentemente nós temos? Container widths, Grid layouts e similares vêm à mente.
- Como os valores devem mudar entre as viewports? Quais global styles se aplicam a qual viewport?
Abaixo estão as definições de regras, ordenadas por componente. As Media Queries não são mais necessárias aqui, porque elas já estão definidas no topo e colocadas em variables. Podemos simplesmente codificar em nossas stylesheets sem interrupções neste ponto.
Leando o hash parameter
Um caso especial de pseudo classes é o :target selector, que pode ler o hash fragment da URL. Aqui está uma demonstração que usa essa mecânica para simular uma experiência semelhante a SPA:
Eu escrevi um post sobre isso. Só esteja ciente de que isso tem algumas implicações sérias de acessibilidade e precisa de alguma mecânica JavaScript para realmente ser livre de barreiras. Não faça isso em um live environment.
Definindo Variables em JavaScript
Manipular CSS variables se tornou uma ferramenta muito poderosa agora. Também podemos aproveitar isso em JavaScript:
// configura --s em :root
document.documentElement.style.setProperty('--s', e.target.value);
// configura --s scoped para #myID
const el = document.querySelector('#myID');
el.style.setProperty('--s', e.target.value);
// lê variables de um element
const switch = getComputedStyle(el).getPropertyValue('--s');
登入後複製
Os exemplos de codepen acima funcionam exatamente assim.
Resumo
CSS é muito capaz de definir layout systems inteligentes e reativos. Suas estruturas de controle e algoritmos podem ser um pouco estranhos em comparação com outras linguagens, mas eles estão lá e estão à altura da tarefa. Vamos parar de apenas descrever alguns styles e começar a fazer eles funcionar.
Fonte
Artigo escrito por Daniel Schulz
以上是用 CSS 寫邏輯的詳細內容。更多資訊請關注PHP中文網其他相關文章！
