作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
当我第一次听说萨斯和其他CSS预处理器时, 我的想法并不是很热情. “为什么我们需要另一个工具来实现已经像CSS一样漂亮的东西呢?”. “我不会用那个的。”. “我的CSS已经足够有序,不需要它了”. “预处理器是为那些不知道如何编写CSS的人准备的 知道如何编写CSS 你不需要预处理器。”. 毕竟,处理器是为那些不知道如何编写CSS的人准备的. 如果有,他们就不需要预处理器了。”. 有一段时间,我一直躲着他们,直到 强迫 在几个项目中使用它.
直到最近我才意识到我是多么喜欢和萨斯一起工作, 当我不得不在一个项目中切换回普通的CSS时. 在那段时间里, 我学到了很多,所以我决定赞美萨斯,让这个世界变得更美好, 让你成为更快乐的人!
我刚刚提到的这个项目, 大型电子商务网站, 有一个单独的CSS文件7184行未压缩的样式声明. 是的,你没看错:七千一百八十四行CSS. 我相信这不是最大的CSS文件 前端开发人员 必须处理的问题,但它足够大,完全是一团糟.
这是您需要萨斯的第一个原因:它可以帮助您组织和模块化样式表. 它不是变量,也不是嵌套. 对我来说,萨斯的关键特性是局部的,以及它如何扩展CSS @import规则以允许它导入SCSS和萨斯文件. 在实践中,这意味着您将能够拆分庞大的样式.CSS文件分成几个更小的文件,这样更容易维护、理解和组织.
@import规则几乎和CSS本身一样长. 然而, 自从你在CSS文件中使用@import后,它就声名狼藉了, 触发单独的HTTP请求, 每个要导入的CSS文件对应一个. 这对站点的性能是有害的. 如果你把它和萨斯一起用,会发生什么呢? 如果你从来没有停下来思考过“预处理器”这个词是什么意思,现在是时候了.
预处理器是一种处理其输入数据以产生输出的程序,该输出用作另一个程序的输入. —维基百科
So, 回到@import规则, 这意味着@import将由萨斯处理,我们所有的CSS和SCSS文件将被编译成一个文件,最终将在我们的实时站点中结束. 用户只需发出一个请求并下载一个文件, 而您的项目结构可以由数百个模块化文件组成. 这是什么风格.一个典型的萨斯项目的scss可能看起来像:
@ import“变量”;
@ import“重置”;
@ import“字体”;
@ import“基地”;
@ import“按钮”;
@ import“布局”;
任何赞扬萨斯的文章都可能首先提到它的明星特性——变量. 变量最常用的用法是调色板. 有多少次你发现几个声明的东西应该是相同的颜色, 因为没有人使用相同的十六进制代码,所以最终在CSS中呈现出略有不同的色调? 萨斯出手相救. 在萨斯中,可以用几乎任何值声明变量. 所以,我们的调色板可以是这样的:
美元的品牌:# 226666;
$二级:# 403075;
$强调:# AA8439;
以“$”开头的单词是萨斯变量. 它的意思是,稍后在样式表中, 你将能够使用这些词, 它们将被映射到你之前定义的值:
身体{
背景:二次美元;
}
.标志{
颜色:美元品牌;
}
a {
颜色:强调美元;
}
答:{徘徊
颜色:美元品牌;
}
想象一下这将如何改变我们的7184行CSS代码,您可能现在就开始渴望使用萨斯. 甚至更好的, 假设有一个重新设计的品牌,你需要更新CSS中的所有颜色. 与萨斯, 您唯一需要做的就是更新这些变量的声明一次, 和baam! 这些变化将围绕样式表进行.
我编写了这个 萨斯迈斯特的例子萨斯的游乐场. 试着把这些变量换成别的东西.
变量的用处不仅仅局限于颜色, 但是字体声明, 大小, 媒体查询, 和更多的. 这是一个很基本的例子, 但是请相信我, 萨斯的可能性是无限的.
嵌套可能是萨斯第二个被提及最多的特性. 当我在使用萨斯之后回到香草CSS, 我看到的CSS文件看起来很杂乱,我不确定它是否被缩小了. 没有嵌套,普通的CSS看起来并不比漂亮的印刷要好多少 .最小值.css 文件:
.标题{
保证金:0;
填充:1 em;
border-bottom: 1px solid #CCC;
}
.header.是固定的{
位置:固定;
上图:0;
右:0;
左:0;
}
.header .nav {
list-style:没有;
}
.header .导航{
显示:inline-block;
}
.header .navi a {
显示:块;
填充:0.5em;
颜色:# AA8439;
}
使用嵌套,您可以在声明的大括号之间添加类. 萨斯将非常直观地编译和处理选择器. 你甚至可以使用&字符来获取父选择器的引用. 回到我们的CSS示例,我们可以将其转换为:
.标题{
保证金:0;
填充:1 em;
border-bottom: 1px solid #CCC;
&.是固定的{
位置:固定;
上图:0;
右:0;
左:0;
}
.nav {
list-style:没有;
li {
显示:inline-block;
a {
显示:块;
填充:0.5em;
颜色:# AA8439;
}
}
}
}
它看起来很漂亮,也更容易阅读. 你可以随意玩这个 例子.
CSS中的重复总是难以避免的. 强调一下这一点也无妨,尤其是当萨斯给你mixins和extends的时候. 它们都是强大的功能,有助于避免大量重复. mixins和extends的可能性似乎没有尽头. 使用mixin,您可以进行参数化的CSS声明,并在整个样式表中重用它们.
例如,假设您有一个盒子模块,里面有一个按钮. 您希望框的边框和按钮的背景具有相同的颜色. 使用香草CSS,你可以这样做:
.盒子{
边框:2px实红色;
}
.盒子 .按钮{
背景:红色;
}
假设您现在想要相同的盒子模块,但使用不同的颜色. 你将在你的CSS中添加如下内容:
.盒子-alt {
边框:2px纯蓝色;
}
.盒子-alt .按钮{
背景:蓝色;
}
现在,假设你想要一个框模块,但是边框更细. 你可以补充说:
.盒子-slim {
边框:1px实红色;
}
.盒子-slim .按钮{
背景:红色;
}
很多重复,对吧? 使用萨斯,您可以抽象这些案例以减少重复. 你可以这样定义一个mixin:
@mixin 盒子($borderSize, $color) {
font: family:宋体;
.按钮{
背景:美元的颜色;
}
}
因此,您的源代码可以简化为:
.盒子{ @include 盒子(2px, red); }
.盒子-alt { @include 盒子(2px, blue); }
.盒子-slim { @include 盒子(1px, red); }
看起来很漂亮,对吧?? 摆弄一下这个 例子. 你可以创建自己的mixins库, 或者更好的是,你可以去社区图书馆.
扩展也是类似的,它们让你从一个选择器到另一个选择器共享属性. 然而, 而不是输出多个声明, 它们输出一个类列表,而不重复您的属性. 这样还可以避免输出中的代码重复. 让我们忘记前面示例中的按钮,看看如何使用 @extend 会和 .盒子.
假设你声明了第一个盒子:
.盒子{
保证金:1 em;
填充:1 em;
边框:2px实红色;
}
现在你想要两个类似的盒子,但是用不同的边框颜色. 你可以这样做:
.盒子-blue {
@extend .箱;
边框颜色:蓝色;
}
.盒子-red {
@extend .箱;
边框颜色:红色;
}
编译后的CSS看起来是这样的:
.盒子, .盒子-blue, .盒子-red {
保证金:1 em;
填充:1 em;
边框:2px实红色;
}
.盒子-blue {
边框颜色:蓝色;
}
.盒子-red {
边框颜色:红色;
}
强大的,对吧? 您可以找到示例 在这里. 如果您查看生成的CSS,就会意识到类 .盒子 是否包含在输出中. 如果不想要这种行为,可以组合 @extend 与“占位符”. 占位符是一个特殊的选择器,它不会在CSS中输出一个类. 例如,我有时发现自己经常重置列表的默认样式. 我通常使用@extend作为占位符,像这样:
% unstyled-list {
list-style:没有;
保证金:0;
填充:0;
}
然后你可以在你所有的样式表中重用这个模式:
.搜索结果{
@extend % unstyled-list;
}
.帖子{
@extend % unstyled-list;
}
.nav {
@extend % unstyled-list;
}
编译后的CSS看起来像这样:
.搜索结果, .帖子, .nav {
list-style:没有;
保证金:0;
填充:0;
}
看看下面的例子 在这里.
绝对! 我不想让这篇文章过于复杂,但是有一个 时髦的 world waiting to be discovered by you; and t在这里 are also a lot of features beyond those: operations, 单行//注释, 功能, 如果你曾经想过“在CSS中做一些‘X’的事情会很棒”, 我确信X已经被萨斯完成了. “具有超能力的CSS”是它的标语,这一点也不接近事实.
去参观 安装页面 开始黑客攻击! 相信我,你不会后悔的.
是的,除了萨斯还有其他选择. 其他预处理器(LESS, Stylus),后处理器,Grunt等. 甚至还有CSS变量. 我并不是说萨斯是唯一的技术. 我想说的是,这是最好的! 至少现在是这样. 不要相信我说的话? 你自己试试吧. 你不会后悔的!
世界级的文章,每周发一次.
世界级的文章,每周发一次.