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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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加密解密的代码
2007/07/16 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
如何判断图片地址是否失效
2007/02/02 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
初始Nodejs
2014/11/08 NodeJs
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
js实现旋转木马效果
2017/03/17 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Django model序列化为json的方法示例
2018/10/16 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python add_argument()用法解析
2020/01/29 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python进度条显示之tqmd模块
2020/08/22 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书