77 行
1.4 KiB
Plaintext
77 行
1.4 KiB
Plaintext
// ============================================
|
||
// 呼籁旅行官网 - Less混入
|
||
// ============================================
|
||
|
||
// 响应式断点
|
||
.respond-md(@rules) {
|
||
@media (min-width: @breakpoint-md) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
.respond-lg(@rules) {
|
||
@media (min-width: @breakpoint-lg) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
.respond-xl(@rules) {
|
||
@media (min-width: @breakpoint-xl) {
|
||
@rules();
|
||
}
|
||
}
|
||
|
||
// 容器
|
||
.container() {
|
||
width: 100%;
|
||
max-width: @container-max-width;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: @container-padding;
|
||
padding-right: @container-padding;
|
||
|
||
.respond-lg({
|
||
padding-left: @container-padding-desktop;
|
||
padding-right: @container-padding-desktop;
|
||
});
|
||
}
|
||
|
||
// 段落间距 — 更大的呼吸感
|
||
.section-padding() {
|
||
padding-top: @space-2xl;
|
||
padding-bottom: @space-2xl;
|
||
|
||
.respond-md({
|
||
padding-top: @space-3xl;
|
||
padding-bottom: @space-3xl;
|
||
});
|
||
|
||
.respond-lg({
|
||
padding-top: 100px;
|
||
padding-bottom: 100px;
|
||
});
|
||
}
|
||
|
||
// 响应式网格：移动1列 → 平板2列 → 桌面3列
|
||
.grid-responsive(@gap: @space-lg; @md-cols: 2; @lg-cols: 3) {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @gap;
|
||
|
||
.respond-md({
|
||
grid-template-columns: repeat(@md-cols, 1fr);
|
||
});
|
||
|
||
.respond-lg({
|
||
grid-template-columns: repeat(@lg-cols, 1fr);
|
||
});
|
||
}
|
||
|
||
// 多行截断
|
||
.text-clamp(@lines: 3) {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: @lines;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|