条件语句与循环

条件语句与循环在CSS中的应用

CSS虽然主要用来描述网页的样式，但通过一些特性也能实现类似编程语言中的条件判断和循环逻辑。这些特性让CSS变得更加强大和灵活，能够根据不同的条件应用不同的样式，或者批量处理相似的样式规则。

CSS中的条件逻辑

CSS本身没有传统编程语言中的if-else语句，但可以通过以下方式实现条件判断：

1. 媒体查询：根据设备特性应用不同的样式

/* 当屏幕宽度小于600px时应用的样式 */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

2. 特性查询：检测浏览器是否支持某个CSS特性

/* 只有当浏览器支持flexbox时才应用这些样式 */
@supports (display: flex) {
  .nav {
    display: flex;
  }
}

3. 选择器逻辑：通过选择器组合实现条件判断

/* 只有当元素同时有.active和.highlight类时才应用样式 */
.active.highlight {
  background-color: yellow;
}

CSS预处理器中的条件语句

Sass/Less等CSS预处理器提供了更强大的条件语句功能：

$theme: dark;

body {
  @if $theme == dark {
    background: #333;
    color: white;
  } @else if $theme == light {
    background: white;
    color: #333;
  } @else {
    background: gray;
    color: black;
  }
}

CSS中的循环逻辑

原生CSS目前没有循环结构，但CSS预处理器提供了多种循环方式：

1. @for循环（Sass）：

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}

2. @each循环（遍历列表）：

$colors: red, green, blue, yellow;

@each $color in $colors {
  .bg-#{$color} {
    background-color: $color;
  }
}

3. @while循环：

$i: 1;
@while $i < 6 {
  .mt-#{$i} {
    margin-top: 5px * $i;
  }
  $i: $i + 1;
}

CSS变量与条件样式结合

CSS自定义属性（变量）可以与条件逻辑结合使用：

:root {
  --primary-color: #3498db;
  --secondary-color: #e74c3c;
}

.button {
  background-color: var(--primary-color);
}

.button.danger {
  background-color: var(--secondary-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #2980b9;
    --secondary-color: #c0392b;
  }
}

伪类选择器实现状态条件

CSS伪类选择器可以根据元素状态应用不同样式：

/* 未访问链接 */
a:link {
  color: blue;
}

/* 已访问链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停 */
a:hover {
  color: red;
}

/* 获得焦点 */
input:focus {
  border-color: green;
}

/* 被选中 */
input:checked {
  background-color: yellow;
}

属性选择器实现条件样式

根据元素属性值应用不同样式：

/* 所有包含target属性的链接 */
a[target] {
  color: orange;
}

/* target属性值为_blank的链接 */
a[target="_blank"] {
  font-weight: bold;
}

/* href属性以https开头的链接 */
a[href^="https"] {
  border-left: 2px solid green;
}

/* href属性包含example的链接 */
a[href*="example"] {
  text-decoration: underline;
}

CSS计数器实现循环效果

虽然不算真正的循环，但CSS计数器可以创建编号样式：

ol {
  counter-reset: section;
}

li {
  counter-increment: section;
}

li::before {
  content: counters(section, ".") " ";
}

未来CSS中的条件与循环

CSS工作组正在考虑更强大的条件与循环功能：

1. @when规则（提案阶段）：

@when media(width >= 600px) and media(pointer: fine) {
  .card {
    width: 50%;
  }
}

2. 容器查询（部分浏览器已支持）：

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

实际应用案例

1. 响应式网格系统：

$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    width: percentage($i / $columns);
  }
}

@media (max-width: 768px) {
  @for $i from 1 through $columns {
    .col-sm-#{$i} {
      width: percentage($i / $columns);
    }
  }
}

2. 主题切换系统：

$themes: (
  light: (
    bg: white,
    text: black,
    primary: blue
  ),
  dark: (
    bg: #333,
    text: white,
    primary: lightblue
  )
);

@mixin theme($name) {
  $theme: map-get($themes, $name);
  
  body {
    background-color: map-get($theme, bg);
    color: map-get($theme, text);
  }
  
  .btn-primary {
    background-color: map-get($theme, primary);
  }
}

.light-theme {
  @include theme(light);
}

.dark-theme {
  @include theme(dark);
}

3. 动画序列：

@for $i from 1 through 5 {
  .item-#{$i} {
    animation: fadeIn 0.5s ease-in-out #{$i * 0.2}s forwards;
    opacity: 0;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}