能否导入Materialize类至SCSS文件？如何自动给指定div内p元素加flow-text类

嘿，我来帮你一步步解决这两个问题：

这得看你是用Materialize的SCSS源码还是CDN版本，两种情况的处理方式不一样：

• 推荐：使用Materialize SCSS源码
  先通过npm安装Materialize的SCSS包：

  npm install materialize-css
  

  然后在你的SCSS文件里导入核心模块（或者按需导入特定组件）：

  @import "~materialize-css/sass/materialize";
  

  这样你就能在自己的SCSS代码里直接复用Materialize的类了——不管是用@extend继承样式，还是修改Materialize的变量做定制，都没问题。

• 如果用CDN加载Materialize CSS
  因为SCSS编译时没法读取CDN里的类定义，直接用@extend会报错。这时候有两个替代方案：

  1. 手动复制flow-text的样式：把Materialize里.flow-text的CSS样式直接抄到你的SCSS里，应用到目标元素：

     .lucy-terms p {
       font-size: 1.4rem;
       line-height: 1.6rem;
       @media only screen and (min-width: 601px) {
         font-size: 1.64rem;
         line-height: 1.6rem;
       }
       @media only screen and (min-width: 993px) {
         font-size: 1.88rem;
         line-height: 1.6rem;
       }
     }
     

  2. 用占位符统一管理样式：先定义一个包含flow-text样式的占位符，再让目标元素继承它，方便后续复用：

     %flow-text {
       font-size: 1.4rem;
       line-height: 1.6rem;
       @media only screen and (min-width: 601px) {
         font-size: 1.64rem;
         line-height: 1.6rem;
       }
       @media only screen and (min-width: 993px) {
         font-size: 1.88rem;
         line-height: 1.6rem;
       }
     }
     
     .lucy-terms p {
       @extend %flow-text;
     }
     

结合上面的导入方式，这里给你最顺手的解决方案：

• 如果用了Materialize SCSS源码
  直接在SCSS里写嵌套规则，用@extend继承.flow-text的样式就行，完全不用在HTML里手动加class：

  .lucy-terms {
    p {
      @extend .flow-text;
    }
  }
  

  编译后的CSS会自动把.flow-text的所有样式同步到.lucy-terms p上，效果和给每个p加class一模一样。

• 如果用CDN版本
  就用上面提到的手动复制样式或者占位符方案，直接给.lucy-terms p写样式就行，最终效果是一样的。

另外，记得在你的Django模板里正确配置sass-processor，比如用{% sass_src 'path/to/your/custom-style.scss' %}来引用编译后的自定义CSS文件哦。

内容的提问来源于stack exchange，提问作者Kurt Peek