首页 > 软件开发 > HTML >

Sass(Scss)继承,变量,占位符

来源:互联网 2023-03-16 19:15:30 69

Sass / Scss 的继承规则,全局变量和局部变量,占位符RSv办公区 - 实用经验教程分享!

Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

工具/原料

  • HBuilder(自动编译)
  • html,sass/scss

方法/步骤

  • 1

    Sass / Scss 继承(不使用后代选择器)RSv办公区 - 实用经验教程分享!

    @extendRSv办公区 - 实用经验教程分享!

    1.重复选择器RSv办公区 - 实用经验教程分享!

    2.css层叠规则:优先级高的选择器样式显示,当选择器优先级相同时,后边的样式显示。RSv办公区 - 实用经验教程分享!

    Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

  • 1此文章未经许可获取自百度经验
  • 2

    继承:RSv办公区 - 实用经验教程分享!

    可以继承类样式中所有样式的代码,然后编译出来的css会将选择器合并在一起,形成并集选择器(组合选择器)RSv办公区 - 实用经验教程分享!

    Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

  • 3

    Sass / Scss全局变量和局部变量RSv办公区 - 实用经验教程分享!

    局部变量:在元素里面声明的变量RSv办公区 - 实用经验教程分享!

    全局变量:在元素外面声明定义的变量RSv办公区 - 实用经验教程分享!

    (全局变量的影子:和全局变量名字相同的局部变量)RSv办公区 - 实用经验教程分享!

    Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

  • 4

    普通变量:可以在全局范围内使用RSv办公区 - 实用经验教程分享!

    默认变量:只在值后面加上!defaultRSv办公区 - 实用经验教程分享!

    (图片为全局变量和局部变量的样式显示的页面)RSv办公区 - 实用经验教程分享!

    Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

  • 5

    Sass / Scss占位符 ' % 'RSv办公区 - 实用经验教程分享!

    用占位符声明的代码,如果不被@extend调用就不会被编译RSv办公区 - 实用经验教程分享!

    Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

  • 6

    占位符:编译出来的代码会将相同代码合并在一起,代码简介RSv办公区 - 实用经验教程分享!

    Sass(Scss)继承,变量,占位符RSv办公区 - 实用经验教程分享!

  • 注意事项

    • 个人经验,如有不明白的地方可以提出疑问

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!RSv办公区 - 实用经验教程分享!


    标签: HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码