CSS 전처리기

CSS 전처리기란 무엇인가요? 일반적으로 그들은 CSS를 작성할 때 해결하기 어려운 문제를 해결하기 위해 CSS 기반의 자체 DSL(도메인 특정 언어) 세트를 확장했습니다.

• 중첩할 수 없는 등 구문이 충분히 강력하지 않습니다. 쓰기, 이로 인해 모듈 개발 필요 반복 선택자를 많이 작성
• 변수 및 합리적인 스타일 재사용 메커니즘이 없으므로 논리적으로 관련된 속성 값을 리터럴 형식으로 반복적으로 출력해야 하므로 읽기가 어렵습니다. 유지하다.

추상적인 능력으로 귀결됩니다. 따라서 이것이 CSS 전처리기의 주요 목표를 결정합니다. 즉, CSS에서 누락된 스타일 레이어 재사용 메커니즘을 제공하고, 중복 코드를 줄이고, 스타일 코드의 유지 관리성을 향상시키는 것입니다. 이것은 금상첨화는 아니지만 시기적절한 도움입니다.

그러나 CSS 전처리기는 만병통치약이 아닙니다. CSS의 장점은 언제 어디서나 쉽게 사용하고 디버깅할 수 있다는 것입니다. 사전 컴파일된 CSS 단계를 추가하면 개발 작업 흐름에 추가 링크가 추가되고 디버깅이 더욱 번거로워집니다. 더 큰 문제는 사전 컴파일이 쉽게 하위 선택자의 남용으로 이어질 수 있다는 것입니다. 따라서 CSS 전처리기를 사용할 때는 이러한 문제가 발생하지 않도록 주의하세요.

$로 시작하는 Sass 변수는 CSS 표준 구문과 충돌할 가능성이 적습니다. Less의 변수는 @로 시작합니다. 후속 사양 업데이트의 새로운 구문과 충돌하기 쉽지만 이론상으로는 CSS 사양에 @a:b와 같은 규칙이 도입되지 않습니다. 문제는 크지 않을 것이다. 또한 사양을 작성할 때 기존의 많은 구현을 참조할 것입니다. @a: b 这样的规则，问题也不大。而且规范制定的时候也会参考很多现有的实现。

Sass 和 Less 的变量机制有很大的不同，Sass 是类似 JS 的块级作用域一样，可以在作用域内重新赋值而不影响外部，Less 是以全局的最后一次赋值为准。SASS 和 SCSS 只是两种语法风格而已，SCSS 更贴近 CSS 语法，前端写起来更舒服。Less 和 Sass 最常用的部分并没有明显的区别，不用太在意该用哪个，Just pick one。至于公司用哪个，跟着用就行，不出大问题不用考虑换。

文件切分

页面越来越复杂，需要加载的 CSS 文件也越来越大，我们有必要把大文件切分开来，否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令，或在 HTML 中加载多个 CSS 文件，这些方案通常不能满足性能要求。

CSS 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。

模块化

把文件切分的思路再向前推进一步，就是“模块化”。一个大的 CSS 文件在合理切分之后，所产生的这些小文件的相互关系应该是一个树形结构。

树形的根结节一般称作“入口文件”，树形的其它节点一般称作“模块文件”。入口文件通常会依赖多个模块文件，各个模块文件也可能会依赖其它更末端的模块，从而构成整个树形。

以下是一个简单的示例：

entry.less
 ├─ base.less
 │   ├─ normalize.less
 │   └─ reset.less
 ├─ layout.less
 │   ├─ header.less
 │   │   └─ nav.less
 │   └─ footer.less
 ├─ section-foo.less
 ├─ section-bar.less
 └─ ...复制代码

入口文件 entry.less

Sass와 Less의 변수 메커니즘은 매우 다릅니다. Sass는 JS의 블록 수준 범위와 유사합니다. Less는 외부 세계에 영향을 주지 않고 범위 내에서 값을 재할당할 수 있습니다. SASS와 SCSS는 두 가지 구문 스타일일 뿐입니다. SCSS는 CSS 구문에 더 가깝고 프런트 엔드에 작성하는 것이 더 편합니다. Less와 Sass에서 가장 일반적으로 사용되는 부분 사이에는 뚜렷한 차이가 없으므로 어떤 것을 사용할지 너무 걱정하지 말고 하나만 선택하세요. 회사에서 사용하는 제품은 그대로 사용하세요. 큰 문제가 없다면 변경하지 마세요.

파일 분할

페이지가 점점 빨라지고 있습니다 점점 더 복잡해질수록 로드해야 하는 CSS 파일의 크기가 커집니다. 대용량 파일을 분리해야 합니다. 그렇지 않으면 유지 관리가 어려워집니다. 기존 CSS 파일 분할 솔루션은 기본적으로 CSS 기본 @import 지시문이거나 HTML에서 여러 CSS 파일을 로드하는 것입니다. 이러한 솔루션은 일반적으로 성능 요구 사항을 충족할 수 없습니다.

CSS 전처리기는 @import 지시문의 기능을 확장하고 컴파일 프로세스를 통해 분할된 파일을 하나의 큰 파일로 다시 병합합니다. 이는 대용량 파일의 유지 관리가 불편한 문제를 해결하는 한편, 작은 파일 묶음을 로드할 때 발생하는 성능 문제도 해결합니다.

모듈화

파일 분할 개념을 한 단계 더 발전시킨 것이 "모듈화"입니다. 큰 CSS 파일이 합리적으로 분할된 후 결과로 나오는 작은 파일 간의 관계는 트리 구조가 되어야 합니다.

트리의 루트 노드를 일반적으로 "항목 파일"이라고 하며, 트리의 다른 노드를 일반적으로 "모듈 파일"이라고 합니다. 항목 파일은 일반적으로 여러 모듈 파일에 종속되며 각 모듈 파일은 다른 터미널 모듈에도 종속되어 전체 트리를 구성할 수 있습니다.

다음은 간단한 예입니다.

.wrapper {	overflow-y: hidden;	line-height: 1.5;	max-height: 4.5em;  /* = 1.5 x 3 */}复制代码

항목 파일 entry.less는 컴파일 중에 필요한 모듈을 소개하고, Entry.css를 생성한 다음 페이지에서 참조됩니다.

모듈 메커니즘이 있는 다른 프로그래밍 언어를 사용해 본 적이 있다면 모듈화가 코드를 구성하는 매우 좋은 방법이자 개발자가 코드 구조를 설계하는 중요한 수단이라는 것을 이미 깊이 이해하고 있어야 합니다. 모듈은 코드 계층화, 재사용 및 종속성 관리를 명확하게 구현할 수 있으므로 CSS 개발 프로세스에서 현대 프로그램 개발의 편리함을 누릴 수 있습니다.

선택기 중첩

선택기 중첩은 파일 내의 코드 구성 방법으로, 일련의 관련 규칙이 계층적 관계를 나타낼 수 있도록 합니다.

🎜Variables🎜🎜변경이 발생하기 전에 CSS의 모든 속성 값은 "마법의 숫자"입니다. 이 값이 어디서 왔는지, 그 의미가 무엇인지 알 수 없습니다. 변수가 있으면 이러한 "마법의 숫자" 이름을 지정하여 기억, 읽기 및 이해를 용이하게 할 수 있습니다. 🎜🎜다음으로 특정 값이 여러 곳에서 사용될 때 변수는 이러한 중복을 제거하고 코드를 더욱 DRY하게 만들 수 있는 간단하고 효과적인 추상화 방법이라는 것을 알게 될 것입니다. 🎜🎜변수를 사용하면 개발자가 웹 사이트의 시각적 스타일을 더 쉽게 통일할 수 있고 "스킨 변경"과 같은 요구 사항도 더 쉽게 만들 수 있습니다. 🎜🎜Operation🎜🎜변수만 있는 것이 아니라 연산도 필요합니다. 변수가 값을 의미있게 만들면 작업은 값을 값과 연결할 수 있습니다. 일부 속성의 값은 실제로 다른 속성의 값과 밀접하게 관련되어 있습니다. CSS 구문은 전처리 언어에서 이 관계를 표현할 수 없으며, 이 관계를 나타내기 위해 변수와 표현식을 사용할 수 있습니다. 🎜🎜예를 들어 컨테이너는 최대 3줄의 텍스트만 표시해야 합니다. 과거에는 일반적으로 다음과 같이 작성했습니다.

.wrapper {	overflow-y: hidden;	line-height: 1.5;	max-height: 4.5em;  /* = 1.5 x 3 */}复制代码

大家可以发现，我们只能用注释来表达 max-height 的值是怎么来的，而且注释中 3 这样的值也是幻数，还需要进一步解释。未来当行高或行数发生变化的时候，max-height 的值和注释中的算式也需要同步更新，维护起来很不方便。

接下来我们用预处理语言来改良一下：

.wrapper
	$max-lines = 3
	$line-height = 1.5

	overflow-y: hidden
	line-height: $line-height
	max-height: unit($line-height * $max-lines, 'em')复制代码

乍一看，代码行数似乎变多了，但代码的意图却更加清楚了——不需要任何注释就把整件事情说清楚了。在后期维护时，只要修改那两个变量就可以了。

值得一提的是，这种写法还带来另一个好处。$line-height 这个变量可以是 .wrapper 自己定义的局部变量（比如上面那段代码），也可以从更上层的作用域获取：

$line-height = 1.5  // 全局统一行高

body
	line-height: $line-height

.wrapper
	$max-lines = 3

	max-height: unit($line-height * $max-lines, 'em')
	overflow-y: hidden复制代码

这意味着 .wrapper 可以向祖先继承行高，而不需要为这个“只显示三行”的需求把自己的行高写死。有了运算，我们就有能力表达属性与属性之间的关联，它令我们的代码更加灵活、更加 DRY。

函数

把常用的运算操作抽象出来，我们就得到了函数。

开发者可以自定义函数，预处理器自己也内置了大量的函数。最常用的内置函数应该就是颜色的运算函数了吧！有了它们，我们甚至都不需要打开 Photoshop 来调色，就可以得到某个颜色的同色系变种了。

举个例子，我们要给一个按钮添加鼠标悬停效果，而最简单的悬停效果就是让按钮的颜色加深一些。我们写出的 CSS 代码可能是这样的：

.button {	background-color: #ff4466;
}.button:hover {	background-color: #f57900;
}复制代码

我相信即使是最资深的视觉设计师，也很难分清 #ff4466 和 #f57900 这两种颜色到底有什么关联。而如果我们的代码是用预处理语言来写的，那事情就直观多了：

.button
	$color = #ff9833

	background-color: $color
	&:hover
		background-color: darken($color, 20%)复制代码

此外，预处理器的函数往往还支持默认参数、具名实参、arguments 对象等高级功能，内部还可以设置条件分支，可以满足复杂的逻辑需求。

Mixin

Mixin 是 CSS 预处理器提供的又一项实用功能。Mixin 的形态和用法跟函数十分类似——先定义，然后在需要的地方调用，在调用时可以接受参数。它与函数的不同之处在于，函数用于产生一个值，而 Mixin 的作用是产生一段 CSS 代码。

Mixin 可以产生多条 CSS 规则，也可以只产生一些 CSS 声明。

一般来说，Mixin 可以把 CSS 文件中类似的代码块抽象出来，并给它一个直观的名字。比如 CSS 框架可以把一些常用的代码片断包装为 mixin 备用，在内部按需调用，或暴露给使用者在业务层调用。

举个例子，我们经常会用到 clearfix 来闭合浮动。在原生 CSS 中，如果要避免 clearfix 代码的重复，往往只能先定义好一个 .clearfix 类，然后在 HTML 中挂载到需要的元素身上：

/* 为 clearfix 定义一个类 */
.clearfix {...}
.clearfix::after {...}复制代码

<!-- 挂载到这两个元素身上 --><p class="info clearfix">...</p>...<footer class="clearfix">...</footer>复制代码

把表现层的实现暴露到了结构层，是不是很不爽？而在预处理器中，我们还可以选择另一种重用方式：

// 为 clearfix 定义一个 mixin
clearfix()
    ...
    &::after
        ...

// 在需要的元素身上调用
.info
    clearfix()

footer
    clearfix()复制代码

工程化

CSS 预处理语言无法直接运行于浏览器环境，这意味着我们编写的源码需要编译为 CSS 代码之后才能用于网页。这似乎是一个门槛，需要我们付出“额外”的成本。

但在目前的大环境下，大多数项目的前端开发流程已经包含了构建环节，比如选择任何一个脚本模块化方案都是需要在部署时走一道打包程序的。所以对大多数团队来说，这个门槛其实已经跨过去一大半了。

而一旦接受了这种设定，我们还可以享受到“额外”的福利。在给 CSS 的开发加入编译环节的同时，还可以顺道加入其它构建环节，比如代码校验、代码压缩、代码后处理等等。

“代码后处理”是指 PostCSS 平台上各类插件所提供的功能，光是 Autoprefixer 这一项就已经值回票价了。我们再也不需要在 CSS 代码中手工添加浏览器前缀了，直接使用标准写法，剩下的事情让工具搞定吧！

推荐教程：《CSS教程》

위 내용은 CSS 전처리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!