CSS 전처리기란?-CSS 튜토리얼-php.cn

CSS 전처리기는 CSS에 일부 프로그래밍 기능을 추가하는 데 사용되는 특수 프로그래밍 언어입니다(CSS 자체는 프로그래밍 언어가 아닙니다). CSS 전처리기는 궁극적으로 표준 CSS 스타일을 컴파일하고 출력하므로 브라우저 호환성 문제를 고려할 필요가 없습니다. CSS 전처리기에서 변수, 간단한 논리적 판단, 함수 등 기본적인 프로그래밍 기술을 사용할 수 있습니다.

CSS 전처리기란?

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS(Cascading Style Sheet)는 캐스케이딩 스타일 시트(Cascading Style Sheet)로 번역되는 용어로, 업계에서는 주로 "스타일 시트"라고 부르는데, 프론트엔드 실무자에게는 낯설지 않은 용어입니다. . 스타일 시트를 설정하면 HTML(XHTML)의 각 태그 표시 속성을 균일하게 제어할 수 있습니다. 이를 통해 사람들은 웹 페이지(또는 웹 애플리케이션)의 모양을 보다 효과적으로 제어할 수 있으며 웹 요소의 위치와 모양 및 특수 효과를 생성하는 기능을 정확하게 지정할 수 있습니다. CSS는 웹페이지 객체와 모델 스타일을 편집할 수 있는 능력을 갖고 있으며, 예비적인 인터랙티브 디자인을 수행할 수 있습니다. 현재 텍스트 디스플레이를 기반으로 하는 최고의 성능 디자인 언어입니다. CSS는 다양한 사용자의 이해 능력에 따라 작성 방법을 단순화하거나 최적화하여 모든 유형의 사람들이 쉽게 읽을 수 있도록 할 수 있습니다.

CSS 자체에 관한 한 대부분의 웹 프런트엔드 실무자에게는 문제가 되지 않습니다. CSS를 공부한 사람이라면 그것이 프로그래밍 언어가 아니라는 것을 알 것입니다. 이를 사용하여 웹 페이지 스타일을 개발할 수 있지만 프로그래밍에는 사용할 수 없습니다. 즉, CSS는 기본적으로 프로그래머의 도구가 아닌 디자이너의 도구입니다. 프로그래머의 눈에 CSS는 PHP, Javascript 등과 같은 다른 프로그래밍 언어와 달리 자체 변수, 상수, 조건문 및 일부 프로그래밍 구문을 가지고 있습니다. 작성하는 데 시간이 많이 걸리고 코드를 구성하고 유지 관리하기가 어렵습니다.

자연스럽게 일부 사람들은 CSS에 다른 프로그래밍 언어처럼 일부 프로그래밍 요소를 추가하여 CSS가 다른 프로그래밍 언어처럼 미리 결정된 처리를 수행할 수 있는지 궁금해하기 시작했습니다. 이런 식으로 "CSS 전처리기"가 있습니다.

1. CSS 전처리기란 무엇입니까?

CSS 전처리기는 특수 프로그래밍 언어를 사용하여 CSS에 일부 프로그래밍 기능을 추가한 다음 개발자만 사용하는 것입니다. 코딩하려면 이 언어를 사용해야 합니다. 일반인의 관점에서 말하면 CSS 전처리기는 특수 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 이를 프로젝트 사용을 위해 일반 CSS 파일로 컴파일합니다. CSS 전처리기는 브라우저 호환성 문제를 고려하지 않고 CSS에 일부 프로그래밍 기능을 추가합니다. 예를 들어 CSS에서 프로그래밍 언어의 일부 기본 기능을 사용하면 더 많은 기능을 사용할 수 있습니다. 간결하고, 적응성이 뛰어나고, 읽기 쉽고, 유지 관리가 더 쉽고, 기타 여러 가지 이점이 있습니다.

CSS 전처리기 기술은 매우 성숙해졌으며 Sass(SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS 등과 같은 다양한 CSS 전처리기 언어가 등장했습니다. CSS 전처리기가 너무 많아서 최근 인터넷상에서 "어떤 CSS 전처리기를 선택해야 하는가?"가 화제가 되었고, Linkedin, Twitter, CSS-Trick, Zhihu 및 주요 기술 포럼에서는 이에 대해 많은 사람들이 논쟁을 벌이고 있습니다. 이는 우리가 한때 CSS 전처리기를 사용해야 하는지에 대해 논의했던 것보다 큰 진전입니다.

지금까지 많은 우수한 CSS 전처리기 언어 중에서 Sass, LESS 및 Stylus가 가장 우수하며 많은 토론과 비교가 있었습니다. 이 기사에서는 배경, 설치, 사용 구문, 차이점 및 기타 비교를 통해 세 가지 CSS 전처리기 언어를 소개합니다. 저는 프론트엔드 개발 엔지니어들이 어떤 CSS 전처리기를 선택해야 할지 스스로 선택할 것이라고 믿습니다.

(동영상 공유 학습: css 동영상 튜토리얼)

2. Sass, LESS 및 Stylus에 대한 배경 소개

세 가지 인기 있는 CSS 전처리기를 더 잘 이해하기 위해 배경부터 시작해 보겠습니다. 배경 정보에 대해 알아보세요. .

1. Sass 배경 소개

Sass는 2007년에 탄생한 CSS(Cascading Style Sheets) 구문의 확장입니다. 가장 초기이자 가장 성숙한 CSS 전처리기 언어입니다. 중첩, 믹스인, 함수 및 기타 함수를 사용하면 CSS를 보다 효율적이고 유연하게 작성할 수 있습니다. Sass는 결국 브라우저가 사용할 수 있도록 합법적인 CSS를 컴파일할 것입니다. 이는 표준 CSS 형식이 아니고 동적 변수를 해당 구문 내에서 사용할 수 있기 때문에 브라우저가 자체 구문을 인식하기가 쉽지 않음을 의미합니다. 아주 간단한 동적 언어와 같습니다.

사실 Sass에는 이제 두 가지 문법 규칙 세트가 있습니다. 하나는 코드 블록을 구분하기 위해 여전히 들여쓰기를 구분 기호로 사용하고, 다른 규칙 세트는 CSS와 같은 구분 기호로 중괄호({})를 사용합니다. 후자의 문법 규칙은 SCSS라고도 하며 Sass3 이후 버전에서 지원됩니다.

참고: Sass 공식 웹사이트 주소: http://sass-lang.com

2. LESS에 대한 배경 소개

Sass의 영향을 많이 받았지만 대부분의 개발자와 디자이너가 더 쉽게 시작할 수 있도록 CSS 구문을 사용하는 2009년 오픈 소스 프로젝트입니다. LESS는 작성된 코드를 표준 CSS 코드로 원활하게 변환하는 다양한 방법을 제공합니다(예: Twitter의 Bootstrap 프레임워크는 LESS를 사용함).

Wikipedia의 소개에 따르면 LESS는 실제로 Sass의 영향을 받아 Alexis Sellier가 만든 오픈 소스 프로젝트입니다. 당시 SASS는 CSS에서 널리 사용되는 중괄호({}) 대신 들여쓰기를 코드 블록을 구분하는 구분 기호로 사용했습니다. 기존 CSS 사용자들의 편의성을 높이기 위해 Alexis는 LESS를 개발하여 CSS와 유사한 작성 기능을 제공했습니다.

참고: LESS 공식 웹사이트: http://lesscss.org

3. 스타일러스 배경 소개

2010년에 제작된 스타일러스는 Node.js 커뮤니티에서 제공되며 주로 CSS 전처리 지원을 제공하는 데 사용됩니다. Node 프로젝트의 경우 이 커뮤니티에 특정 지지자가 있지만 넓은 의미에서 Sass 및 LESS만큼 인기가 좋지 않습니다.

스타일러스는 브라우저에서 사용할 CSS를 생성하는 효율적이고 역동적이며 표현력이 풍부한 방법을 제공하는 혁신적인 새로운 언어로 알려져 있습니다. 스타일러스는 들여쓰기와 CSS 일반 스타일 작성 규칙을 모두 지원합니다.

참고: Stylus 공식 웹사이트: http://learnboost.github.com/stylus

3. Sass, LESS 및 Stylus의 문법

각 언어에는 고유한 문법 규칙이 있으며, CSS 전처리기 언어도 예외는 아닙니다. 실제로 CSS 전처리기 언어를 사용하기 전에 빼놓을 수 없는 또 다른 지식 포인트가 바로 구문에 대한 이해입니다. 다행스럽게도 이 세 가지 CSS 전처리기 언어의 구문과 CSS 구문은 유사합니다.

1. Sass 구문

Sass 버전 3.0은 SCSS와 동일하다고 할 수 있는 표준 CSS 구문을 사용하기 시작합니다. 이렇게 하면 Sass 코드를 CSS 코드로 더 쉽게 변환할 수 있습니다. 기본적으로 Sass는 ".scss" 확장자를 사용합니다. Sass 구문 규칙은 CSS처럼 작성할 수 있습니다.

/*style.sass新版语法规则*/
h1{
  color:#936;
  background-color:#333;
}

로그인 후 복사

보시다시피 Sass 스타일에서는 이러한 코드가 더 간단할 수 없습니다.

중요한 점은 Sass가 이전 구문도 지원한다는 것입니다. 이전 구문은 일반 CSS 구문과 약간 다릅니다. 들여쓰기 및 문자 오류가 있으면 스타일 컴파일 오류가 발생합니다. Sass는 엄격한 들여쓰기와 코드 형식에 전적으로 의존하여 중괄호(｛｝)와 세미콜론(;)을 생략할 수 있으며 파일은 ".sass" 확장자를 사용합니다. 구문은

/*style.sass*/
h1
  color:#936
  background-color: #333

로그인 후 복사

2.LESS 구문 입니다.

LESS는 CSS의 확장된 형태입니다. CSS의 기능을 약화시키지 않고 기존 CSS 구문에 많은 추가 기능을 추가합니다. 구문 규칙 측면에서 LESS는 Sass와 마찬가지로 CSS의 표준 구문을 사용하지만 LESS의 소스 파일 확장자는 ".less"이고 기본 구문은 다음과 유사합니다.

/*style.less*/
h1 {
  color: #963;
  background-color: #333;
}

로그인 후 복사

3.Stylus 구문

스타일러스에는 더 많은 구문 트릭이 있습니다. 파일 확장자는 ".styl"입니다. 스타일러스는 표준 CSS 구문도 허용하지만 동시에 Sass의 이전 구문 규칙과 같은 들여쓰기 제어도 사용합니다( ｛). ｝) 및 세미콜론 구문은 다음과 같습니다.

/*style.styl*/
/*类似于CSS标准语法*/
h1 {
  color: #963;
  background-color:#333;
}
/*省略大括号（｛｝）*/
h1 
  color: #963;
  background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
  color:#963
  background-color:#333

로그인 후 복사

Stylus 스타일에서는 동일한 스타일 파일에서 다른 구문 규칙을 사용할 수도 있으며 다음 작성 방법은 오류를 보고하지 않습니다.

/*style.styl*/
h1 {
  color  #963
}
h2 
  font-size:1.2em

로그인 후 복사

IV , Sass, LESS 및 스타일러스 기능

이 세 가지 CSS 전처리기 언어에는 변수, 믹스인, 중첩, 함수 등과 같은 일부 동일한 기능이 있습니다. 이 섹션에서는 이 세 가지 CSS 전처리기 언어의 다양한 기능의 유사점과 차이점은 물론 사용 방법도 비교해 보겠습니다.

1. 변수

개발자라면 변수는 가장 친한 친구 중 하나여야 합니다. CSS 전처리기 언어에서는 변수를 선언하고 스타일 시트 전체에서 사용할 수도 있습니다. CSS 전처리기 언어는 모든 변수(예: 색상, 숫자 값, 텍스트)를 지원합니다. 그런 다음 어디에서나 변수를 참조할 수 있습니다.

a) Sass 변수

Sass 변수는 "$"로 시작하고 그 뒤에 변수명과 변수값이 와야 하며, 변수명과 변수값은 콜론(:)으로 구분해야 합니다. CSS 속성 설정과 같습니다:

/*声明变量*/
 
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
 
/*调用变量*/                              |  /*转译出来的CSS*/
------------------------------------------+------------------------------
body {                                    |  body {
  color: $mainColor;                      |    color: #963;
  border:1px $borderStyle $mainColor;     |    border:1px dotted #963;
  max-width: $siteWidth;                  |    max-width: 1024px;
}                                         |  }	                                       |  }

로그인 후 복사

b) LESS 변수

LESS 스타일의 변수 선언 및 변수 호출은 Sass와 동일합니다. 유일한 차이점은 변수 이름 앞에 "@" 문자가 사용된다는 점입니다.

/*声明变量*/

@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;

/*调用变量*/                            |  /*转译出来的CSS*/
----------------------------------------+-------------------------------
body {                                  |  body {
  color: @mainColor;                    |    color:#963;
  border:1px @borderStyle @mainColor;   |    border:1px dotted #963;
  max-width: @siteWidth;                |    max-width:1024px;
}                                       |  }

로그인 후 복사

c) 스타일러스 변수

스타일러스 스타일에서 변수를 선언하는 데에는 제한이 없습니다. "$" 기호로 시작할 수 있습니다. 후행 세미콜론(;)은 선택사항이나, 변수명과 변수값 사이에 등호(=)는 필수입니다. 한 가지 주의할 점은 "@" 기호를 사용하여 변수를 선언(0.22.4)하면 스타일러스가 컴파일되지만 해당 값이 변수에 할당되지 않는다는 것입니다. 즉, Stylus에서 처음에 "@" 기호를 사용하여 변수를 선언하지 마십시오. Stylus에서 변수를 호출하는 방법은 LESS 및 Sass와 완전히 동일합니다.

/*声明变量*/
 
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
 
/*调用变量*/                            |    /*转译出来的CSS*/
----------------------------------------+--------------------------------
body                                    | body {
  color mainColor                       |   color: #963;
  border 1px $borderStyle mainColor     |   border:1px dotted #963
  max-width siteWidth                   |   max-width:1024px;
                                        | }

로그인 후 복사

Stylus에는 변수에 값을 할당하지 않고도 참조 속성을 정의할 수 있는 고유한 기능도 있습니다.

/*水平垂直居中*/                    |  /*转译出来的CSS*/
------------------------------------+------------------------------------
#logo                               |   #logo {
  position  absolute                |     position:absolute;
  top  50%                          |     top:50%;
  left  50%                         |     left:50%;
  width  w = 150px                  |     width:150px;
  height  h = 80px                  |     height:80px;
  margin-left  -(w / 2)             |     margin-left:-75px;
margin-top  -(h / 2)                |     margin-top:-40px;
                                    |   }

로그인 후 복사

从上面的代码中我们可以看出，CSS预处理器语言中的变量是值级别的重复使用，可以将相同的值定义成变量统一管理起来。

CSS预处理器语言中变量的特性适用于定义主题（也就是我们常说的换肤），我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义，这样不同的主题只需要定义不同的变量文件就可以。

2.作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。

a)Sass的作用域

Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：

/*Sass样式*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

로그인 후 복사

先看转译出来的CSS样式：

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
}

로그인 후 복사

示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

b)LESS的作用域

LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

/*LESS样式*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

로그인 후 복사

转译出来的CSS样式：

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
}

로그인 후 복사

c)Stylus的作用域

Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。

3.混合(Mixins)

Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

a)Sass的混合

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。

在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。

一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

로그인 후 복사

b)LESS的混合

在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。

不过LESS样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在LESS可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。

正如Sass混合是的示例，同样在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}

로그인 후 복사

c)Stylus的混合

Stylus中的混合和前两款CSS预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

로그인 후 복사

三个示例都将会转译成相同的CSS代码：

.generic-error {
  border: 2px solid #f00;
  color:#f00;
}
.login-error {
  border:5px solid #f00;
  color: #f00;
}

로그인 후 복사

4.嵌套（Nesting）

CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。

section {
  margin:10px;
}
section nav {
  height:25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

로그인 후 복사

相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

로그인 후 복사

上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！

5.继承（Inheritance）

对于熟悉CSS的同学来说，对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时，我们在CSS中通常都是这样写：

p,ul,ol{/*样式写在这里*/}

로그인 후 복사

这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器语言可以从一个选择继承另个选择器下的所有样式。

a)Sass和Stylus的继承

Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

로그인 후 복사

上面的代码转译成CSS：

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}

로그인 후 복사

b)LESS的继承

LESS支持的继承和Sass与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

로그인 후 복사

转译出来的CSS代码：

.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}

로그인 후 복사

正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。

6.运算符（Operations）

CSS预处理器语言还具有运算的特性，其简单的讲，就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的，但在CSS预处理器语言中对样式做一些运算一点问题都没有了，例如：

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

로그인 후 복사

上面代码是LESS的运算示例，声明一下，在取得“@quarter_page”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如：

border: (@width / 2) solid #000;

로그인 후 복사

Sass在数字运算上要比LESS更专业，他可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。

7.颜色函数

颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。

a)Sass颜色函数

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

로그인 후 복사

这只是Sass中颜色函数的一个简单列表，更多详细的介绍可以阅读Sass文档。

颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}

로그인 후 복사

b)LESS颜色函数

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

로그인 후 복사

LESS的完整颜色函数功能，请阅读LESS文档。

下面是LESS中如何使用一个颜色函数的简单例子：

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

로그인 후 복사

c)Stylus的颜色函数

lighten(color, 10%); /* 返回的颜色在&#39;color&#39;基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在&#39;color&#39;基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在&#39;color&#39;基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在&#39;color&#39;基础上饱和度降低10% */

로그인 후 복사

有关于Stylus的颜色函数介绍，请阅读Stylus文档。

下面是Stylus颜色函数的一个简单实例：

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)

로그인 후 복사

从上面展示的部分颜色函数可以告诉我们，Sass、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。

8.导入（Import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

Sass、LESS和Stylus三款CSS预处理器语言，导入样式的方法都是一样：

被导入文件的样式：

/* file.{type} */
body {
  background: #EEE;
}

로그인 후 복사

需要导入样式的文件：

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}

로그인 후 복사

转译出来的CSS代码：

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

로그인 후 복사

9.注释（Comment）

CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。

a)Sass、LESS和Stylus的多行注释

多行注释和CSS的标准注释，他们可以输出到CSS样式中，但在Stylus转译时，只有在“compress”选项未启用的时候才会被输出来。

/*
 *我是注释
*/
body
  padding 5px

로그인 후 복사

b)Sass、LESS和Stylus的单行注释

单行注释跟JavaScript语言中的注释一样，使用双斜杠（//），但单行注释不会输出到CSS中。

//我是注释
@mainColor：#369;//定义主体颜色

로그인 후 복사

在Stylus中除了以上两种注释之外，他还有一种注释，叫作多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉Stylus压缩的时候这段无视直接输出。

/*!
*给定数值合体
*/
add(a, b)
  a + b

로그인 후 복사

上面从九个常用的特性对Sass、LESS和Stylus三款CSS预处理器语言的使用做了对比，在某些特性上可以说是一模一样，而有一些特性上功能其实一样，只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里几是从使用方法上做为一个比较，主要目的是让大家经过对比之后，使自己选择哪一款CSS预处理器语言有所方向和帮助。

更多编程相关知识，请访问：编程视频！！

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