zhouzhongping/wiki
1
0
Fork 0
Code
546e7d3ec1
wiki/work/front-end-engineer/基础/CSS.md

33 KiB
Raw Blame History

title description keywords tags sidebar_position author date
CSS CSS 样式表
CSS
CSS
2 7Wate 2023-10-13

世界的色彩与形状来自于你的手中。

CSS

CSS，全称为层叠样式表（Cascading Style Sheets），是**一种用于描述 HTML 或 XML 文档样式的标记语言。**由于其简洁的语法和强大的功能，CSS 已成为前端开发的核心技术之一。

选择器

**CSS 的选择器是绑定样式到 HTML 元素的关键。**CSS选择器大致可以分为以下几类：

  • 简单选择器：包括元素选择器、类选择器、ID 选择器。
  • 属性选择器：根据元素的属性选择元素。例如，[attr=value] 选择具有特定值的特定属性的元素，[attr^=value] 选择属性值以特定值开始的元素，[attr$=value] 选择属性值以特定值结束的元素，[attr*=value] 选择属性值中包含特定值的元素。
  • 伪类和伪元素选择器：伪类选择器是基于元素的特定状态选择元素，例如 :hover、:focus、:checked 等。伪元素选择器是用于选择元素的特定部分，例如 ::before、::after、::first-line 等。
  • 组合选择器：包括子元素选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器。这些选择器可以与简单选择器组合使用，以选择符合特定关系的元素。
  • 分组选择器：用逗号分隔的列表，可以同时选择多个元素。

常用的 CSS 选择器作用和使用示例：

选择器类型 作用 示例
元素选择器 根据元素名称选择元素 p { color: red; }
类选择器 根据元素的class属性选择元素 .intro { font-size: 20px; }
ID选择器 根据元素的id属性选择元素 #first-paragraph { text-align: center; }
属性选择器 根据元素的属性选择元素 a[target="_blank"] { color: red; }
伪类选择器 根据元素的特定状态选择元素 a:hover { color: red; }
伪元素选择器 选择元素的特定部分 p::first-line { color: blue; }
子元素选择器 选择特定父元素的直接子元素 div > p { margin-left: 20px; }
后代选择器 选择特定元素的所有后代元素 div p { margin-left: 20px; }
相邻兄弟选择器 选择紧接在另一元素后的元素，且二者有相同父元素 h1 + p { margin-top: 50px; }
一般兄弟选择器 选择所有在另一元素之后的兄弟元素，且二者有相同父元素 h1 ~ p { color: green; }
分组选择器 同时选择多个元素 h1, h2, p { color: purple; }

权重计算

CSS 选择器的权重是由选择器的各个部分组成的，又称为选择器的特异性。**特异性的计算是在冲突解决中用来决定哪个样式规则优先应用的一种方式。**计算特异性的基本规则如下：

选择器类型 示例 特异性
内联样式 <div style="..."> 1,0,0,0
ID 选择器 #example 0,1,0,0
类选择器、属性选择器、伪类 .example, [type="radio"], :hover 0,0,1,0
元素选择器、伪元素 div, ::before 0,0,0,1

**特异性的计算方式是逐级相加。**例如，对于选择器 #id .class div:hover，其特异性是 0100 (id选择器) + 0010 (class选择器) + 0001 (元素选择器) + 0010 (伪类) = 0121。

需要注意的是，**!important 规则可以覆盖其他任何特异性计算。**只有比较两个同时使用 !important 的规则时，才会比较特异性。此外，当样式规则的特异性相同时，后出现的规则将覆盖先出现的规则。

以下是一个示例：

<div id="id1" class="class1">
    Hello World
</div>

<style>
    div { color: blue; } /* 特异性 0001 */
    .class1 { color: green; } /* 特异性 0010 */
    #id1 { color: red; } /* 特异性 0100 */
</style>

在这个例子中，文本 Hello World 的颜色将会是红色，因为 #id1 的特异性最高。

层叠基层

**CSS 的全名是 Cascading Style Sheets，其中 Cascading（层叠）指的是如何解决样式冲突的过程。**当多个样式规则应用于同一个元素时，浏览器会根据一系列规则来决定使用哪个样式。这个过程主要依赖于以下三个因素：

  1. 特异性：如前面所述，不同的选择器具有不同的特异性。具有更高特异性的规则会覆盖具有较低特异性的规则。例如，ID 选择器（特异性为 0,1,0,0）会覆盖类选择器（特异性为 0,0,1,0）。

  2. 来源：样式规则的来源也会影响其优先级。例如，用户代理（浏览器）的默认样式具有最低优先级，作者的样式规则优先级较高，而用户自定义的样式规则优先级最高。

  3. 顺序：在具有相同特异性的规则中，后出现的规则会覆盖先出现的规则。

另一方面，CSS 的 继承 是指某些 CSS 属性的值可以从其父元素传递给其子元素。例如，如果你为一个 <div> 元素设置了 color: blue;，那么 <div> 元素的所有子元素（除非它们有自己的 color 规则）都将默认使用蓝色字体。

**需要注意的是，并非所有 CSS 属性都是可继承的。**一些影响布局和盒模型的属性，如 width, height, padding, margin 和 border，是不可继承的。而一些与文字样式和颜色相关的属性，如 color, font, letter-spacing 和 line-height，是可以继承的。如果你想强制一个属性继承其父元素的值，可以使用 inherit 关键字，如 width: inherit;。

盒子模型

**在 CSS 中，所有的 HTML 元素都可以看作是盒子。**当你在设计一个网页时，你实际上是在操作这些盒子。这种观念被称为 盒子模型（Box Model）。

+---------------------------------------------------+
|                      Margin                       |
|  +---------------------------------------------+  |
|  |                   Border                    |  |
|  |  +---------------------------------------+  |  |
|  |  |                Padding                |  |  |
|  |  |  +---------------------------------+  |  |  |
|  |  |  |             Content             |  |  |  |
|  |  |  +---------------------------------+  |  |  |
|  |  |                Padding                |  |  |
|  |  +---------------------------------------+  |  |
|  |                   Border                    |  |
|  +---------------------------------------------+  |
|                      Margin                       |
+---------------------------------------------------+

CSS 的盒子模型主要由四个部分组成：

  1. Content（内容）：这是 HTML 元素的实际内容，如文字、图片等。
  2. Padding（内边距）：包围在内容周围的空间。内边距是透明的。
  3. Border（边框）：包围在内边距和内容周围的边框。边框是可见的，你可以定义其样式、宽度和颜色。
  4. Margin（外边距）：包围在边框和其他元素之间的空间。外边距是透明的。

这些部分一起决定了元素的总尺寸。**元素的 width 和 height 属性默认只包含内容的尺寸，不包括内边距、边框和外边距，这是因为 box-sizing 默认值为 content-box。**但是，你可以通过设置 box-sizing: border-box; 来改变这种行为，使 width 和 height 也包括内边距和边框。

这里是一个样例代码：

div {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

在这个例子中，div 元素的实际宽度是 350px（300px 的内容宽度 + 2 10px 的内边距 + 2 5px 的边框宽度 = 350px），外边距额外增加了 20px 的空间，但不会增加 div 元素本身的宽度。

边框

边框主要由 border 属性控制，这也是一个复合属性，包括以下几个子属性：

属性 描述 示例值
border-width 设置边框的宽度 1px, medium, thick
border-style 设置边框的样式 solid, dashed, dotted, none
border-color 设置边框的颜色 black, #000000, rgb(0,0,0)
border-radius 设置边框的圆角半径 10px, 50% 
.example-border {
    /* 设置边框宽度为 5px */
    border-width: 5px;
    
    /* 设置边框样式为实线 */
    border-style: solid;
    
    /* 设置边框颜色为蓝色 */
    border-color: blue;
    
    /* 设置边框的圆角半径为 10px，使得边框具有圆角效果 */
    border-radius: 10px;
}

背景

背景主要由 background 属性控制，这是一个复合属性，包括以下几个子属性：

属性 描述 示例值
background-color 设置元素的背景颜色 red, #FF0000, rgb(255,0,0)
background-image 设置一个或多个背景图像 url("image.jpg")
background-repeat 设置背景图像是否以及如何重复 no-repeat, repeat-x, repeat-y, repeat
background-position 设置背景图像的起始位置 center, top right, 50% 50%
background-size 设置背景图像的大小 cover, contain, 50% 50% 
.example-background {
    /* 设置背景颜色为浅灰色 */
    background-color: #f8f8f8;

    /* 设置背景图像，这里使用了一个在线的图片 URL */
    background-image: url('https://example.com/image.jpg');
    
    /* 设置背景图像不重复 */
    background-repeat: no-repeat;

    /* 设置背景图像的位置在元素的中央 */
    background-position: center;

    /* 设置背景图像的大小以完全覆盖元素 */
    background-size: cover;
}

文本处理

在 CSS 中，你可以使用各种属性来处理和控制文本的样式。以下是一个 CSS 文本处理示例：

.example-text {
    /* 设置文本颜色为红色 */
    color: red;
    
    /* 设置字体为 Arial */
    font-family: Arial;
    
    /* 设置字体大小为 14px */
    font-size: 14px;
    
    /* 设置字体粗细为粗体 */
    font-weight: bold;
    
    /* 设置字体样式为斜体 */
    font-style: italic;
    
    /* 设置文本居中对齐 */
    text-align: center;
    
    /* 设置下划线装饰线 */
    text-decoration: underline;
    
    /* 设置文本全部转换为大写 */
    text-transform: uppercase;
    
    /* 设置行高为 20px */
    line-height: 20px;
    
    /* 设置字符间距为 2px */
    letter-spacing: 2px;
    
    /* 设置单词间距为 5px */
    word-spacing: 5px;
    
    /* 设置首行文本缩进为 20px */
    text-indent: 20px;
    
    /* 设置不换行 */
    white-space: nowrap;
    
    /* 设置文本阴影，水平偏移 1px，垂直偏移 1px，阴影模糊半径 2px，阴影颜色为黑色 */
    text-shadow: 1px 1px 2px black;
}

以下是一些常用的 CSS 文本属性：

属性 描述 示例值
color 设置文本颜色 red, #FF0000, rgb(255,0,0)
font-family 设置字体 Arial, "Times New Roman", sans-serif
font-size 设置字体大小 12px, 1em, 80%
font-weight 设置字体的粗细 normal, bold, 600
font-style 设置字体样式，如斜体 normal, italic, oblique
text-align 设置文本对齐方式 left, right, center, justify
text-decoration 设置文本装饰线，如下划线 none, underline, overline, line-through
text-transform 设置文本转换，如大写 none, uppercase, lowercase, capitalize
line-height 设置行高 normal, 1.5, 20px
letter-spacing 设置字符间距 normal, 3px, 0.5em
word-spacing 设置单词间距 normal, 10px, 2em
text-indent 设置首行文本缩进 0, 20px, 5%
white-space 设置如何处理元素内的空白 normal, nowrap, pre, pre-wrap, pre-line
text-shadow 设置文本阴影 1px 1px 2px black

溢出内容

在 CSS 中，overflow 属性用于控制当元素的内容超过其指定的宽度和高度时发生的情况。这种情况通常称为溢出。overflow 属性有以下几个值：

  • visible：这是默认值，表示内容会溢出元素的边界框。
  • hidden：如果内容溢出元素的边界框，则该内容会被剪裁，并且其他内容是不可见的。
  • scroll：如果内容溢出元素的边界框，浏览器会添加滚动条以便查看剩余的内容。
  • auto：如果内容溢出元素的边界框，浏览器会根据需要添加滚动条。

另外，还有 overflow-x 和 overflow-y 属性，这两个属性分别用于设置元素的水平和垂直溢出。这些属性有相同的值：visible、hidden、scroll 和 auto。

以下是一些示例：

/* 如果其内容溢出，该内容将被剪裁 */
.example {
    overflow: hidden;
}

/* 如果其内容在垂直方向上溢出，浏览器将添加滚动条 */
.example {
    overflow-y: scroll;
}

/* 如果其内容溢出，浏览器将根据需要添加滚动条 */
.example {
    overflow: auto;
}

需要注意的是，overflow 属性只有在元素的宽度和高度已经明确指定（例如，通过 CSS 或内联样式），并且内容实际上溢出这些指定的尺寸时，才会起作用。

单位和值

在 CSS 中，我们经常需要为各种属性提供值，这些值可能需要单位。下面是一些常见的 CSS 单位和值：

类型 单位 说明
相对长度 em 相对于父元素的字体大小
相对长度 rem 相对于根元素（通常是 <html>）的字体大小
相对长度 % 相对于父元素的大小
绝对长度 px 屏幕上的一个点
绝对长度 cm, mm, in 在屏幕上的大小可能会因设备而异，但在打印中很有用
其他单位 vw 相对于视口的宽度，"1vw" 等于视口宽度的 1%
其他单位 vh 相对于视口的高度，"1vh" 等于视口高度的 1%
其他单位 vmin 和 vmax 分别是视口宽度和高度中较小和较大的值的百分比
颜色值 Hexadecimal 十六进制，如 "#FF0000" 代表红色
颜色值 RGB 如 "rgb(255, 0, 0)" 代表红色
颜色值 RGBA 增加了一个 alpha (透明度) 值，如 "rgba(255, 0, 0, 0.5)" 代表半透明的红色
颜色值 HSL 使用色相（hue）、饱和度（saturation）和亮度（lightness）来指定颜色，如 "hsl(0, 100%, 50%)" 代表红色
颜色值 HSLA 与 HSL 类似，但增加了 alpha (透明度) 值，如 "hsla(0, 100%, 50%, 0.5)" 代表半透明的红色
关键字值 display 可以接受 "block", "inline", "inline-block", "none" 等值
关键字值 position 可以接受 "static", "relative", "absolute", "fixed" 等值

布局技巧

在 CSS 的世界里，布局是最重要的技巧之一。**Flexbox（弹性盒子）和 Grid（网格）布局是两种现代且强大的布局方法。**Flexbox 主要用于在一维空间（行或列）内对元素进行布局，非常适合用于组件和小型布局。而 Grid 则主要用于在二维空间（行和列）内对元素进行布局，非常适合用于大型布局项目，如整个页面布局。

Display

CSS 中 display 属性用于控制元素的显示类型。以下是一些常见的 display 属性值：

属性值 描述 示例元素
block 元素作为块级元素显示，前后会有换行符。 <div>, <p>, <h1>-<h6> 等
inline 元素作为内联元素显示，元素前后不会产生换行。 <span>, <a>, <img> 等
inline-block 元素作为内联块级元素显示，可以和其他元素在同一行显示，但内部可以像块级元素一样设置宽度和高度。 -
none 元素不会被显示。 -
flex 元素作为弹性盒子模型显示，用于在一维空间上布局项目，能够管理和分配空间和对齐内容。 -
grid 元素作为网格容器显示，用于在二维空间上进行布局。 -

以下是一些使用 display 属性的示例：

/* 元素设置为块级元素 */
.example {
    display: block;
}

/* 元素设置为内联元素 */
.example {
    display: inline;
}

/* 元素设置为内联块级元素 */
.example {
    display: inline-block;
}

/* 元素设置为不显示 */
.example {
    display: none;
}

/* 元素设置为弹性盒子模型 */
.example {
    display: flex;
}

/* 元素设置为网格模型 */
.example {
    display: grid;
}

Flexbox

**Flexbox 是一种一维布局模型，主要用于在一个维度（行或列）上对元素进行排列。**只需要简单的设置 display: flex;，一个元素就可以变为弹性容器，其子元素会成为弹性项目。这种布局是响应式的，这意味着项目的大小和位置可以根据父容器的大小动态改变。

假设我们有一个包含三个子项的容器：

<style>
    .flex-container {
      display: flex;
    }
</style>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

默认情况下，这会让这三个子项并排显示，并填充整个容器宽度。

|   Flex Container  |
| 1 |     2     | 3 |

Flexbox 布局中的一些常用属性：

属性 作用 示例
display 定义一个弹性容器 .container { display: flex; }
flex-direction 定义项目的排列方向 .container { flex-direction: row; }
justify-content 定义项目在主轴上的对齐方式 .container { justify-content: space-between; }
align-items 定义项目在交叉轴上的对齐方式 .container { align-items: center; }
flex-wrap 定义项目是否换行 .container { flex-wrap: wrap; }
flex 定义项目的增长、缩小和基本大小 .item { flex: 1 1 auto; }

Grid

相较于 Flexbox 的一维布局，**Grid 布局则是一个二维布局模型，可以同时在行和列两个维度上对元素进行排列。**通过设置 display: grid;，一个元素就可以变为网格容器，其子元素会成为网格项目。Grid 布局非常适合用于构建符合网格的复杂界面。

假设我们有一个包含九个子项的容器：

<style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
</style>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

这会将子项布局为一个 3x3 的网格，如下所示：

|  Grid Container |
|  1  |  2  |  3  |
|  4  |  5  |  6  |
|  7  |  8  |  9  |

Grid 布局中的一些常用属性：

属性 作用 示例
display 定义一个网格容器 .container { display: grid; }
grid-template-columns / grid-template-rows 定义列宽/行高 .container { grid-template-columns: 1fr 1fr; }
grid-column / grid-row 定义项目的列/行位置 .item { grid-column: 1 / 2; }
grid-gap 定义列间隔/行间隔 .container { grid-gap: 10px; }
justify-items / align-items 定义项目在单元格中的对齐方式 .container { justify-items: center; }
grid-auto-flow 定义项目的排列方式 .container { grid-auto-flow: dense; }

Position

CSS 定位（Position）非常强大，它可以用于创建各种复杂的布局。**但是，请注意，过度使用 absolute 或 fixed 定位可能会导致布局难以管理，尤其是在响应式设计中。**在可能的情况下，使用 Flexbox 或 Grid 通常是更好的选择。

static

**static 是元素的默认定位方式。**这种定位方式下，元素会按照正常的文档流进行布局。static 定位的元素不会受到 top、bottom、left 或 right 属性的影响。

div {
    position: static;
}

relative

**relative 定位的元素会相对于它在正常文档流中的位置进行定位。**例如，设置 left: 20px 会使元素向右移动 20px。

div {
    position: relative;
    left: 20px;
}

absolute

**absolute 定位的元素会相对于最近的非 static 定位的祖先元素（如果存在的话）进行定位。**如果没有这样的祖先元素，那么它会相对于 initial containing block 进行定位。absolute 定位的元素会从正常的文档流中移除，并不会影响到其他元素的布局。

div {
    position: absolute;
    top: 20px;
    right: 0;
}

fixed

fixed 定位的元素会相对于浏览器窗口进行定位，即使页面滚动，它也始终保持在同一位置。fixed 定位的元素会从正常的文档流中移除，并不会影响到其他元素的布局。

div {
    position: fixed;
    bottom: 0;
    right: 0;
}

sticky

**sticky 定位是相对定位和固定定位的混合类型。**元素在滚动到某个位置前为相对定位，之后为固定定位。

div {
    position: sticky;
    top: 0;
}

过渡与动画

在 CSS 中，动画和过渡都是创建动态效果的重要工具，它们可以在提升用户体验和增强网页视觉效果方面发挥重要作用。

transition

过渡是当元素从一个样式逐渐改变为另一个样式时产生的效果。

transition 属性是一个复合属性，用于设置四个过渡效果的属性，包括 transition-property，transition-duration，transition-timing-function 和 transition-delay。这些属性可以单独使用，也可以组合在一起使用。

例如，你可以创建一个当鼠标悬停时颜色逐渐改变的按钮：

button {
    background-color: blue;
    transition: background-color 2s;
}

button:hover {
    background-color: red;
}
属性 描述 示例值
transition-property 指定应用过渡效果的 CSS 属性。可以是任何 CSS 属性，如 background-color，height，all 等。 background-color
transition-duration 指定过渡效果花费的时间，以秒（s）或毫秒（ms）为单位。 2s
transition-timing-function 规定过渡效果的速度曲线。可选值有 linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)。 ease-in
transition-delay 指定过渡效果何时开始。时间以秒（s）或毫秒（ms）为单位。 1s

animation

动画是元素从一系列样式中逐渐改变的过程，可以使用 @keyframes 规则和 animation 属性来创建动画。@keyframes 本身并没有属性，但是你可以在 **@keyframes 规则中定义动画的各个阶段（关键帧）**和它们的样式。

关键词 描述 示例值
@keyframes 用于创建新的动画规则。它的值是一个动画名称和一个包含关键帧的块。 @keyframes myAnimation {...}
0% 或 from 表示动画的开始阶段。你可以在这里定义元素的初始样式。 0% { opacity: 0; }
100% 或 to 表示动画的结束阶段。你可以在这里定义元素的最终样式。 100% { opacity: 1; }
n% 表示动画的中间阶段。n 是一个介于 0 和 100 之间的百分数。你可以在这里定义元素在动画中间的样式。 50% { opacity: 0.5; }

**而 animation 属性则用于将动画绑定到特定元素。**例如，你可以创建一个循环移动的方块：

@keyframes move {
    0% { left: 0; }
    50% { left: 200px; }
    100% { left: 0; }
}

div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    animation: move 2s infinite;
}

在这个例子中，方块将在 2 秒内从左移动到右，然后再移动回左边，这个过程将无限循环。

响应式设计与媒体查询

**响应式设计是一种使网站能够适应各种屏幕尺寸和设备的设计和开发方法。**在响应式设计中，布局、图片、文字和其他元素都会根据浏览器窗口的大小自动调整。

响应式设计的主要原则包括：

  • 流式布局：元素的宽度以百分比表示，以便能够随着浏览器窗口的大小变化而变化。
  • 灵活的图片和媒体：这些元素的大小也是以百分比表示，以保持其在页面中的比例不变。
  • 媒体查询：根据设备的特性，如宽度、高度和方向等，应用不同的样式规则。

媒体查询是实现响应式设计的主要工具。媒体查询允许我们根据设备的特性，如宽度、高度和方向等，应用不同的样式规则。在创建响应式布局时，我们也可以使用视口单位（vw、vh、vmin、vmax）。这些单位是相对于视口（即浏览器窗口）的大小，根据视口的大小动态变化，非常适合用于创建响应式设计。

媒体查询的基本语法如下：

@media media-type and (media-feature) {
  /* CSS rules go here */
}
  • media-type 是可选的，表示媒体类型，如 screen、print等。
  • media-feature 表示要查询的设备特性，如 width、height 等。

例如，我们可以写一个媒体查询，当浏览器窗口的宽度小于 600 像素时，让主要内容的字体大小增大，以便于在小屏幕设备上阅读。

@media screen and (max-width: 600px) {
  .main-content {
    font-size: 18px;
  }
}

在这个例子中，.main-content { font-size: 18px; } 这条样式规则只会在媒体类型为 screen 并且浏览器窗口的最大宽度为 600px 时应用。以下是一些常见的媒体查询的例子：

媒体特性 描述 示例
max-width 屏幕宽度的最大值 @media (max-width: 600px) {...}
min-width 屏幕宽度的最小值 @media (min-width: 768px) {...}
max-height 屏幕高度的最大值 @media (max-height: 400px) {...}
min-height 屏幕高度的最小值 @media (min-height: 500px) {...}
orientation 设备屏幕的方向（横向或纵向） @media (orientation: landscape) {...}
aspect-ratio 视窗的宽高比 @media (aspect-ratio: 16/9) {...}
resolution 设备的像素密度 @media (min-resolution: 300dpi) {...}
color 设备的颜色位数 @media (color: 8) {...}
monochrome 黑白设备的像素位数 @media (monochrome: 2) {...}

CSS 预处理器

**CSS 预处理器是一种脚本语言，它扩展了 CSS 的功能，增加了变量、嵌套、混合和函数等特性，使得 CSS 更加强大和易于维护。**预处理器将扩展的 CSS 语法转换为普通的 CSS，以便浏览器可以解析。

SASS 和 LESS 都是流行的 CSS 预处理器，它们提供了许多强大的特性，如变量、嵌套、混合和函数等。SASS 支持两种语法：旧版的缩进语法和新版的 SCSS 语法，而 LESS 的语法更接近于原生 CSS。此外，SASS 提供了更多高级的特性，比如条件语句、循环等。在选择哪种预处理器时，你可以根据你的需求和喜好来决定。

SASS

SASS（Syntactically Awesome StyleSheets）是一种 CSS 预处理器，它提供了许多有用的特性，如变量、嵌套、混合和函数等。SASS 支持两种语法：旧版的缩进语法（Indented Syntax）和新版的 SCSS。旧版的语法更简洁，但新版的 SCSS 语法更接近于原生 CSS。

以下是一个使用 SASS 特性的例子：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

.container {
  width: 100%;

  .sidebar {
    width: 30%;
  }

  .content {
    width: 70%;
  }
}

LESS

LESS 是另一种流行的 CSS 预处理器，它的语法和 CSS 非常相似，所以学习曲线相对较平缓。LESS 提供了变量、嵌套、混合、函数和运算等特性。

以下是一个使用 LESS 特性的例子：

@base-color: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base-color, 5%);
  border-color: lighten(@base-color, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

总的来说，CSS 预处理器如 SASS 和 LESS 可以让你的 CSS 更加强大和易于维护，它们是现代前端开发工具链的重要组成部分。