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属性box-sizing使用指南
Dec 09 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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
PHP初学者头疼问题总结
2006/07/08 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
在vue-cli中组件通信的方法
2017/12/16 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python encode和decode的妙用
2009/09/02 Python
python处理PHP数组文本文件实例
2014/09/18 Python
深入Python函数编程的一些特性
2015/04/13 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
django项目中新增app的2种实现方法
2020/04/01 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
C# .NET面试题
2015/11/28 面试题
教师实习的自我鉴定
2013/10/26 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
Pandas数据类型之category的用法
2021/06/28 Python
PHP RabbitMQ消息列队
2022/05/11 PHP