不同预处理器less、scss等下如何写样式穿透

Posted 2023-03-15

参考技术A 在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时候我们就需要样式穿透来实现我们想要的效果。

" 在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。"

在scoped的情况下实现样式穿透：

scss --- css的预处理器

scss(sass):

概念:scss是css预处理器, 世界上最成熟、最稳定、最强大的专业级CSS扩展语言, scss是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.,能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表.

其他css预处理器:sass(scss), less, Stylus, DT CSS, Switch CSS, Turbine, Switch CSS, CSS Cacheer

原理:Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大. 当然浏览器是不认识Sass语法. 开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码.

安装:
sass基于Ruby语言开发而成，因此安装sass前需要安装Rub(安装网址:https://rubyinstaller.org/downloads/)
安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v
gem install sass
gem install compass

编译scss:

//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

vscode 使用scss:

1.安装 easy sass
2.修改vscode的配置(以下代码直接复制替换源码),注意:使用编辑器打开文件夹,不然保持的时候会出现路径问题,因为配置文件里面使用的是相对路径

"easysass.compileAfterSave": true,
"easysass.formats": [ //nested：嵌套缩进的 css 代码。//expanded：没有缩进的、扩展的css代码。//compact：简洁格式的 css 代码。//compressed：压缩后的 css 代码
    {
        "format": "expanded",
        "extension": ".css"
    },
    {
        "format": "compressed",
        "extension": ".min.css"
    }
],
"easysass.targetDir": "./css" //路径

使用:

1. 使用变量:
   $变量名 eg: $color: red;
   注意：如果变量定义在了{ }规则块内，就只能在这个块内使用

    // 在{}号外面定义的变量是全局变量$color:red;
    
    $color:red;  // 全局变量
    a{
    	$color:blue;   // 花括号内定义的是局部变量
    	color:$color;   // bulie
    }
    .bb{
    	color:$color;   //red;
    }
    
    $color:yellow !global;   // 变成全局变量
    
    $color:red !default; // 默认变量
    
    // 特殊变量 ( #{表达式/变量}； 进行字符串拼接 )
    $aa:top;
    #dd{
    	border-#{$aa}:1px solid red;
    }
   

2. 嵌套css规则

<!--选择器嵌套: -->
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

<!-- 特殊的:(:hover  前面要加&) -->
article a {
  color: blue;
  &:hover { color: red }
}

3. 循环

    @for $i from 1 to 9 { }   // 不包含9. 即1-8
    @for $i from 1 through 9 { }   // 包含9. 即1-9
   

4. 分支

   @if $i%2 > 0 { } @else { }
   

5. 混合

   @mixin 混合名字 来定义代码块

6. 引用

   @include 混合名字

7. 继承

   @import “文件” eg: @import “public.css”

8. 综合

   $color: red;
   @import “public.scss”;
   @mixin border{ width:100px; }
   #box{ @include border; }