css 自定义属性
1.语法
-
--*来声明变量名 -
var(--*)来使用变量
css 自定义属性使用中，var()允许接受第二个参数，当做缺省值，在使用时最好都填写一个缺省值，
第二个参数也可以是另一个自定义属性
body {
--default-color: pink;
--font-base: 12px;
background-color: var(--default-color);
}
.button {
background-color: var(--theme-color, pink);
font-size: var(--font-ls, --font-base);
}
2.全局变量和局部变量
在:root 代码块中声明全局变量，在选择器中声明的为局部变量,局部变量会覆盖全局变量
:root {
--font-base: 14px;
--tet-color: #666666;
}
.section-one {
--font-size: 16px;
font-size: var(--fonr-size);
color: var(--text-color);
}
image
3.css 计算
calc() 函数常常被用于跨单位的计算,css 自定义属性也可以参与到 calc 的计算中
.section-two {
--text-title-color: lightBlue;
font-size: calc(2 * var(--font-base));
color: var(--text-title-color);
}
image
4.与 javascript 共同使用
自定义属性也可以通过 getPropertyValue 和 setProperty 方法操作，可以动态改变自定义属性的值
// 获取DOM
const section = document.querySelector('.section-two')
const styles = getComputedStyle(section)
console.log('styles =>', styles)
// 读取变量值
const oldColor = styles.getPropertyValue('--text-title-color').trim()
console.log('oldColor =>', oldColor)
// 设置变量值
section.style.setProperty('--text-title-color', 'green')
image
小程序中使用
1.基础用法
- web 开发中全局变量是定义在:root，小程序使用时，在 page 中定义变量,
- 在 app.acss 中的变量可以在全局各个页面中使用，同样也可以在各个页面独立定义页面专属的 css 变量
/* /app.acss --> */
page {
--base-color: #409eff;
--warning: #e6a23c;
--danger: #f56c6c;
--info: #909399;
--success: #67c23a;
......;
}
2.小程序中动态设置 css 属性
// 在js中设置css变量
let myStyle = `
--bg-color:red;
--border-radius:50%;
--wid:200px;
--hgt:200px;
`
let chageStyle = `
--bg-color:red;
--border-radius:50%;
--wid:300px;
--hgt:300px;
`
Page({
data: {
viewData: {
style: myStyle
}
},
onLoad() {
setTimeout(() => {
this.setData({ 'viewData.style': chageStyle })
}, 2000)
}
})
<!--将css变量(js中设置的那些)赋值给style-->
<view class="container">
<view class="my-view" style="{{viewData.style}}">
<image src="/images/abc.png" mode="widthFix" />
</view>
</view>
/* 使用var */
.my-view {
width: var(--wid);
height: var(--hgt);
border-radius: var(--border-radius);
padding: 10px;
box-sizing: border-box;
background-color: var(--bg-color);
transition: all 0.3s ease-in;
}
.my-view image {
width: 100%;
height: 100%;
border-radius: var(--border-radius);
}
