Series Article Directory
Article directory
1. Less variable
1. Selector variables
Make the selector dynamic
index.html file
- id and class selectors
<div id="wrap">
Hello Less!
</div>
<div class="wrap">
Hello World!
</div>
index.less file
- The first is to determine the type of selector (id selector)
- The second is the type of the indeterminate selector (id/class selector)
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
@{
mySelector} {
color: #ccc;
width: 50%;
}
.@{
wrap} {
color: skyblue;
width: 50%;
}
#@{
wrap} {
color: aqua;
width: 50%;
}
index.css file
- automatically escaped css file
#wrap {
color: #ccc;
width: 50%;
}
.wrap {
color: skyblue;
width: 50%;
}
#wrap {
color: aqua;
width: 50%;
}
2. Attribute variables
Reduce code writing
index.html file
Note: This is a public HTML structure that is used in the following tests.
<div id="wrap">
Hello Less!
</div>
index.less file
- property variable, set property
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
// 属性变量
@borderStyle: border-style;
@solid: solid;
@{
mySelector} {
@{
borderStyle}: @solid;
}
index.css file
- automatically escaped css file
#wrap {
border-style: solid;
}
3. url variable
When the project structure changes, modify its variables to
index.less file
@images: "../../img";
body {
background: url("@{images}/xxx.png");
}
index.css file
- automatically escaped css file
body {
background: url("../../img/xxx.png");
}
4. Declare variables
Structure: @name: {property: value}
Use: @name()
Example: Exceeding content, ...indicated
index.less file
@Rules: {
width: 60px;
height: 30px;
border: 1px solid #ccc;
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
#wrap {
@Rules();
}
index.css file
- automatically escaped css file
#wrap {
width: 60px;
height: 30px;
border: 1px solid #ccc;
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
5. Variable operation
- When adding or subtracting, the unit of the first data is used as the base
- When multiplying and dividing, pay attention to the unit must be unified
- Note the space
index.less file
@width: 300px;
@color: #ccc;
#wrap {
width: @width - 20;
height: @width - 20 * 2;
margin: (@width - 200) * 2;
color: @color*1;
background-color: @color + #111;
}
index.css file
- automatically escaped css file
#wrap {
width: 280px;
height: 260px;
margin: 200px;
color: #cccccc;
background-color: #dddddd;
}
6. Scope of variables
The principle of proximity
index.less file
@var:@a;
@a:100%;
#wrap {
width: @var;
@a:9%;
border: 1px solid #ccc;
}
index.css file
- automatically escaped css file
#wrap {
width: 9%;
border: 1px solid #ccc;
}
7. Use variables to define variables
index.less file
@fond:@var;
@var:'fond';
#wrap::after {
content: @var;
}
index.css file
- automatically escaped css file
#wrap::after {
content: 'fond';
}
2. Less nesting
1. Use of &
&: the name of the previous selector
index.html file
- Multiple levels of nesting
<div class="center">
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</div>
index.less file
- &: the name of the previous selector
- Writable or not
.center {
width: 100px;
height: 100px;
background: red;
& #list {
width: 50px;
height: 50px;
background: skyblue;
li {
width: 20px;
height: 20px;
background: #ccc;
}
}
}
index.css file
- automatically escaped css file
.center {
width: 100px;
height: 100px;
background: red;
}
.center #list {
width: 50px;
height: 50px;
background: skyblue;
}
.center #list li {
width: 20px;
height: 20px;
background: #ccc;
}
2. Media inquiries
index.less file
#main {
@media screen {
@media (max-width: 768px) {
width: 100px;
}
}
@media tv {
width: 2000px;
}
}
index.css file
- automatically escaped css file
@media screen and (max-width: 768px) {
#main {
width: 100px;
}
}
@media tv {
#main {
width: 2000px;
}
}
3. Tips: Add private styles
Example: Implementing style switching from hidden to displayed
index.less file
#main {
&.show {
display: block;
}
}
.show {
display: none;
}
index.css file
- automatically escaped css file
#main.show {
display: block;
}
.show {
display: none;
}
index.html file
- Get the main node and implement the style from hidden to display
const main = document.getElementById('main')
main.classList.add("show")
Here is the front-end grocery store , looking forward to your Sanlian+ attention