sass 引入sass
“我讨厌控制台,我不使用Ruby,也不在乎变量。为什么在世界上我应该学习Sass?” 别再忙了,去听...
1.真的很简单!
您已经知道Sass! 是的你是。
Sass具有与CSS完全相同的语法。 巧合? 不。 萨斯始建让设计师自己喜欢可以把它捡起来很容易,学会所有额外津贴按照自己的节奏, 如果他们想。
没有终端
当我第一次看到Sass时,我一想到“终端”一词,便转向另一种方式。 这并不是说我担心终端,它不是一个非常有用的工具,而且我已经在多年(绝对必要)使用它的几年了,但是我只是喜欢一个用户界面。 如果没有UI,我将不会使用它。
你猜怎么了? 我发现有几种选择。
- Scout App(Windows,Mac)免费
- 指南针应用程序(Windows,Linux,Mac)10美元
- Fire应用程式(Windows,Linux,Mac)14美元
- CodeKit(仅Mac)25美元
- Live Reload(仅Mac)9.99 $) (正在开发Windows版本 )
自从它在公共Beta版以来,我就一直使用它。 在所有的时间里,我使用Sass终端约有3次,我也可以完全避免使用它。
无压力
因此,您不喜欢变量。 为什么在世界上,您应该花时间围绕mixin,函数和所有爵士乐进行思考? 好吧,你没有。 Sass不会因此惩罚你。 但是,我可以向您保证,即使有最纯粹的意图,您迟早也会发现自己正在使用它们。 不是因为您必须这样做,而是因为您想要。 对于mixin也是如此。
即使您永远不会编写单个Sass函数或mixin,但最终仍会使用它们,因为您会发现越来越多的框架为您辛苦工作,让您从中受益通过使用mixin。
@进口
因此,让我们假设您想在下一个项目中使用normalize.css 。 你打算怎么做? 在您HTML中添加另一个链接标记? 还是只在CSS中使用@import
语句? 在这两种情况下,您都需要添加额外的HTTP请求; 也许没什么大不了的,但这不是最佳方法,也不是最佳实践。
您可以只复制normalize的内容并将其粘贴到样式表中,但是突然您CSS文件变得一团糟,您甚至还没有启动项目! 那么,当normalize.css更新时,您将如何处理? 再次复制并粘贴吗?
在Sass中,您可以只使用良好的ol'@ @import
语句,然后让Sass将您的normalize.css拉入stylesheet.css中(您必须将文件重命名为.scss,但这又没什么大不了的)。
2. CSS是湿的
在实际的编程语言中通常会引用DRY( 不要重复自己 )原则,但是没有理由不应该在CSS中将它们应用到某种程度。 毕竟,这不是CSS最初发明的原因吗? 不用在HTML中一遍又一遍地指定样式,您可以突然创建一个类名并在那里声明所有样式。
但是,一旦开始导入其他人编写的代码(例如框架,重置等),您很可能会重复执行某些操作。
例如,normalize.css将默认的主体字体设置为“ sans-serif”。 我喜欢它,这是一个很好的默认设置。 但是,如果我们要使用自定义字体怎么办? 我们应该编辑normalize.css吗? 如果规范化更新了怎么办? 我们将不得不重新做一遍。
最后,我们可能最终会在CSS中使用@import。
现在,我们只需要确保在样式表的顶部包含规范化即可,并且一切顺利。 我们将覆盖字体家族,然后确保在最后放一个!important
语句,对吗? 错误!
可悲的是,normalize.css不是写在萨斯(还),但也有良好的 人谁已经转换到normalized.css萨斯,你可以在你CSS只是使用。 例如:
$font-family: "Comic Sans";
当然,您应该已经在使用Normalize 2.0.1+,它不再包含字体家族声明,但这更多地是问题和解决方案的说明。
3.保持领先地位!
CSS是一种不断发展的语言。 如果您仍然认为变量是错误的,请考虑以下CSS规范 ,其中提供了以下示例:
:root {
var-header-color: #06c;
}
h1 { background-color: var(header-color); }
好吧,如果这不是变量的丑陋版本,我不知道它是什么!
关键是CSS是一种不断发展的语言,因此,即使您尽可能长时间地忽略预处理器,将来在某个时候仍然会被迫无论如何都要学习变量。 我的建议是保持领先地位,并尽早采用变量之类的东西!
不只是变量! Sass和其他预处理器对将来CSS规范有很大的影响。 这是另一个正在开发的规范 ,它将在将来允许CSS代码嵌套。 它看起来像这样 :
/*The following example using Hierarchies:*/
div, p {
& .keyword {color: green;}
font-size: 10px;
& .constant {
color: red;
&:hover:after { content: " [" attr(value) "]";}
background-color: green;
}
}
/*...produces the same results as the following CSS:*/
div, p {font-size: 10px;}
div .keyword, p .keyword {color: green;}
div .constant, p .constant {color: red; background-color: green;}
div .constant:hover:after, p .constant:hover:after {content: " [" attr(value) "]";}
在规范的情况下,实际上没有代码被编译, 这就是CSS将来可能的外观!
影响未来
CSS规范并不是由一群特别有创造力的外星人创建的,他们想要从遥远的星系远程控制我们的网络生活。 否。规范是由人们开发的,这意味着其他人,特别是开发人员和设计师(如您自己)对正在开发的规范有影响。 通过使用像Sass这样的预处理器,您将参与更多的事情。 您正在进一步推动这项技术。
如果您提出了一个构想或功能要求,则可以提出要求 ,或者只是参与有关特定功能的行为方式以及是否需要该功能的讨论 。
4.从社区中受益
多亏了Sass周围的社区,您可以利用其他人开发的工具。
例如,ZURB建立了一个名为Foundation for Sass的大型框架。
如果您更喜欢轻便的东西,可以考虑使用Inuit.css 。
当然,还有Compass ,它提供了一个包含大量有用选项的框架。
纤细的波旁威士忌确实如此。
假设您今天感到冒险,并且正在考虑使用“ rem”作为度量单位。 如何使用rem为不支持它们的过时浏览器提供后备功能? 幸运的是,您只声明了两次font-size; 一次以像素为单位,然后再次以rems呈现给能够理解和解析它的浏览器。
h1 {
font-size: 16px;
font-size: 1rem;
}
这可能是您最好的选择,但是这意味着在任何要使用rem的地方,您都必须输入两次。 另外,虽然16px = 1rem是一个简单的计算,但是如果您需要19px怎么办? 现在在脑子里做数学。 你能? 是的,我也使用了计算器(1.1875rem)。
因为在Sass社区中有一些 很棒的 人 ,所以您可以快速搜索Github并下载此_rem.scss文件(看起来很吓人,不是吗?),将其导入(我们稍后将讨论导入),然后现在您可以神奇地做到:
h1 {
@include rem(font-size, 2rem)
}
Sass会自动将其转换为
h1 {
font-size: 36px;
font-size: 2rem;
}
如果有一天您可以放弃rem后备支持,则不必进行正则表达式搜索并替换所有文档。 您可以将其添加到样式表的顶部。
$print-rem-px-fallbacks: false;
我想您可能会猜到“打印rem px后备”设置的作用:)
是。 在此示例中,我们使用了三个Sass功能,一个变量,一个自定义mixin和一个“ import”语句,但这真的那么难吗?
5.捷径
因此,这是您在Web Developer余生中将要做的事情。 定义链接颜色。 你知道,这种事情:
a {
color: blue;
}
a:hover {
color: yellow;
}
这是一个通常重复执行的任务,但是我不建议您为这种情况滚动自己的Sass Mixin。 相反,为什么不使用Compass(Sass框架)呢?
a{
@include link-colors(blue, yellow);
}
这将被编译为与上面完全相同的东西。 而且它的阅读效果也很好(“包括链接颜色:蓝色和黄色”),以防万一您想知道它如何工作, 请访问指南针文档 。
如果您使用的是任何支持代码段的编辑器,则可以设置(或下载)一个代码段,以自动在您的语句前添加@include
(不要吓到您) 。
Sass本身提供了大量非常有用的功能。 即使从设计师的角度来看, Sass文档并不是万能的,但是它包含了许多有关Sass功能的非常有用的信息,例如我最喜欢的Sass功能之一-颜色功能。 如果我需要变体,我不必再打开Photoshop来尝试色彩。 我可以简单地做这种事情:
a {
color: lighten(black, 10%);
}
哪个编译成
a {
color: #1a1a1a;
}
结论
Sass并不是硬核开发人员使用的那种Ruby。 它应该激发您(设计师)的灵感,并在日常工作中为您提供帮助。 它不是编程语言,而是Web前沿。
Sass可以像您想要的那样简单。 如果您对是否可以在Sass中做某事感到好奇,只需快速搜索google,您可能会感到惊讶!
最重要的是-立即停止工作, 立即开始使用Sass ,尤其是如果您想保持领先地位! 并为所有Sass教程睁大眼睛,选择喜欢的Sass功能并使用它们!
翻译自: https://webdesign.tutsplus.com/tutorials/5-reasons-for-picking-up-sass-today--webdesign-10254
sass 引入sass