css和scss,css和scss

　　在设计网页样式时，我们可以选择在项目中使用纯CSS或SCSS(以及其他处理器)。Scs是CSS的超集。大多数开发人员都认为SCSS比CSS更方便使用，因为它的功能先进，语法清晰。

　　在这篇文章中，我想带你去探索SCSS的功能以及这些年来CSS的功能改进。此外，我还将评估CSS在实际项目中是否可以替代SCSS。

CSS 当前的功能

　　 CSS自诞生以来取得了长足的进步。近年来，CSS的发展也降低了动画中使用JavaScript的必要性。现代浏览器甚至使用GPU来提高这些CSS动画的性能。现在，我们可以使用CSS构建复杂的响应式网格布局，甚至只需稍加研究。

　　如今，CSS有许多新功能，但本文将只关注现代Web应用程序中常用的一些新功能。

　　在任何Web应用程序的构建中，最重要的部分是页面的布局。多年来我们大多数人都依赖于Bootstrap等CSS框架，但现在CSS提供了Grid(网格)、Subgrid(子网格)和Flexbox(弹性框)等新功能来原位构建布局。虽然Flexbox很受开发者欢迎，但是网格布局正在迎头赶上。灵活的文本布局过渡和变换的强大能力，让我们不再需要使用JavaScript来动画定制属性或变量

SCSS 的功能

　　 SCSS支持变量——，避免复杂的代码。

　　实际上，我们可以在样式表中重用一些颜色或者其他元素定义(比如字体)。为了在一个统一的地方声明这些可重用的东西，SCSS为我们提供了变量函数，使我们能够用一个变量名来表示某种颜色，并在项目的其他地方使用，而不是重写颜色值。

　　例如，下面的例子：

　　$ black:# 000000；$primary-font: Ubuntu ， Helvetica ，sans-serif。$单位：1人民币；车身{颜色：$黑色；font-family:$ primary-font；填充：# { $ unit * 2 }；}CSS也支持变量和自定义属性。以下是CSS中的自定义属性：

　　-黑色：# 000000；-宽度：800px- primaryFont: Ubuntu ， Helvetica ，无衬线字体；body { width:var(-width)；颜色：var( -黑色)；font-family:var(-primary font)；}但是CSS自定义属性在运行时比SCSS变量更耗时。

　　这是因为浏览器将在运行时处理这些属性。另一方面，SCSS将被转换成CSS并在预处理阶段处理变量。因此，变量的使用和代码重用在SCSS比CSS有更好的表现。

　　SCSS允许嵌套语法——更简洁的源代码

　　假设您有以下CSS代码块：header { padding:1 rem；边框-底部：1px纯灰；}.标题。导航{ list-style:none；}.标题。导航Li { display:inline-flex；}.标题。阿利导航{ display:flex；填充：0.5雷姆；颜色：红色；}上面的代码看起来很混乱。为了给子元素添加样式，必须重复声明同一个父元素。

　　但是如果我们使用SCSS的嵌套语法，我们可以写出更简洁的代码。如果上面的代码是在SCSS写的，它看起来像这样：header { padding:1 rem；边框-底部：1px纯灰；导航{ list-style:none；Li { display:inline-flex；a { display:flex；填充：0.5雷姆；颜色：红色；}}}}因此，与传统的CSS相比，使用SCSS设计组件显得更加优雅简洁。

　　@extend function 3354避免重复同一风格！

　　在SCSS中，我们可以使用@extend在不同的选择器中共享相同的属性。带有占位符的@extend的用法如下：

　　% unstyled-list { list-style:none；边距：0；填充：0；}%unstyled-list是一个可以避免重复写代码的语法糖。我们可以在不同的地方使用这个列表样式模板，例如：搜索结果{ @ extend % unstyled-list；}.广告{ @ extend % unstyled-list；}.仪表板{ @ extend % unstyled-list；}同样，我们可以在所有引入了这个定义的样式表中重用它。

　　SCSS也有很多功能，比如函数，混合，循环，可以让我们的前端开发更加高效。

　　我应该从SCSS转到CSS吗？

　　在上面，我们探讨了CSS提供的现有功能和SCSS的功能。但是，如果我们将CSS与SCSS进行比较，我们会发现，还有一些必要的功能无法在CSS中使用。

　　随着Web应用的不断发展，样式表会变得越来越复杂和庞大。CSS的嵌套功能会大大提高代码的可读性，让我们在开发这类项目时得心应手。然而，截至本文撰写之时，CSS尚未支持该功能。CSS不能处理流控制规则。SCSS有内置的流控制规则，比如“if”、“else”、“each”、“for”和“while”。作为一名程序员，我发现这个函数对于定义样式非常有用。它还允许我们编写更少、更简洁的代码。此外，SCSS还支持标准的数值运算符集，而在CSS中我们必须使用calc()函数来完成数值运算。SCSS的数值运算也可以在其兼容单位之间自动转换。而CSS函数calc()，几乎没有任何限制。例如，除法中的除数必须是数字，或者乘法中至少有一个参数必须是数字。

　　另一个重要方面是风格重用，这是SCSS的“杀手锏”。在这方面，SCSS提供了许多功能，如内置模块、地图、循环和变量。因此，我认为即使CSS中诞生了许多新功能，SCSS仍然是一个更好的选择。你可以在下面的评论区谈谈你的想法。

　　这篇关于CSS3是否真的会取代SCSS的文章到此为止。有关CSS3是否会取代SCSS的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。