Less代码导致论坛样式崩溃

北辛论坛

屎山代码疑似有点不兼容，找不出来BUG。恳请Less大佬帮我看眼。

已尝试的解决办法（演示网址或图片）：北辛论坛

问题描述（报错内容）：

@media (max-width: 767px){
.Composer:not(.minimized) {
    height: auto !important;
}}

/* 关注、楼主、收藏挤一起  */
@media (max-width:768px) {
  .DiscussionPage-nav > ul { text-align:center; padding:0; list-style:none;}
  .DiscussionPage-nav > ul > li { margin:5px 5px;}
}

/*沙发*/
div.PostStream-item[data-index="1"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges):not(ul.UserCard-badges.badges,ul.UserCard-info)::after{content:"沙发"}
/*板凳*/
div.PostStream-item[data-index="2"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges):not(ul.UserCard-badges.badges,ul.UserCard-info)::after{content:"椅子"}
/*地板*/
div.PostStream-item[data-index="3"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges):not(ul.UserCard-badges.badges,ul.UserCard-info)::after{content:"地板"}


/*  主题移到右边  */
@media @desktop-up {
  .sideNavOffset {
    margin-left: 0;
  }
  .sideNav {
    margin-right: 0;
    margin-left: 50px;
    &.TagsPage-nav {
      margin-left: 0;
    }
  }
  .sideNavContainer {
    flex-direction: row-reverse;
  }
}


/*  神龙UI2UI修改  */
@border-radius: 12px; // 圆角
@line-color: rgba(224, 224, 224, 0.8); // 偏灰色细线
@gift-card-background: #ffffff; // 礼物卡片的背景颜色
@background-dark: rgba(14, 14, 14, 0.8); // 暗模式下的框架背景颜色
@shadow-color: rgba(0, 0, 0, 0.15); // 阴影颜色
@loading-color: #007AFF; // 加载动画颜色

body, #app .App-content {
    background-color: var(--control-bg-light); // 设置全局背景色
}

.WelcomeHero {
    color: #fdfdfd;
    background: linear-gradient(160deg, var(--control-bg-shaded), var(--button-primary-bg-hover));
    border-radius: @border-radius; // 设置圆角
    padding: 15px 20px; // 内边距保持适当大小
    margin: 10px 15px; // 两侧增加外边距，增加留白
    text-align: center;

    /* 移除关闭叉号 */
    .Hero-close {
        display: none;
    }
}

.PostStream {
    margin: 8px 0; // 统一上下间距
    background-color: @gift-card-background; // 使用白色礼物卡片背景
    border-radius: @border-radius; // 圆角
    box-shadow: 0 4px 10px @shadow-color; // 添加阴影
    padding: 12px 22px; // 增加内边距

    & + .PostStream {
        border-top: 2px solid @line-color; // 添加灰色分隔线
    }

    & when (@config-dark-mode = false) {
        background-color: rgba(255, 255, 255, 0.8);
    }
    & when (@config-dark-mode = true) {
        background-color: @background-dark;
    }
}

input.ComposerEditor {
    width: 100%; // 设置为全屏
    border-radius: @border-radius; // 圆角边框
    background-color: #fff; // 输入框背景颜色
    padding: 15px; // 内边距

    &::placeholder {
        color: #aaa; // 占位符颜色
    }

    &:focus {
        outline: none; // 去除默认焦点样式
        border: 1px solid @line-color; // 聚焦时底边颜色
    }
}

.Composer {
    border-radius: @border-radius; // 设置整体框的圆角
    background-color: #f7f7f7; // 设置背景颜色
    padding: 20px; // 增加内边距
}

// 加载按钮样式
.Button {
    border-radius: @border-radius; // 给按钮添加圆角
    position: relative; // 相对定位

    &.loading { // 加载状态
        pointer-events: none; // 禁用按钮
        color: transparent; // 隐藏文字

        &:after {
            content: ''; // 加载动画
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            border: 3px solid @loading-color; // 使用加载颜色
            border-top-color: transparent; // 透明顶部
            border-radius: 50%; // 圆形
            animation: spin 0.8s linear infinite; // 设置旋转动画
            transform: translate(-50%, -50%); // 居中
        }
    }

    &:hover {
        // 悬停效果
    }

    &:active {
        transform: scale(0.95); // 点击时缩放效果
    }
}

// 加载动画 keyframes
@keyframes spin {
    0% {
        transform: rotate(0deg); // 初始状态
    }
    100% {
        transform: rotate(360deg); // 旋转循环
    }
}

// 响应式设计
@media @phone {
    .PostStream {
        padding: 10px; // 移动端上适度减小内边距
    }

    input.ComposerEditor {
        padding: 12px; // 移动端上适度减小内边距
    }

    .WelcomeHero {
        margin: 0 10px; // 在小屏幕上移除外边距，增加适配
        padding: 8px 15px; // 减小小屏幕内边距
    }
}

ul.NotificationGroup-content {
    & > li {
        margin: 4px 8px;
        & > a {
            &.Notification {
                border-radius: @border-radius;
            }
            &.unread .Notification-title:after {
                content: '';
                display: inline-block;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                background-color: var(--primary-color);
                transform: translateY(10%);
                margin-left: 8px;
            }
        }
    }
}

.Badge {
    opacity: 0.9;
    color: #fff;
}
/*  图标优化  */
.item-like .Button--link .Button-label,.item-reply .Button--link .Button-label {
	display:none;
}
.item-like .Button:before {
	font-family:'Font Awesome 5 Free';
	font-weight:600;
	font-size:14px;
	content:'\f164';
	vertical-align:-1px;
}
.item-reply .Button--link:before {
	font-family:'Font Awesome 5 Free';
	font-weight:600;
	font-size:15px;
	content:'\f3e5';
	margin-right:4px;
	vertical-align:-2px;
}
/* 搜索高亮 */
mark {
    background: #FFE300 !important;
    padding: 2px 7px;
    border-radius: 7px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2) !important;
    margin: 3px;
    /* margin-left: 2.5px; */
    /* margin-right: 2.5px; */
    color: black !important;
}
mark when (@config-dark-mode = true) {
    background: #0072ff !important;
    padding: 2px 7px;
    border-radius: 7px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2) !important;
    margin: 3px;
    /* margin-left: 2.5px; */
    /* margin-right: 2.5px; */
    color: white !important;
}
/*  高斯模糊  */
@media (min-width:768px) {
	#header {
	background:rgba(255,255,255,0.8) !important;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(3px);
	}
}

/*  优化  */
/* 加载指示器优化样式 */
.LoadingIndicator {
    border-color: var(--control-bg);
    border-width: 4px; // 增加加载指示器的边框宽度
    border-top-color: var(--muted-color-light);
    border-radius: 50%;
    width: 40px; // 加载指示器的宽度
    height: 40px; // 加载指示器的高度
    animation: spin 0.8s linear infinite; // 旋转动画
}

/* 提升按钮的交互反馈 */
.Button {
    transition: background-color 0.4s, transform 0.3s; // 设置过渡效果

    &:hover {
        background-color: darken(var(--button-primary-bg), 10%); // 悬浮时加深背景色
        transform: translateY(-2px); // 悬浮时轻微上升
    }

    &:focus {
        outline: none; // 去除默认焦点样式
        box-shadow: 0 0 0 2px rgba(0, 115, 255, 0.5); // 聚焦时增加阴影效果
    }
}

/* 主题内容之间的间距 */
.PostStream {
    margin: 12px 0; // 增加上下间距
    padding: 15px 20px; // 调整内边距以便内容更舒适可读

    h2 {
        margin: 0 0 8px; // 帖子标题底部的间距
    }

    p {
        margin: 0; // 去掉段落的外边距
        line-height: 1.5; // 增加行高以提升可读性
    }
}

/* 加强徽章的视觉效果 */
.Badge {
    background-color: #007AFF; // 背景颜色
    color: #fff; // 字体颜色
    border-radius: 5px; // 圆角
    padding: 4px 8px; // 内边距
    margin-right: 5px; // 与其他徽章的间距
}

/* 添加新通知的动态效果 */
.Notification {
    &.unread {
        color: var(--primary-color); // 未读通知时的颜色
    }

    &:hover {
        color: darken(var(--primary-color), 10%); // 悬停时加深颜色
    }
}

/* 调整工具条与内容的间距 */
.IndexPage-toolbar {
    margin-bottom: 15px; // 工具条与内容之间的间距
}

/* 信息彩条 */
.IndexPage-toolbar::after {
    content: "全新神龙UI2现已装配本论坛！";
    padding: 7px 10px; // 内边距
    background-color: @hero-bg; // 背景色
    color: @link-color; // 文字颜色
    border-radius: 5px; // 圆角
    text-align: center; // 居中
    font-size: 16px; // 字体大小
    display: block; // 作为块元素显示
    margin: 5px 0; // 上下外边距
    white-space: pre-wrap; // 保持空格换行
}
/*  ©Halina  */
`

小小白哦

北辛论坛我的建议是，要不就丢给AI分析代码，要不就把css全删了，反正默认的肯定不会影响崩溃。

yannis

1、最后一行多了个 `

2、 --button-primary-bg 你要么在开头定义好这些 less 变量，要么就用准确值代替，同理其他也是一样 --xxxx

.Button {
    transition: background-color 0.4s, transform 0.3s; // 设置过渡效果

    &:hover {
        background-color: darken(var(--button-primary-bg), 10%); // 悬浮时加深背景色
        transform: translateY(-2px); // 悬浮时轻微上升
    }

    &:focus {
        outline: none; // 去除默认焦点样式
        box-shadow: 0 0 0 2px rgba(0, 115, 255, 0.5); // 聚焦时增加阴影效果
    }
}