Technicalarticles

通过实例讲解CSS和SCSS他们的具体用法与区别？
作者：赵刘伟 时间：2020-05-14 浏览量：
介绍：

CSS：级联样式表基本上是脚本语言。CSS用于设计网页。
CSS是与HTML和JavaScript一起广泛使用的最重要的Web技术。CSS的文件扩展名为.css。
SCSS：语法很棒的样式表是CSS的超集。SCSS是CSS的更高级版本。SCSS由Hampton Catlin设计，由Chris Eppstein和Natalie Weizenbaum开发。由于其先进的功能，它通常被称为Sassy CSS。SCSS的文件扩展名为.scss。
差异：
SCSS包含CSS的所有功能，并且包含CSS中不存在的更多功能，这使其成为开发人员使用它的不错选择。
SCSS充满了高级功能。
SCSS提供变量，您可以使用变量来缩短代码。与传统的CSS相比，这是一个很大的优势。
在CSS中代码如下：


body{ color: #ffffff; font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif; font-size: xx-large; padding: 2rem;}

输出结果如下：

640 (3).png

在SCSS中代码如下：


$white: #ffffff;$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
body{ color: $white; font: $ubuntu-font; font-size: xx-large; padding: 2rem;}

输出结果如下：

640 (4).png

了解SCSS可帮助您自定义Bootstrap 4。

SASS添加了@import的功能，可让您导入自定义的SCSS文件。
例：


@import "my theme";@import "framework/bootstrap";

SASS允许我们使用嵌套语法。假设如果您必须在“页脚”的“ div”中为特定的“段落”设置样式，则绝对可以通过SASS来实现。
例：


footer {    div {        p {            margin: 2rem;            color: #2f2f2f;        }    }}
最后，使SASS成为一个不错的选择的原因是它有据可查。


返回列表

想和你做个朋友

DO U LIKE?