CSS3 真的会替代 SCSS 吗


Posted in HTML / CSS onMarch 09, 2021

当谈及设置网页样式的时候,我们可以选择在项目中使用纯 CSS 或是 SCSS(除了其它处理器之外)。SCSS 是 CSS 的超集。大多数的开发者都认为,受益于高级的功能和清晰的语法,SCSS 使用起来比 CSS 更加方便。

在这篇文章中我想要带着大家一起探索 SCSS 的功能以及 CSS 这些年来在功能上的提升。此外,我还会评估是否可以在实际项目中用 CSS 替代 SCSS。

CSS 当前的功能

CSS 自诞生以来已经取得了很大的进展。近些年来 CSS 的发展也降低了在动画领域使用 JavaScript 的必要性。现代浏览器甚至使用了 GPU 去提升这些 CSS 动画的性能。我们现在甚至只需要稍微学习一下,就可以使用 CSS 构建复杂的响应式网格布局。

如今 CSS 有了许多新的功能,但本文只会重点提及一些在现代 Web 应用中常用的新功能。

  • 在任何 Web 应用的构建中,最主要的一部分就是页面的布局。我们当中的大多数人这些年都依赖于诸如 Bootstrap 这样的 CSS 框架,但 CSS 如今已经提供了 Grid(网格)、Subgrid(子网格)、Flexbox(弹性盒)等新功能去原生地构建布局。虽说 Flexbox 在开发者当中广受欢迎,但 Grid 布局也正迎头赶上。
  • 灵活的文字排版
  • Transition 和 Transform 的强大能力让我们不再需要使用 JavaScript 去制作动画
  • 自定义属性或变量

 SCSS 的功能

SCSS 支持使用变量 —— 避免冗杂的代码

我们其实可以在我们的样式表中重用一堆的颜色 color 或其他元素定义(例如字体 font )。为了做到在统一的一个地方声明这些可重用的东西,SCSS 为我们提供了变量功能,让我们能够用一个变量名表示某个颜色,并在项目的其它地方使用该变量名,而不是重写一遍颜色值。

例如下面这个例子:

$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;

body {
    color: $black;
    font-family: $primary-font;
    padding: #{$unit * 2};
}

CSS 也支持变量和自定义属性,以下就是 CSS 中的自定义属性:

--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;

body {
    width: var(--width);
    color: var(--black);
    font-family: var(--primaryFont);
}

但是在运行时 CSS 自定义属性比 SCSS 变量更耗时。

这是因为浏览器会在运行时去处理这些属性。而 SCSS 则相反,它在预处理阶段会被转化为 CSS,并去处理变量。因此,SCSS 中变量的使用和代码的重用相比 CSS 而言有着更好的性能。

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

假如有下面这样的 CSS 代码块:

.header {
    padding: 1rem;
    border-bottom: 1px solid grey;
}

.header .nav {
    list-style: none;
}

.header .nav li {
    display: inline-flex;
}

.header .nav li a {
    display: flex;
    padding: 0.5rem;
    color: red;
}

上述的代码看起来很混乱,为了给子元素添加样式,不得不重复声明同一个父元素。

但如果使用 SCSS 的嵌套语法,我们可以编写更简洁的代码。上述的代码如果用 SCSS 编写,是这样的:

.header {
    padding: 1rem;
    border-bottom: 1px solid grey;

    .nav {
        list-style: none;

        li {
            display: inline-flex;

            a {
                display: flex;
                padding: 0.5rem;
                color: red;
            }
        }
    }
}

因此,与传统的 CSS 相比,使用 SCSS 设计组件似乎更加优雅而简洁。

@extend 功能 —— 避免重复同样的样式!

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

%unstyled-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

%unstyled-list 是一个可以避免重复编写代码的语法糖,我们可以在不同的地方使用这个列表样式模版,例如说:

.search-results {
    @extend %unstyled-list;
}

.advertisements {
    @extend %unstyled-list;
}

.dashboard {
    @extend %unstyled-list;
}

同样,我们可以在所有引入了这个定义的样式表中重用它。

SCSS 中还有很多例如 函数 、 混入 、 循环 的功能,能让我们的前端开发更加高效。

我应该从 SCSS 切换到 CSS 吗?

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

  • 随着 Web 应用的不断发展,样式表会变得越发复杂和庞大。CSS 的嵌套功能将大幅度地提高代码的可读性,让我们在开发此类项目的时候得心应手。但是,截止撰写本文的时间,CSS 尚未支持该功能。
  • CSS 无法处理流控制规则。 SCSS 内置提供了诸如 @if@else@eachfor@while 的流控制规则。作为程序员,我发现这个功能对于定义样式来说是非常有用的。这也让我们可以编写更少更简洁的代码。
  • 此外,SCSS 还支持数字运算符的标准集,而在 CSS 中我们必须使用 calc() 函数才能完成数值运算。SCSS 的数值运算还能在其兼容的单位之间进行自动转换。

但是, calc() 这个 CSS 函数几乎没有限制,例如除法中除数必须是数字,或是对于乘法运算至少有一个参数是数字。

  • 另一个重要方面是样式重用,这是 SCSS 的”杀手锏“。在这个方面,SCSS 提供了许多功能,例如内置模块、映射、循环和变量。

因此我认为,即使 CSS 已经诞生了很多新功能,SCSS 仍然是更好的选择。你可以在下面的评论区中谈谈你的想法。

到此这篇关于CSS3 真的会替代 SCSS 吗的文章就介绍到这了,更多相关CSS3 会替代 SCSS 吗内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 #HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 #HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 #HTML / CSS
You might like
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
深入理解Promise.all
2018/08/08 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python模拟三级菜单效果
2017/09/11 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
django表单的Widgets使用详解
2019/07/22 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
大学生党员自我批评
2014/02/14 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
代理人委托书
2014/09/16 职场文书
廉洁自律证明
2015/06/24 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers