sass 引入sass_捡起Sass的5个理由今天

最新推荐文章于 2023-06-27 16:09:35 发布

daique1908

最新推荐文章于 2023-06-27 16:09:35 发布

阅读量174

点赞数

文章标签： python java 编程语言人工智能 linux

sass 引入sass

“我讨厌控制台，我不使用Ruby，也不在乎变量。为什么在世界上我应该学习Sass？” 别再忙了，去听...

1.真的很简单！

您已经知道Sass！ 是的你是。

Sass具有与CSS完全相同的语法。巧合？不。萨斯始建让设计师自己喜欢可以把它捡起来很容易，学会所有额外津贴按照自己的节奏，如果他们想。

没有终端

当我第一次看到Sass时，我一想到“终端”一词，便转向另一种方式。这并不是说我担心终端，它不是一个非常有用的工具，而且我已经在多年（绝对必要）使用它的几年了，但是我只是喜欢一个用户界面。如果没有UI，我将不会使用它。

你猜怎么了？我发现有几种选择。

自从它在公共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

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sass 引入sass_捡起Sass的5个理由*今天*

“我讨厌控制台，我不使用Ruby，也不在乎变量。为什么在世界上我应该学习Sass？” 别再忙了，去听... 1.真的很简单！您已经知道Sass！是的你是。 Sass具有与CSS完全相同的语法。巧合？不。萨斯始建让设计师自己喜欢可以把它捡起来很容易，学会所有额外津贴按照自己的节奏，如果他们想。没有终端当我第一次看到Sass时，我一想到“终端”一词，便转向另一种方式...
复制链接

扫一扫