Sass와 Less의 차이점-CSS 튜토리얼-php.cn

Sass와 Less의 차이점

"어떤 CSS 전처리기 언어를 선택해야 하나요?"

CSS 전처리기란 무엇인가요?

CSS 전처리기는 특수 프로그래밍 언어를 사용하여 CSS에 일부 프로그래밍 기능을 추가하고, CSS를 대상으로 사용하여 파일을 생성한 다음, 개발자가 코딩에만 이 언어를 사용하면 되는 새로운 언어를 정의합니다. CSS.

CSS 전처리기를 사용하는 이유는 무엇인가요?

CSS는 단지 마크업 언어일 뿐입니다. 변수는 사용자 정의하거나 인용할 수 없습니다.

CSS에는 다음과 같은 구체적인 단점이 있습니다.

구문이 충분히 강력하지 않습니다. 예를 들어 중첩될 수 없으므로 모듈 개발에서 반복되는 선택기를 많이 작성해야 합니다.
없습니다. 가변적이고 합리적인 스타일 복제 메커니즘을 사용하면 논리적으로 관련된 속성 값을 리터럴 형태로 반복적으로 출력해야 하므로 유지 관리가 어렵습니다.

사전 컴파일은 하위 선택자의 남용을 쉽게 유발할 수 있습니다.

전처리기 사용의 장점

CSS 레이어에 누락된 스타일 레이어 재사용 메커니즘 제공
중복 코드 줄이기
스타일 코드의 유지 관리성 향상

Sass&Less

Less(Leaner Style Sheets의 약어)는 이전 버전과 호환되는 CSS 확장 언어입니다. Less는 CSS와 매우 유사하기 때문에 Less는 CSS 언어에 몇 가지 편리한 확장만 추가하여 쉽게 배울 수 있습니다.
sass, "세계에서 가장 성숙하고 안정적이며 강력한 전문가 수준의 CSS 확장 언어". 모든 버전의 CSS와 호환되며 Compass, Bourbon, Susy 등 Sass로 구축된 수많은 프레임워크가 있습니다.

SASS 버전 3.0 이전의 접미사는 .sass이고, 버전 3.0 이후의 접미사는 .scss입니다.

Sass 및 Less와 같은 언어는 실제로 CSS의 상위 집합으로 이해될 수 있습니다. CSS의 원래 구문 형식을 기반으로 변수 사용, 논리문 지원, 함수 등과 같은 프로그래밍 언어 기능을 추가합니다. . CSS 코드를 더 쉽게 유지하고 재사용할 수 있도록 만듭니다.

하지만 브라우저는 결국 CSS 파일만 인식하게 됩니다. CSS의 변수와 논리문을 처리할 수 없기 때문에 Sass나 Less로 작성된 코드를 표준 CSS 코드로 변환하는 컴파일 과정이 필요합니다. CSS 전처리라고 합니다.

추가 참고 사항

ruby sass

Ruby Sass는 Sass의 원래 구현이지만 2019년 3월 26일에 수명이 끝났습니다. 우리는 더 이상 이에 대한 지원을 제공하지 않으며 Ruby Sass 사용자는 다른 구현(LibSass 또는 Dart Sass)으로 마이그레이션하라는 요청을 받습니다.

왜?

처음에는 Ruby에서 Sass를 작성하면 기존 사용자는 물론 심지어 전체 Ruby 생태계에서도 이를 사용하도록 쉽게 유도할 수 있습니다.

나중에 Node.js는 프런트엔드 개발에서 널리 사용되는 반면 Ruby는 점차 백그라운드로 사라졌습니다. 동시에 Sass 프로젝트의 규모는 작성자의 원래 비전을 훨씬 초과했으며 Sass에 대한 성능 요구 사항은 Ruby의 기능을 초과했습니다.

Dart-sass

저는 sass를 별로 사용하지 않기 때문에 알려준 @WashingtonHua에게 감사드립니다

sass는 2016년 11월 Dart Sass 42 프로젝트의 알파 버전을 공식 발표했습니다. Dart를 사용하여 Sass Rewrite를 수행했습니다.

sass-lang 공식 웹사이트에 따르면:

Dart Sass는 Sass의 기본 구현입니다. 즉, 다른 구현보다 먼저 새로운 기능을 얻게 됩니다. 빠르고 쉽게 설치할 수 있으며 순수 JavaScript로 컴파일되므로 최신 웹 개발 워크플로에 쉽게 통합할 수 있습니다.

순수 JS 버전은 독립 실행형 버전보다 성능이 느리지만 기존 워크플로에 통합하기 쉽고 JavaScript를 통해 기능과 가져오기 도구를 사용자 정의할 수 있습니다. npm install --save-dev sass 명령을 실행하여 프로젝트에 추가하고 require()를 통해 가져옵니다.

npm을 통해 설치하면 Dart Sass는 Node Sass와의 호환성을 위해 JavaScript API를 제공합니다. 완전한 호환성이 진행 중입니다.

libSass

Sass는 원래 Ruby로 작성되었습니다. LibSass는 C/C++로 구현된 Sass 엔진입니다. 핵심은 간단하고 빠르며 통합이 쉽다는 것입니다.

LibSass는 단지 도구 라이브러리일 뿐입니다. 로컬에서 실행하려면(즉, Sass 코드 컴파일) LibSass 래퍼가 필요합니다. LibSass용 패키지는 이미 많이 있습니다.

C 언어로 개발된 패키지인 Sass C

sass.cr은 Crystal 프로그래밍 언어용 LibSass 패키지입니다.

go-libsass는 가장 활동적인 Go 언어 패키지입니다

자세한 내용은 sass.bootcss.com/libsass

Less

Less는 CSS를 확장하는 CSS 전처리 언어입니다. 언어, 변수, 믹스인, 함수와 같은 기능을 추가하여 CSS를 더 쉽게 유지 관리하고 확장할 수 있습니다.

Less는 노드나 브라우저에서 실행할 수 있습니다. 유효한 CSS 조각은 그 자체로 유효한 LESS 조각입니다.

LESS는 변수, 중첩, 믹스인, 연산자, 함수 등 일반 프로그래밍에 필요한 추상 메커니즘을 제공합니다.

변수

변수를 사용하면 일련의 공통 값을 한 곳에서 정의한 다음 스타일시트 전체에서 호출할 수 있습니다.

전체 스타일을 조정할 때 코드 몇 줄만 수정하면 될 수도 있습니다.

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

로그인 후 복사

다음으로 컴파일:

#header {
  width: 10px;
  height: 20px;
}

로그인 후 복사

Mixins

Mixins는 한 규칙 세트의 속성 세트를 다른 규칙 세트에 포함(또는 혼합)하는 방법입니다. 다음과 같이 클래스를 정의한다고 가정해 보겠습니다.

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

로그인 후 복사

이 속성을 다른 규칙 세트에서 사용하려면 다음과 같이 필수 속성의 클래스 이름을 입력하면 됩니다.

#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

로그인 후 복사

Nesting

Less는 대신 중첩을 사용하는 기능을 제공합니다. 캐스케이딩과 함께 또는 연계하여. 다음과 같은 CSS 코드가 있다고 가정해 보겠습니다.

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

로그인 후 복사

Less 언어를 사용하면 다음과 같은 코드를 작성할 수 있습니다.

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

로그인 후 복사

Less로 작성된 코드는 더 간결하며 HTML의 조직 구조를 모방합니다.

이 방법을 사용하여 믹스인과 함께 의사 선택기를 사용할 수도 있습니다. 다음은 믹스인으로 재작성된 고전적인 Clearfix 트릭입니다(&는 현재 선택기의 상위를 나타냄).

.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

로그인 후 복사

Operations

산술 연산자 +, -, *, /는 모든 숫자, 색상 또는 변수에 대해 연산을 수행할 수 있습니다.

연산자의 양쪽 변수의 단위가 다른 경우 덧셈, 뺄셈, 비교 전에 단위 변환이 수행된다는 점에 유의하세요. 계산된 결과는 가장 왼쪽 피연산자의 단위 유형을 기반으로 합니다. 단위 변환이 유효하지 않거나 의미가 없는 경우 단위는 무시됩니다. px를 cm로, rad를 %로 변환하는 등 잘못된 단위 변환입니다.

단위가 없으면 변환이 없습니다

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

로그인 후 복사

Functions

Less에는 색상 변환, 문자열 처리, 산술 연산 등을 위한 다양한 내장 함수가 있습니다. 이러한 기능은 Less 기능 매뉴얼에 자세히 설명되어 있습니다.

함수 사용법은 매우 간단합니다. 다음 예에서는 백분율 함수를 사용하여 0.5를 50%로 변환하고 채도를 5% 높이고 색상 밝기를 25% 줄이고 색조 값을 8 높이는 방법을 소개합니다. 사용법:

@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

로그인 후 복사

Importing

.less 파일을 가져올 수 있으며 이 파일의 모든 변수를 사용할 수 있습니다. 가져온 파일의 확장자가 .less인 경우 확장자를 생략할 수 있습니다.

@import "library"; // library.less
@import "typo.css";

로그인 후 복사

이 문서에는 less의 여러 기능에 대한 간략한 소개만 나열되어 있습니다. Less에 대한 자세한 소개는 기사 마지막에 있는 참조 문서 2를 참조하세요

Sass

Sass는 CSS를 향상시키기 위한 보조 도구이며, 변수, 중첩 규칙, 혼합(Mixins), 가져오기를 추가합니다. (인라인 가져오기) 및 기타 고급 기능을 갖춘 이러한 확장 기능은 CSS를 더욱 강력하고 우아하게 만듭니다.

Features

CSS3과 완벽하게 호환
CSS를 기반으로 하는 변수, 중첩, 믹스인 및 기타 기능 추가
기능을 통해 색상 값 및 속성 구성 값 연산
고급 제공 제어 지시문과 같은 함수
맞춤형 출력 형식

Variables

sass는 $ 기호를 사용하여 변수를 식별합니다(Sass의 이전 버전에서는 !를 사용하여 변수를 식별합니다). F90;

CSS 속성과 달리 변수는 CSS 규칙 블록 정의 외부에 존재할 수 있습니다. 변수는 CSS 규칙 블록 내에서만 사용할 수 있습니다.

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

로그인 후 복사

변수를 선언할 때 변수 값은 다른 변수를 참조할 수도 있습니다.

Nesting(Nesting)

기본 사용법은 less와 동일합니다.

하위 조합 선택기와 동일 수준 조합 선택기: >, + 및~

이 세 가지 조합 선택기는 브라우저가 특정 컨텍스트에서만 요소를 선택하도록 지정하려면 다른 선택기와 함께 사용해야 합니다.

이러한 결합 선택기는 Sass의 규칙 중첩에 쉽게 적용할 수 있습니다.

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

로그인 후 복사

sass는 원하는 대로 중첩된 규칙을 하나씩 풀어줍니다.

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

로그인 후 복사

중첩 속성;

Sass에서는 CSS 선택자 외에도 속성도 중첩될 수 있습니다.

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

로그인 후 복사

중첩 속성에 대한 규칙은 다음과 같습니다. 다음과 같이 대시에서 속성 이름을 분리하고 루트 속성 뒤에 콜론을 추가하고 { } 블록을 추가하고 이 { } 블록에 하위 속성 부분을 작성합니다. 하위 속성의 압축을 하나씩 풀고 이를 통해 루트 속성과 하위 속성 부분을 전달합니다. Line-connect에서 최종 생성된 효과는 수동으로 반복해서 작성하는 CSS 스타일과 동일합니다.

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

로그인 후 복사

속성의 축약된 형식을 사용하면 예외 규칙을 나타내기 위해 다음과 같이 중첩할 수도 있습니다.

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

로그인 후 복사

Mixer ;

Mixers는 @mixin 식별자를 사용하여 정의됩니다. 이 식별자는 스타일의 큰 섹션에 이름을 제공합니다.

이 이름을 참조하면 쉽게 재사용할 수 있습니다.

下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

로그인 후 복사

然后就可以在样式表中通过@include来使用这个混合器。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

로그인 후 복사

less及sass都支持混合器传参，具体内容参见参考文档 2、3

导入SASS文件;

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

使用SASS部分文件

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。

sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css

默认变量值;

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

로그인 후 복사

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

相同与差异

相同之处：

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

、

目前大部分的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分使用环境，所以不用在意处理机制，以上只是单纯的对比两者本身。

请不要忘记Dart Sass，它快速，易于安装，并且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。

在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

条件语句

Less 中并不支持条件语句，当然，可以通过内置函数 if 以及 and，or，not 这些来模拟条件语句。

在 Sass 中是支持条件语句的，但也不是像其他编程语言直接 if 这样通过保留字来编写，需要加个 @ 符号

框架-

sass框架谁有空可以在评论区补充一下

用哪个？

不知道～

LESS环境较Sass简单
LESS使用较Sass简单，大概？
相对而言，国内前端团队使用LESS的同学会略多于Sass
从功能出发，Sass较LESS略强大一些
Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation
就国外讨论的热度来说，Sass绝对优于LESS
就学习教程来说，Sass的教程要优于LESS(本身来说，less官方文档也够用了)。

推荐教程：《CSS教程》《PHP教程》

위 내용은 Sass와 Less의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!