在现代前端开发中，CSS（层叠样式表）是用于控制网页外观的主要技术。然而，随着项目的复杂度增加，传统的CSS编写方式逐渐显现出其局限性，如变量复用、嵌套规则、模块化管理等需求难以满足。为此，出现了CSS预处理器，如Sass和Less，它们提供了更强大的功能，使得CSS编写更加高效和灵活。
回顾
CSS是一种用于描述HTMLz或XML（包括各种XML方言如SVG、XUL等）文档样式的样式表语言。它允许开发者定义元素的颜色、字体、布局等属性，从而实现网页的视觉 效果。
CSS的基本特点
- **层叠性：**多个样式规则应用于同一个元素时，浏览器会根据优先级规则决定最终应用哪个样式。
- 内联样式 > ID 选择器 > 类选择器 > 标签选择器：内联样式（直接在 HTML 标签中定义的样式）具有最高的优先级，其次是 ID 选择器，然后是类选择器，最后是标签选择器。
- !important：开发者可以使用
!important关键字来强制某个样式规则的优先级，使其高于其他规则。 - 继承：某些样式属性（如
color、font-size等）会从父元素继承到子元素，除非子元素有明确的样式声明。
- 继承性：如果父元素设置了某种样式，子元素也会自动应用该样式，除非子元素有明确的样式声明覆盖它。
- 文本相关属性：如
color、font-family、font-size、line-height等。 - 列表相关属性：如
list-style。 - 表格相关属性：如
border-collapse
- 文本相关属性：如
- 选择器：可以根据不同的条件选择元素。
- 标签选择器：选择特定的 HTML 标签。例如，
p选择所有<p>标签。 - 类选择器：选择具有特定类名的元素。例如，
.my-class选择所有带有class="my-class"的元素。 - ID 选择器：选择具有特定 ID 的元素。例如，
#my-id选择唯一带有id="my-id"的元素。 - 伪类选择器：选择处于特定状态的元素。例如，
:hover选择用户悬停时的元素，:nth-child()选择特定位置的子元素。 - 属性选择器：选择具有特定属性或属性值的元素。例如，
input[type="text"]选择所有type="text"的<input>元素。 - 组合选择器：通过组合多个选择器来选择更复杂的元素。例如，
div p选择所有位于<div>内的<p>元素。
- 标签选择器：选择特定的 HTML 标签。例如，
CSS-变量
变量：CSS允许开发者在样式表中定义可重用的值，这些变量可以在整个样式表中使用，并且可以在运行时动态修改。CSS 变量为样式管理提供了更大的灵活性和可维护性，尤其是在大型项目中。
定义CSS变量
CSS 变量的定义使用 -- 前缀，表示这是一个自定义属性。变量可以在任何选择器内部定义，但通常建议在 :root 或 html 选择器中定义全局变量，以便在整个文档中使用。
css">:root {--variable-name: value;
}
:root 是一个伪类，表示文档的根元素（即 <html>），因此在 :root 中定义的变量可以在整个文档中访问。
--variable-name 是变量的名称，必须以 -- 开头。
value 是变量的具体值，可以是颜色、长度、字体等任何有效的 CSS 值
css">:root {--primary-color: #3498db;--font-size-base: 16px;--border-radius: 5px;
}
- 要使用 CSS 变量，需要使用
var()函数。var()函数接受两个参数：- 第一个参数是要使用的变量名称。
- 第二个参数（可选）是默认值，如果变量未定义或无效时将使用该默认值。
css">property: var(--variable-name, fallback-value);
property 是要应用样式的 CSS 属性。
--variable-name 是要使用的变量名称。
fallback-value 是可选的默认值，当变量未定义或无效时使用。
css">:root {--primary-color: #3498db;
}body {background-color: var(--primary-color, #f0f0f0); /* 如果 --primary-color 未定义，则使用 #f0f0f0 */
}button {background-color: var(--primary-color);color: white;padding: 10px 20px;border-radius: var(--border-radius, 10px); /* 如果 --border-radius 未定义，则使用 10px */
}
-
局部变量
虽然全局变量（在
:root中定义）可以在整个文档中使用，但你也可以在特定的选择器中定义局部变量，这些变量只在该选择器的作用范围内有效。
css">:root {--primary-color: #3498db;
}.button-group {--primary-color: #e74c3c; /* 局部变量，仅在 .button-group 内生效 */
}button {background-color: var(--primary-color);color: white;padding: 10px 20px;border-radius: var(--border-radius, 10px);
}
--primary-color 在 :root 中定义为全局变量，但在 .button-group 中定义了一个局部变量，覆盖了全局变量的值。因此，.button-group 内的按钮将使用 #e74c3c 作为背景颜色，而其他地方的按钮将使用 #3498db。
-
嵌套变量
在一个变量中引用另一个变量。
css">:root {--base-color: #3498db;--lighter-color: rgba(var(--rgb), 0.8);--darker-color: rgba(var(--rgb), 0.2);--rgb: 52, 152, 219; /* RGB 值 */
}body {background-color: var(--base-color);
}header {background-color: var(--lighter-color);
}footer {background-color: var(--darker-color);
}
CSS-Calc计算函数
- 基本语法
css">property: calc(expression);
property：要应用样式的 CSS 属性（如 width、height、margin、padding等）。
expression：一个数学表达式，可以包含加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 操作符。表达式中的值可以是长度、百分比、数字或其他支持的单位。
- 使用示例
css">div {width: calc(100% - 20px); /* 宽度为容器的 100%，减去 20px 的边距 */
}
css">header {width: calc(80vw + 50px); /* 宽度为视口宽度的 80%，加上 50px */
}
css">/* 结合变量使用 */
:root {--base-padding: 10px;--gap: 20px;
}.container {padding: calc(var(--base-padding) + var(--gap)); /* 内边距为 --base-padding 加上 --gap */
}
css">/* calc嵌套 */
.container {width: calc(calc(100% - 20px) / 2); /* 先计算 100% - 20px，然后将其除以 2 */
}
- 注意事项
- 在
calc()中，操作符两侧必须有空格。例如，calc(100% - 20px)是有效的，而calc(100%-20px)会导致解析错误。 - 除法时，被除数不能为 0，否则会引发错误。
- 在
Sass
Sass 是一种CSS预处理器，它扩展了CSS的功能，支持变量、嵌套、混合、继承等特性。Sass有两种语法：SCSS（Sassy CSS）和缩进语法（.sass）。SCSS语法与CSS非常相似，易于学习和使用。
Sass的特性
变量
可以定义变量来存储颜色、尺寸等值，方便全局管理和修改。
css">$primary-color: #3498db;
.button {background-color: $primary-color;
}
嵌套
允许在一个选择器内部嵌套其他选择器，使代码更加简洁和有组织。
css">.nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}
混合
- 通过
@mixin可以定义一组样式，然后在其他地方重用。 @mixin是一种在SCSS中定义可重用的样式代码块的方式。它类似于函数，可以接受参数，并且可以在需要的地方调用。- 使用
@mixin可以将一组样式代码封装起来，然后在需要的地方使用@include来引入这些样式代码。这样可以避免重复编写相同的样式代码，提高代码的复用性和可维护性。
css">@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;
}.box { @include border-radius(10px); }
css">@mixin button-style($bg-color, $text-color) {background-color: $bg-color;color: $text-color;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}.button {@include button-style(#f00, #fff);
}
我们可以在项目中的多个地方使用.button类，并且它们都会应用相同的样式。如果需要修改按钮的样式，只需要修改@mixin的定义即可，而不需要逐个修改每个使用了该样式的地方。
继承
可以让一个选择器继承另一个选择器的样式。
css">.message {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {@extend .message;border-color: green;
}
貌似混合和继承差不多，都是引用一部分样式代码块来达到代码复用的效果，怎么选择？（继承不可传递参数，不能做个性化设置，但混合支持）。
Less
Less 是另一种流行的CSS预处理器，它的语法与Sass类似，但更简洁。Less同样支持变量、嵌套、混合、函数等功能。
Less的特性
变量
与Sass类似，可以定义变量来存储常用的值。
css">@primary-color: #3498db;
.button {background-color: @primary-color;
}
嵌套
支持嵌套选择器，使代码结构更加清晰。
css">.nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}
混合
通过.mixin()可以定义和重用样式。
- 使用语法——不需要include
css">.mixin-name(@param1, @param2) {// 样式规则
}.class-name {.mixin-name(value1, value2);
}
- 使用示例
css">// 定义一个简单的 @mixin
.border-radius( @br:5px ) {border-radius: @br;
}// 调用 @mixin
.button {.border-radius(10px);background-color: blue;color: white;
}
继承
通过:extend()来完成对样式的继承
- 使用示例
css">.btn-submit {background-color:#66dd7a;border-radius:6px;width: 50px;height: 20px;
}.btn2 {&:extend(.btn-submit);width: 60px;
}
函数
提供了一些内置函数，如颜色操作、数学计算等。
颜色操作
lighten(@color, @percentage)：使颜色变亮。darken(@color, @percentage)：使颜色变暗。saturate(@color, @percentage)：增加颜色的饱和度。desaturate(@color, @percentage)：减少颜色的饱和度。fadein(@color, @percentage)：增加颜色的透明度（alpha 值）。fadeout(@color, @percentage)：减少颜色的透明度（alpha 值）。fade(@color, @percentage)：设置颜色的透明度（alpha 值）。
css">@base-color: #f0f0f0;
.box {color: lighten(@base-color, 20%);
}
数学计算
css">@value: 3.7;.ceiling: ceil(@value); // 4
.flooring: floor(@value); // 3
.rounded: round(@value); // 4
![[ClickHouse 运维系列] 数据 TTL 学习笔记整理](/images/no-images.jpg)
