The less component is mainly to facilitate us to write cascading CSS code when performing style operations. Here we record how to configure Less in the WeChat developer tool.
Preview the effect before and after the configuration
css format style (wxss)
.search_bar {
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
}
.search_bar navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color: #666;
border-radius: 10rpx;
}
.search_bar navigator icon {
padding-right: 5rpx;
}
less format
.search_bar{
height:90rpx;
padding:10rpx;
background-color: var(--themeColor);
navigator{
height:100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color:#666;
border-radius: 10rpx;
icon{
padding-right: 5rpx;
}
}
}
Obviously, after configuring less, the format adjustment will be more concise
WeChat developer tools introduce Less
1 Open the menu bar settings button -> select the extension settings
2 then click the extension panel
3 click the location as shown -> choose to install from the unzipped extension file package, and then select the following file
link: https://pan .baidu.com/s/1Z22LDeePBuPRF0vnSG-ZcA
Extraction code: 258h
Download the decompressed folder
4 Configure the setting.json. Generally, the setting.json of the WeChat developer tool can be clicked, the settings icon, and the Extensions setting is selected.
5. Pull down to the bottom in the pop-up box. There are two options here, user and workspace. The user is generally The settings for the user, the workspace, are only the settings for the current workspace. Generally speaking, if it is personal development, the scope of the user is larger than the workspace, so you can set your own less settings in the user's option.
6 Select Edit in setting here, add
"outExt": ".wxss", after adding this sentence, the less file we wrote can automatically generate wxss file after compilation. Of course, this is a local configuration, which only takes effect under the project, and can also be configured globally.
test
1 Create a new less file
2 Type in the relevant information
.search_bar{
height:90rpx;
padding:10rpx;
background-color: var(--themeColor);
navigator{
height:100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color:#666;
border-radius: 10rpx;
icon{
padding-right: 5rpx;
}
}
}
/* .sear
3 After saving, I found that the corresponding .wxss file appeared in the folder directory just now,
and then I found that it appeared in the file: that is, the wxss file was automatically generated by less
.search_bar {
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
}
.search_bar navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color: #666;
border-radius: 10rpx;
}
.search_bar navigator icon {
padding-right: 5rpx;
}