css中的/deep/和自定义样式

css中的/deep/和自定义样式

/deep/

在vue中，为了避免父组件的样式影响子组件，需要在父组件样式中添加上scoped，但是存在一个问题，你开发时使用别人的组件或者自己开发的组件，有时候修改一个地方会影响到别的地方，所以需要使用/deep/既不影响到别的地方，又能修改子组件在当前的样式

自定义样式

–*来声明变量名，var(–*)来使用
声明和使用都要放在{}代码块里

body{
	--bg-color:lightblue;
	background-color:var(--bg-color);
}

全局变量与变量覆盖

在:root代码里面声明的变量就是全局变量，并且局部变量将会覆盖全局变量

:root{
	--bg-color:red;
}
body{
	--bg-color:lightblue;
	background-color:var (--bg-color)
}

变量的缺省值

body{
--1:red;
color:var(--2,blue);
}

会在body作用域中查找–2变量，没有的话会查找全局，都没有的话会使用后面的值(blue)

参与计算

:root{
    --bg-color: lightblue;
    --文字颜色: white;
    --fong-size: 30;
}
body{
    background-color: var(--bg-color);
}
div{
    color: var(--文字颜色);
    font-size: var(--fong-size)px;
}

此时div里面的文字大小是浏览器默认的大小，不是30，因为变量转换的时候末尾会带上空格，var(–font-size)px 会转换成30 px
解决办法

--font-size:30ox;

或者使用calc()计算属性

font-size:calc(var(--font-size)*1px);

内容部分转载自苍青浪