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 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php批量上传的实现代码
2013/06/09 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python flask实现分页效果
2017/06/27 Python
python 图像平移和旋转的实例
2019/01/10 Python
用Python逐行分析文件方法
2019/01/28 Python
Python中dict和set的用法讲解
2019/03/28 Python
python 动态绘制爱心的示例
2020/09/27 Python
《曹刿论战》教学反思
2014/03/02 职场文书
医院保洁服务方案
2014/06/11 职场文书
学生打架检讨书
2014/10/20 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
会计入职心得体会
2016/01/22 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
win7配置本地ftp服务器的图文教程
2022/08/05 Servers