网站优化如何做pc指数,成都科技网站建设联系电话,免费图文模板,搜索引擎优化案例分析目录 use加载成员选择命名空间私有成员配置使用 Mixin重新赋值变量 use
从其他 Sass 样式表中加载 mixins、函数和变量#xff0c;并将来自多个样式表的 CSS 组合在一起。use加载的样式表被称为“模块”。
加载成员
// src/_corners.scss
$radius: 3px;mixin rounded {bord… 目录 use加载成员选择命名空间私有成员配置使用 Mixin重新赋值变量 use
从其他 Sass 样式表中加载 mixins、函数和变量并将来自多个样式表的 CSS 组合在一起。use加载的样式表被称为“模块”。
加载成员
// src/_corners.scss
$radius: 3px;mixin rounded {border-radius: $radius;
}// style.scss
use src/corners;.button {include corners.rounded;padding: 5px corners.$radius;
}选择命名空间
默认情况下模块的命名空间只是其 URL 的最后一个组成部分没有文件扩展名。但是有时您可能想要选择不同的命名空间——您可能想要为经常引用的模块使用较短的名称或者您可能正在加载具有相同文件名的多个模块。你可以通过写use url as namespace来做到这一点。
// src/_corners.scss
$radius: 3px;mixin rounded {border-radius: $radius;
}// style.scss
use src/corners as c;.button {include c.rounded;padding: 5px c.$radius;
}甚至可以通过编写use url as *.不过建议只对编写的样式表执行此操作否则可能会引入导致名称冲突的新成员 // src/_corners.scss
$radius: 3px;mixin rounded {border-radius: $radius;
}// style.scss
use src/corners as *;.button {include rounded;padding: 5px $radius;
}私有成员 如果你想让一个成员对整个包而不是单个模块私有只是不要从你的包的任何入口点转发它的模块你告诉用户加载以使用你的包的样式表。您甚至可以在转发其模块的其余部分时隐藏该成员 // src/_corners.scss
$-radius: 3px;mixin rounded {border-radius: $-radius;
}// style.scss
use src/corners;.button {include corners.rounded;// This is an error! $-radius isnt visible outside of _corners.scss.padding: 5px corners.$-radius;
}配置
样式表可以使用!default标志定义变量以使其可配置。要加载带有配置的模块使用useurlwith加载variable:value,variable:value样式配置的值将覆盖变量的默认值。
// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;code {border-radius: $border-radius;box-shadow: $box-shadow;
}// style.scss
use library with ($black: #222,$border-radius: 0.1rem
);使用 Mixin
使用use ... with配置模块非常方便尤其是在使用编写的库时import规则。但它并不是特别灵活不建议将其用于更高级的用例。如果发现自己想要一次配置多个变量将映射作为配置传递或者在模块加载后更新配置请考虑编写一个mixin来设置您的变量然后再编写一个mixin来注入样式。
// _library.scss
$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;/// If the user has configured $-box-shadow, returns their configured value.
/// Otherwise returns a value derived from $-black.
function -box-shadow() {return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}mixin configure($black: null, $border-radius: null, $box-shadow: null) {if $black {$-black: $black !global;}if $border-radius {$-border-radius: $border-radius !global;}if $box-shadow {$-box-shadow: $box-shadow !global;}
}mixin styles {code {border-radius: $-border-radius;box-shadow: -box-shadow();}
}// style.scss
use library;include library.configure($black: #222,$border-radius: 0.1rem
);include library.styles;重新赋值变量
加载模块后可以重新赋值其变量。
// _library.scss
$color: red;// _override.scss
use library;
library.$color: blue;// style.scss
use library;
use override;
debug library.$color; // blue如果使用as *给该模块中定义的变量赋值将覆盖其在该模块中的值。
