前端-css(预编译器sass)
1.sass(scss->sass第三代)https://i-blog.csdnimg.cn/direct/5be14ba755e94ceeb013d308b1d1ab7d.png
Sass3 -> Scss(Sassy CSS),SCSS(Sassy CSS) 是 CSS 语法的扩展.
2.scss解释
Sass 支持尺度的 CSS 多行解释 /* */，以及单行解释 //，前者会 被完备输出到编译后的 CSS 文件中，而后者则不会
https://i-blog.csdnimg.cn/direct/1bb375d85eec4d09a18dcb161d50ed35.png
3.scss定义变量
Variables: $
https://i-blog.csdnimg.cn/direct/0ac2d9ba4f9942fa9661f84880862b36.png
https://i-blog.csdnimg.cn/direct/59bb2a1677ca4890984e5d9069e6bd88.png
全局变量与局部变量
https://i-blog.csdnimg.cn/direct/a1edf29e1ea2499380b31cadb9b87429.png https://i-blog.csdnimg.cn/direct/8832ee0773ab45b5a8041a997412b727.png
关于scss变量类型,我们看官网给的:
https://i-blog.csdnimg.cn/direct/85c56e06cbd442debfbd1df7c1e50512.png
4.scss引入
https://i-blog.csdnimg.cn/direct/a047963bce594bc7b7f2572d5fffb3d4.png
https://i-blog.csdnimg.cn/direct/9ca9d734ab3c47d8a32888a56ab21c6d.png
5.混合指令 (Mixin Directives)
定义混合指令 @mixin和 引用混合样式 @include:
https://i-blog.csdnimg.cn/direct/43999ac5ce384175b9a8bd8f51b1bc54.png
传参方式:
https://i-blog.csdnimg.cn/direct/8004cf38f87e431895281e79f9c2f71a.png
还可以了解一下一下官网提及的情况:
偶尔，不能确定混合指令需要利用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以利用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处置惩罚：
https://i-blog.csdnimg.cn/direct/8385138d84234ef5ad94bd283f92bfd7.png
6.scss继续@extend
https://i-blog.csdnimg.cn/direct/fd4fd6713aac472aa445a6a728637733.png
7.对比混合指令和继续
https://i-blog.csdnimg.cn/direct/9d3ce36bfeb8409a88d4981572034811.png
https://i-blog.csdnimg.cn/direct/c518819ef23342d79efb664e555f1dd4.png
混合模式下产生的代码冗余比力多.
@mixin 和 @include 更偏重于定义和复用一组样式，而 @extend 更偏重于样式的继续和扩展。
@mixin 和 @include 的长处包罗：
[*]可以传递参数，实现更复杂的样式定制。
[*]对于不干系的样式组合，更具构造性和可读性。
@extend 的长处包罗：
[*]减少代码重复，尤其是在类之间有相似样式时。
[*]更直观地表达样式之间的继续关系。
8.scss运算符根本利用
这里自己参考一下文档就行了哈
Sass教程 Sass中文文档 | Sass中文网
9.scss函数
①color:
//颜色变亮lighten($color,$amount(0-100%))
//颜色变暗darken($color,$amount(0-100%))
//低落透明度opacify($color,$amount(0-1))
https://i-blog.csdnimg.cn/direct/afa001f6c420446b9b436b297d39f266.png
10.scss@use和@forward
高级版@import和export
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]