scss子组件内如何深度更改css

在SCSS（Sassy CSS）中，如果你想在子组件内部深度修改CSS样式，通常会通过嵌套规则（nested rules）或者使用变量（variables）和混合函数（mixin）来实现。这里有几个方法：

1. **嵌套规则**:
- 使用嵌套语法可以在子组件内部定义更具体的CSS选择器。例如：

     .parent-component {
       @include child-component-scope {
         /* 在这个块中，可以定义child-component内的特定样式 */
         color: red;
       }
     }

`child-component-scope`是你自定义的一个嵌套块，它会被应用到`.parent-component.child-component`的选择器上。

2. **变量**:
- 可以定义全局变量，在子组件内引用并修改：

     $primary-color: blue;

     .parent-component {
       background-color: $primary-color;

       &__child-component {
         background-color: lighten($primary-color, 50%); // 修改颜色
       }
     }

3. **混合（Mixin）**:
- 创建混入（mixin），并在需要的地方调用，传递所需值：

     @mixin custom-style($property: black) {
       color: $property;
     }

     .parent-component {
       @include custom-style(red);

       .child-component {
         @include custom-style(lightblue);
       }
     }

每个方法都有其适用场景，可以根据实际需求选择最合适的。