网页设计:如何将CSS转换为Sass和SCSS

CSS是一种非常简单明了的语言,但是当它变得太长时–假设成千上万行,它将变成维护的“噩梦”。一切都太复杂了,难以维护,我们会迷失要跟上或覆盖哪些样式规则。因此,创建了CSS预处理程序以使编写CSS可编程且更易于维护。 如果您刚刚从CSS转换为Sass,则可能正在考虑将您的旧CSS转换为Sass或SCSS。好吧 WP网站建设

CSS是一种非常简单明了的语言,但是当它变得太长时–假设成千上万行,它将变成维护的“噩梦”。一切都太复杂了,难以维护,我们会迷失要跟上或覆盖哪些样式规则。因此,创建了CSS预处理程序以使编写CSS可编程且更易于维护。

如果您刚刚从CSS转换为Sass,则可能正在考虑将您的旧CSS转换为Sass或SCSS。好吧,如果是这样,您可以使用名为css2sass的第三方工具。

使用CSS2SASS

该工具非常简单直观-我什至不必告诉您如何使用它,但出于演示目的,我们将对该工具进行一些测试。首先,给出以下CSS代码:

header .nav {
margin-top: 100px;
}
header .nav li {
margin-left: 10px;
}
header .nav li a {
height: 30px;
line-height: 10px;
}

我们想将其转换为Sass语法,将其转换为:

header .nav
margin-top: 100px
li
margin-left: 10px
a
height: 30px
line-height: 10px

现在,使用缩进将样式规则嵌套在前面的选择器下,以区分级联级别。如果将其转换为SCSS语法,则级联将使用大括号来区分,就像CSS中一样。

相同的样式规则

让我们再试一次。这次,我们有以下两个具有完全相同的样式规则的选择器,我们将把它隐藏为Sass语法。

.footer {
color: #b3b3b3;
background-color: #fafafa;
}
.copy {
color: #b3b3b3;
background-color: #fafafa;
}

生成的输出非常聪明,此工具将选择器连接在一行中,并使用逗号分隔它们,如下所示。

 

.footer, .copy
color: #b3b3b3
background-color: #fafafa

虽然,这并不是我真正期望的。如果输出是在Selector Inheritance中,可能会更好,可能类似于下面的代码。

 

.inherit1
color: #b3b3b3
background-color: #fafafa
.footer
@extend .inherit1
.copy
@extend .inherit1

伪类和选择器组合

最后,我们想尝试使用:hover 伪类和选择器组合转换一些样式规则,如下所示。

.button:hover {
color: #ffffff;
background-color: #bf813d;
}
.button.active {
background-color: #986731;
}

输出是预期的。像这样,该工具将伪类和选择器组合与&符号嵌套在一起。

.button
&:hover
color: #ffffff
background-color: #bf813d
&.active
background-color: #986731

改进空间

该工具在识别我们的CSS级联结构以将其适当地转换为Sass或SCSS语法方面有一些限制。但是,肯定还有改进的空间。

我不太确定是否可以将Compass集成到此转换工具中。如果我们能够转换以下CSS3@font-face规则,那就太好了:

@font-face {
font-family: "DroidSansRegular";
src: url("fonts/DroidSans-webfont.eot");
src: url("fonts/DroidSans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/DroidSans-webfont.woff") format("woff"), url("fonts/DroidSans-webfont.ttf") format("truetype"), url("fonts/DroidSans-webfont.svg#DroidSansRegular") format("svg");
font-weight: normal;
font-style: normal;
}

…进入Compass @font-facemixin,如下

@include font-face("DroidSansRegular", font-files("DroidSansRegular-webfont.ttf", "DroidSansRegular-webfont.otf", "DroidSansRegular-webfont.woff"), "DroidSansRegular-webfont.eot", normal);

但是,总的来说,对于刚开始使用Sass的人来说,此工具是许多不错的地方之一。转换旧的CSS,您将看到它是如何用Sass或SCSS语法构造的。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/104272

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买