css有关知识总结

1、原生css定义变量

直接定义变量并使用

• 定义： --变量名：值；
• 使用 ：var( --变量名 )

.element {
  width:200px;
  height:200px;
  --main-bg-color: #000;
  background-color: var(--main-bg-color);
}

可以在公共样式中定义变量，在页面使用

可以在app.vue文件定义变量，在页面使用

如果主题颜色是js动态控制的，可以将theme存在vuex中

1. 取出来
2. 在html中动态style定义样式变量
3. 在css中使用

 computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
 }

	 <el-menu-item
        :style="{ '--theme': theme }"
        :index="item.path"
        :key="index"
        v-if="index < 30"
      >
        {{ item.meta.title }}
     </el-menu-item>

.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  // border: 2px solid #{"var(--theme)"} !important;
  color: #fff !important;
  background-color: var(--theme);
  border-radius: 20px 20px 0 0;
}

2、样式穿透

vue2

/deep/ .box    
::v-deep .box

vue3

:deep(.box)  
::v-deep(.box)

插槽选择器

在组件内定义插槽内容的样式，这样就不需要在每个插槽去修改样式

:slotted(.box){
}

全局样式

• 在app.vue中定义，style标签不加scoped就可以作用于全局
• style加scoped ，:global(.box){ }

scoped原理

• 场景：组件库的组件使用插槽，外部组件在插槽里传进来的内容的样式无法生效 ，即无法覆盖组件的样式
• 方法一：去掉组件库组件的scoped
• 方法二：深度选择器：less里边 /deep/ scss里边 ::v-deep css里边 >>>

动态class类名

<button 
	class="el-button"  
	:class="[
        type ? 'el-button--' + type : '',
        {
          'is-disabled': disabled,
          'is-plain': plain,
        }
      ]">

3、scss使用

定义变量 $ 变量名

<style lang="scss" scoped>
$red: rgb(255, 147, 147);
.test {
  color: $red;
}
</style>

将scss变量转换成css变量

/*App.vue 全局的样式文件*/
body{
	--difference:#{$testColor}; 
}

混合颜色 mix（）函数

1. 参数1和参数2为参与混合的两种颜色(色值或变量)
2. 参数三为参数一所占的百分比，不传默认各占50%

案例：elementUI 按钮的hover、active状态分别就是主题色混入白色和黑色的结果

.title {
    color: mix(green, yellow, 20%);
}

element中按钮为何不能自定义color

• button空心plain和hover、active点击态颜色都是通过mix混合白色和黑色得到的色值
• mix 函数无法使用带有 var() 函数变量的参数

// 自定义color传入组件，使用动态style的css变量接收color值
<button class="btn" :style="{ '--color': color }">按鈕</button>

<style lang='scss' scoped>
$color: var(--color); // 将css变量赋值给scss变量
.btn {
  padding: 20px 40px;
  font-size: 30px;
  color: $color; // 正常使用
  // 报错：mix 函数无法使用带有 var() 函数变量，导致hover，active的混合态无法定义
  // background: mix($color, #fff, 10%); 
  border: 1px solid $color;
  border-radius: 10px;
}
</style>

解决element按钮自定义颜色

<button class="btn" :style="{ '--color': color, '--mixColor': mixColor }">按鈕</button>
  props: {
    color: {
      type: String,
      default: '#e83e8c'
    },
  },  
  computed: {
    mixColor() {
      return this.getRgbNum(this.color, 0.1) // 通过透明度达到混合白色的效果
    }
  },
  methods: {
    // 将#ccc或#e83e8c转换成 rgba 颜色值rgba(232,62,140,.1)
    getRgbNum(sColor, percent) {
      if (sColor.length === 4) {
        let sColorNew = '#'
        for (let i = 1; i < 4; i += 1) {
          // 补全颜色值 例如：#eee,#fff等
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
        }
        sColor = sColorNew
      }
      // 处理六位颜色值
      let sColorChange = []
      for (let i = 1; i < 7; i += 2) {
        // 核心代码，通过parseInt将十六进制转为十进制，parseInt只有一个参数时是默认转为十进制的，第二个参数则是指定转为对应进制
        sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
      }
      // return sColorChange  [232,62,140]
      return 'rgba(' + sColorChange.join(',') + ',' + percent + ')'
    },
  },

<style lang='scss' scoped>
$color: var(--color);
.btn {
  padding: 20px 40px;
  font-size: 30px;
  color: $color;
  // background: mix($color, #fff, 10%);
  background: var(--mixColor);
  border: 1px solid $color;
  border-radius: 10px;
}
</style>

@each in 循环遍历列表

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 编译后
.puma-icon {
  background-image: url('/images/puma.png'); }
  
// 或者
$colors: (
  black: $black,
  white: $white,
  gray-1: $gray-1,
  gray-2: $gray-2,
  gray-3: $gray-3,
  gray-4: $gray-4,
  gray-5: $gray-5,
  red: $red,
  yellow: $yellow,
  blue: $blue,
);

@each $key, $color in $colors {
  .#{$key} {
    color: $color;
  }
  .bg-#{$key} {
    background-color: $color;
  }
}

@for from … through … 循环数值区间

@for $value from 20 through 50 {
  .size-#{$value} {
    font-size: $value * 1px;
  }
}

@if @else 条件判断

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @else  { border: 3px double; }
}
// 编译后
p {
  border: 1px solid; 
}

!default用来定义局部变量，!global可以把局部变量转全局变量

.test {
  $red: rgb(255, 147, 147) !global;
  color: $red;
}
.test1 {
  color: $red; // 如果不加这里是无法使用的
}

@mixin定义样式块，@include引入使用

@mixin com-style(形参) {
  color: blue;
  text-decoration: underline;
}
.test {
  @include com-style(实参); //引入样式块
}

@content 向混合样式中导入内容，从获取@include{}中传递过来的所有内容导入到指定位置

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
// 编译后
* html #logo {
  background-image: url(/logo.gif);
}

@at-root 跳出嵌套，跳出到和父级相同的层级

.block {
    color: red;
    @at-root #{&}__element {
        color: blue;
    }
}
// 编译后
.block {
   color: red;
}
.block__element {
   color: blue;
}

<style scoped>
.readyOnly {
  pointer-events: none;  //区域不可点击
}
</style>