CSS、less、 Sass、

头像为自己开发微信小程序

已于 2024-09-11 10:50:22 修改

阅读量563

点赞数 1

文章标签： less sass 前端

于 2024-07-24 11:40:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33715850/article/details/140658791

版权

Flex布局

1.1 flex-basis

官方解释：flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

clientWidth： 元素的内容区域的宽度，不包括边框和滚动条的宽度。

自己理解：当flex-basis小于dom内容宽度（不包含padding和边框也就是clientWidth）的时候，dom内容宽度等于它原始的宽度，当flex-basis大于dom内容宽度（不包含padding和边框也就是clientWidth）的时候，dom内容宽度等于flex-basis。

1.2 flex-shrink

官方解释：flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

自己理解：当元素默认宽度（包含边框和padding）大于容器的时候发生收缩（也就是父容器装不下子容器了）。

1 CSS

1.1 css中.a.b 与 .a .b（中间有空格）的区别

区别：

.a.b是获取同时含有a和b的元素
.a .b（中间有空格），是获取.a元素下的所有.b元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="A B">
         我是包含A和B
        <div class="B">我是.A .B 或者是.B .B</div>
    </div>
    <div class="A">
        <div class="B">我是.A .A </div>
    </div>
</body>
<style>
    .A.B {
       color: red; 
    }
    .A .B {
        color: green;
    }
    .B .B {
        color: pink
    }

</style>
</html>

2 Sass

2.1 scss中className='A B' 编译结果

生成三种样式A 、B、A.B 。

在scss中写法：

.A {
  &.B {
    .demo {
      color: red;
    }
  }
  .demo {
    color: pink;
  }
}

这种写法只会生成.A 和.A.B ，这里.A.B是同级别的。所以A里面的demo和B里面的demo是同一个元素。

在SCSS语法中，& 是一个特殊符号，它代表当前选择器的上下文。当你在嵌套规则中使用 &, 它会将嵌套规则与外部选择器组合起来形成一个新的选择器。在你给出的代码示例中：

.sign-ball-float-layout {
  /* ... */
  &.active {
    visibility: visible;
    /* ... */
  }
}



<View className='sign-ball-float-layout active'>

这里的 &.active 实际上是指 .sign-ball-float-layout.active。这意味着这部分的样式规则仅当元素同时拥有 .sign-ball-float-layout 和 .active 类时才会被应用。

当你在JSX或HTML中使用 className='sign-ball-float-layout active' 时，你正在给元素添加两个类：.sign-ball-float-layout 和 .active。当这两个类同时存在时，.sign-ball-float-layout .active 规则（即 &.active 所对应的规则）将被激活，应用其内部定义的样式。

换句话说，&.active 在SCSS中是一种语法糖，它帮助你更简洁地编写针对具有多个类的元素的样式规则。在你的示例中，.sign-ball-float-layout .active 将使元素可见，并对 .overlay 和 .container 子元素应用特定的样式变化，如改变透明度和位置变换。

总结一下，&.active 在SCSS中与你在JSX或HTML中添加的 active 类有直接的联系，它确保了只有当元素同时拥有 .sign-ball-float-layout 和 .active 类时，才会应用特定的样式规则。

但是这样有一个问题

因为className='sign-ball-float-layout active'，所以如果外部定义了一个active，那么它就会影响到<View的渲染。如果在外部定义了overlay类，因为该组件内部的overlay类是在sign-ball-float-layout下面的，所以即使外部定义了overlay类也不会被影响，所以如果不想active被外部影响，要么重新命名，要么把它放到一个父元素里面。