青岛中联优谷

what is Sass

2018-08-24

青岛网站建设
引用Sass官方网站:
Sass再次使CSS变得有趣。Sass是CSS 3的扩展,添加嵌套规则、变量、混合器、选择器继承等等。它被转换成格式良好的标准css,使用命令行工具或web框架插件。
因此,Sass是编写CSS的一种更简洁、更实用的方法。当然,WebWorkbench在编写Sass时不需要使用命令行工具或web框架插件,我们将在保存时生成CSS!
开始
CSS进口
Dart Sass 1.11的最大特性是支持导入普通CSS文件。这是一个期待已久的特性,虽然我们最初计划等待它,直到我们推出即将到来的模块系统,我们最终决定更早地实现它.
现在您可以导入一个css文件,比如styles.css,只是通过写作@import "styles"。该文件将被解析为普通CSS,这意味着任何Sass特性,如变量或混合或插值将被禁止。它定义的CSS将成为样式表的一部分,并且可以是@extend就像其他风格一样。
有几个注意事项:因为scss是普通css的超集,所以它仍然会编译。@import "styles.css"(带有显式扩展)的CSS@import规则。如果要将CSS文件导入Sass编译,则必须省略扩展名。https://github.com/sass/libsass/issues/2699
而且,这个特性并不完全在LibSass实施现在还没有。它仍然有自己的旧行为,它导入CSS文件,但将它们解析为SCSS,并允许所有额外的Sass功能。这种行为很快就会被废弃,最终它将产生错误,而不是普通的CSS,就像Dart Sass今天所做的那样。
CSSmin()和max()
Dart Sass 1.11还增加了对CSS的支持min()和max()数学函数对于那些不熟悉的人来说,这些函数的工作方式很像calc(),除非它们返回一系列值的最小值或最大值。例如,您可以编写width: max(50%, 100px)将元素设置为父元素宽度的50%或宽100 px,以较大者为准。
因为Sass有自己的函数min()和max()到目前为止,很难使用这些CSS函数。Dart Sass 1.11将根据您是否传递动态Sass值,智能地决定是使用普通CSS函数还是内置Sass函数。例如:
如果您传递一个变量,Sass函数将被调用,如max($width, 100px).
如果调用另一个Sass函数,将调用Sass函数,如max(compute-width(), 100px).
如果您只使用简单的css编号,它将编译成一个普通的css函数,如max(50% + 10px, 100px).
即使使用插值,它仍然会编译成普通的css函数,如max(50% + #{$width / 2}, #{$width}).
这保持了向后兼容性-与Sass函数的现有用途兼容,同时用户使用CSS函数的方式与普通CSS中的CSS功能相同。
这个特性尚未在利巴斯或红宝石Sass.