La différence entre Sass et Less

"Quel langage de préprocesseur CSS dois-je choisir ?"

Qu'est-ce qu'un préprocesseur CSS ?

Le préprocesseur CSS définit un nouveau langage. L'idée de base est d'utiliser un langage de programmation spécialisé pour ajouter certaines fonctionnalités de programmation au CSS et cibler les fichiers CSS, puis les développeurs n'ont qu'à générer. utilisez ce langage pour coder CSS.

Pourquoi utiliser le préprocesseur CSS ?

CSS n'est qu'un langage de balisage. Les variables ne peuvent pas être personnalisées ou citées.

CSS présente les défauts suivants :

• La syntaxe n'est pas assez puissante, par exemple, elle ne peut pas être imbriquée, ce qui entraîne beaucoup de écriture requise dans le développement modulaire. Les sélecteurs en double

• n'ont pas de variables ni de mécanisme de réutilisation de style raisonnable, de sorte que les valeurs d'attribut logiquement liées doivent être générées à plusieurs reprises sous forme de littéraux, ce qui rend son entretien difficile.

La précompilation peut facilement conduire à un abus des sélecteurs descendants

Avantages de l'utilisation de préprocesseurs

• Fournir un mécanisme de réutilisation des couches de style pour les couches CSS manquantes

• Réduire le code redondant

• Améliorer la maintenabilité du code de style

Sass&Less

• Less (abréviation de Leaner Style Sheets) est un langage CSS étendu rétrocompatible. Parce que Less est très similaire au CSS, Less ajoute seulement quelques extensions pratiques au langage CSS, ce qui le rend facile à apprendre.

• sass, comme "le langage d'extension CSS de niveau professionnel le plus mature, stable et puissant au monde". Compatible avec toutes les versions de CSS, et il existe d'innombrables frameworks construits avec Sass, tels que Compass, Bourbon et Susy.

Le suffixe avant la version 3.0 de SASS est .sass, tandis que le suffixe après la version 3.0 est .scss.

Des langages tels que Sass et Less peuvent en fait être compris comme des surensembles de CSS. Basés sur le format de syntaxe original de CSS, ils ajoutent des fonctionnalités au langage de programmation, telles que l'utilisation de variables et l'utilisation. d'instructions logiques Support, fonctions, etc. Rendre le code CSS plus facile à maintenir et à réutiliser.

Mais le navigateur ne reconnaîtra définitivement que les fichiers CSS. Il ne peut pas gérer les variables et les instructions logiques en CSS, un processus de compilation est donc nécessaire pour convertir le code écrit en Sass ou Less en code CSS standard. , ce processus est appelé prétraitement CSS.

Notes supplémentaires

ruby sass

Ruby Sass est l'implémentation originale de Sass, mais Il décèdera le 26 mars 2019. Nous n'en fournissons plus aucun support et les utilisateurs de Ruby Sass sont invités à migrer vers une autre implémentation (LibSass ou Dart Sass).

pourquoi ?

Au début, écrire Sass en Ruby pouvait facilement attirer les utilisateurs existants et même l'ensemble de l'écosystème Ruby à l'utiliser

Plus tard, Node.js est devenu omniprésent dans le développement front-end est disparu, et Ruby disparaît à l'arrière-plan. Dans le même temps, l'ampleur du projet Sass a largement dépassé la vision originale de l'auteur et les exigences de performances de Sass ont dépassé les capacités de Ruby.

Dart-sass

Parce que je n'utilise pas beaucoup le sass, merci @WashingtonHua pour le rappel

sass en novembre 2016 La version alpha du projet Dart Sass 42 a été officiellement annoncée, c'est-à-dire qu'ils ont réécrit Sass à l'aide de Dart.

Selon le site officiel de sass-lang :

Dart Sass est la principale implémentation de Sass, ce qui signifie qu'il bénéficie de nouvelles fonctionnalités avant les autres implémentations. Il est rapide, facile à installer et se compile en JavaScript pur, ce qui facilite son intégration dans les flux de travail de développement Web modernes.

La version pure JS fonctionne plus lentement que la version autonome, mais elle est facile à intégrer dans les flux de travail existants et vous permet de personnaliser les fonctions et les importateurs via JavaScript. Ajoutez-le au projet en exécutant la commande npm install --save-dev sass et importez-le via require().

Lorsqu'il est installé via npm, Dart Sass fournit une API JavaScript pour la compatibilité avec Node Sass. La compatibilité complète est en cours

libSass

Sass a été initialement écrit en Ruby. LibSass est un moteur Sass implémenté en C/C++. L’essentiel est qu’il soit simple, rapide et facile à intégrer.

LibSass n'est qu'une bibliothèque d'outils. Pour l'exécuter localement (c'est-à-dire compiler du code Sass), vous avez besoin d'un wrapper LibSass. Il existe déjà de nombreux packages pour LibSass.

Sass C, un package développé en langage C

sass.cr est un package LibSass pour le langage de programmation Crystal.

go-libsass est le package linguistique Go le plus actif

Pour plus de détails, veuillez consulter sass.bootcss.com/libsass

Less

Less est un langage de prétraitement CSS qui étend le langage CSS et ajoute des variables, des mixins, des fonctions et d'autres fonctionnalités pour rendre CSS plus facile à maintenir et à développer .

Less peut s'exécuter sur Node ou sur le navigateur. Un extrait de code CSS valide est lui-même un extrait de code LESS valide.

LESS fournit les mécanismes abstraits requis pour la programmation générale tels que les variables, l'imbrication, les mixins, les opérateurs et les fonctions.

Variables

Les variables nous permettent de définir une série de valeurs communes en un seul endroit, puis de les appeler tout au long de la feuille de style.

Lorsque vous effectuez des ajustements de style globaux, vous n'aurez peut-être besoin de modifier que quelques lignes de code.

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

compile en :

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

Mixins

Les mixins sont un ensemble de propriétés qui sont incluses à partir d'un ensemble de règles (ou d'un mixin) dans un autre ensemble de règles. Supposons que nous définissions une classe comme suit :

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

Si vous souhaitez utiliser ces attributs dans d'autres ensembles de règles, entrez simplement le nom de classe des attributs requis comme suit

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

Nesting

Less offre la possibilité d'utiliser l'imbrication à la place ou en conjonction avec la cascade. Supposons que nous ayons le code CSS suivant :

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

En langage Less, nous pouvons écrire le code comme ceci :

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

Le code écrit en Less est plus concis et imite la structure organisationnelle du HTML.

Vous pouvez également utiliser cette méthode pour utiliser des pseudo-sélecteurs avec des mixins. Voici une astuce clearfix classique, réécrite sous forme de mixin (& représente le parent du sélecteur actuel) :

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

Opérations

Opérateurs arithmétiques +, -, *, / peut opérer sur n'importe quel nombre, couleur ou variable

Notez que si les unités des variables des deux côtés de l'opérateur sont différentes, la conversion des unités sera effectuée avant l'addition, la soustraction ou la comparaison. Le résultat calculé est basé sur le type d'unité de l'opérande le plus à gauche. Si la conversion d'unités est invalide ou dénuée de sens, les unités sont ignorées. Conversions d'unités non valides telles que px en cm ou rad en %.

Aucune conversion s'il n'y a pas d'unité

// 所有操作数被转换成相同的单位
@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

Fonctions

Less possède une variété de fonctions intégrées pour la conversion des couleurs, le traitement des chaînes, l'arithmétique opérations etc Ces fonctions sont décrites en détail dans le manuel fonctionnel Less. L'utilisation de la fonction

est très simple. L'exemple suivant explique comment utiliser la fonction de pourcentage pour convertir 0,5 en 50 %, augmenter la saturation des couleurs de 5 %, réduire la luminosité des couleurs de 25 % et augmenter la valeur de teinte de 8, etc. Utilisation :

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

Importer (Importation)

Vous pouvez importer un fichier .less et toutes les variables de ce fichier peuvent être utilisées. Si le fichier importé a une extension .less, vous pouvez omettre l'extension :

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

Cet article ne répertorie qu'une brève introduction à plusieurs fonctionnalités de less. Pour une introduction plus détaillée à less, veuillez vous référer au document de référence 2 à la fin de l'article

Sass

Sass est un outil auxiliaire qui améliore CSS It. ajoute des variables (Variables, règles imbriquées, mixins, importations en ligne et autres fonctions avancées. Ces extensions rendent CSS plus puissant et élégant.

Caractéristiques

• Entièrement compatible avec CSS3

• Ajouter des variables basées sur CSS, imbrication, mixins et d'autres fonctions

• Calculer les valeurs de couleur et les valeurs d'attribut via des fonctions

• Fournir des instructions de contrôle (directives de contrôle) et d'autres fonctions avancées

• Format de sortie personnalisé

Variables

utilisation sass du symbole $ pour identifier les variables (anciennes versions de sass, utilisez ! pour identifier les variables.

$highlight-color: #F90;

Contrairement aux propriétés CSS, les variables peuvent être définies en dehors des blocs de règles CSS. bloc de règles css, la variable ne peut être utilisée que dans ce bloc de règles

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

Lors de la déclaration d'une variable, la valeur de la variable peut également faire référence à d'autres variables 🎜>Nesting

Basique. l'utilisation est la même que less

Sélecteur de sous-combinaison et sélecteur de combinaison de même niveau : >, + et ~

Ces trois sélecteurs combinés doivent être utilisés conjointement avec d'autres sélecteurs pour spécifier que le navigateur ne sélectionne que les éléments dans un certain contexte. Ces sélecteurs combinés peuvent être appliqués sans effort à l'imbrication des règles de Sass. Vous pouvez les placer après le sélecteur externe ou avant le sélecteur interne :

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

Sass décompressera ces règles imbriquées une par une. un comme vous le souhaitez :

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 }

Attributs imbriqués ;

Dans sass, en plus des sélecteurs CSS, les attributs peuvent également être imbriqués

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

Le. les règles pour les attributs imbriqués sont les suivantes. : Cassez le nom de l'attribut au niveau du tiret -, ajoutez deux points : après l'attribut racine, suivi d'un bloc { }, et écrivez la partie sous-attribut dans ce bloc { }, juste comme l'imbrication du sélecteur CSS, Sass décompressera vos sous-attributs un par un et connectera les attributs racine et les sous-attributs via des tirets - L'effet final sera le même que le style CSS que vous écrivez encore et encore manuellement :

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

pour les attributs Forme courte de Un identifiant donne un nom à un bloc de styles qui peut être facilement réutilisé en référençant le nom

.

下边的这段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教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!