前端-css(预编译器sass)

打印 上一主题 下一主题

主题 980|帖子 980|积分 2940

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
1.sass(scss->sass第三代)


Sass3 -> Scss(Sassy CSS),SCSS(Sassy CSS) 是 CSS 语法的扩展.
2.scss解释

Sass 支持尺度的 CSS 多行解释 /* */,以及单行解释 //,前者会 被完备输出到编译后的 CSS 文件中,而后者则不会

3.scss定义变量

Variables: $



全局变量与局部变量
 

关于scss变量类型,我们看官网给的:

4.scss引入



5.混合指令 (Mixin Directives)

 定义混合指令 @mixin和 引用混合样式 @include:


传参方式:

还可以了解一下一下官网提及的情况:
偶尔,不能确定混合指令需要利用多少个参数,比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时,可以利用参数变量 … 声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处置惩罚:

6.scss继续@extend


7.对比混合指令和继续



混合模式下产生的代码冗余比力多.
@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))

10.scss@use和@forward

高级版@import和export

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

涛声依旧在

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表