+ match[1]] = match[2].trim(); } // 替换变量 for (const [key, value] of Object.entries(variables)) { const varRefRegex = new RegExp(key + '(?![\\w-])', 'g'); code = code.replace(varRefRegex, value); } // 处理嵌套 code = processNesting(code); // 处理混合 code = processMixins(code); // 处理运算 code = processOperations(code); // 清理 code = code.replace(/\s*{\s*/g, ' {') .replace(/\s*}\s*/g, '}\n') .replace(/;\s*}/g, ';') .replace(/\n\n+/g, '\n') .trim(); return code; } function copyOutput() { const output = document.getElementById('cssOutput').textContent; const copyBtn = document.getElementById('copyBtn'); if (!output) { alert('没有可复制的内容'); return; } navigator.clipboard.writeText(output).then(() => { copyBtn.innerHTML = '✓ 已复制'; copyBtn.classList.add('openskil-btn-copied'); setTimeout(() => { copyBtn.innerHTML = '📋 复制'; copyBtn.classList.remove('openskil-btn-copied'); }, 2000); }).catch(() => { // 降级方案 const textarea = document.createElement('textarea'); textarea.value = output; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); copyBtn.innerHTML = '✓ 已复制'; copyBtn.classList.add('openskil-btn-copied'); setTimeout(() => { copyBtn.innerHTML = '📋 复制'; copyBtn.classList.remove('openskil-btn-copied'); }, 2000); }); } function clearInput() { document.getElementById('lessInput').value = ''; document.getElementById('cssOutput').textContent = ''; document.getElementById('errorPanel').classList.remove('openskil-error-show'); document.querySelector('.openskil-status-dot').className = 'openskil-status-dot'; document.getElementById('statusText').textContent = '等待输入'; } function formatOutput() { const output = document.getElementById('cssOutput'); if (!output.textContent) return; try { // 基本格式化 let css = output.textContent; css = css.replace(/\s*{\s*/g, ' {\n ') .replace(/;\s*/g, ';\n ') .replace(/\s*}\s*/g, '\n}') .replace(/\n \n/g, '\n') .trim(); output.textContent = css; } catch (e) { console.error('格式化失败:', e); } } function loadSample() { const sample = `// LESS 示例代码 @primary-color: #532d28; @secondary-color: #ffa048; @border-radius: 8px; @spacing: 20px; // 混合（Mixin）定义 .border-radius(@radius) { -webkit-border-radius: @radius; border-radius: @radius; } .box-shadow(@x: 0, @y: 2px, @blur: 8px, @color: rgba(0,0,0,0.1)) { -webkit-box-shadow: @x @y @blur @color; box-shadow: @x @y @blur @color; } // 主容器 .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: @spacing; } // 头部样式 .header { background: @primary-color; color: white; padding: 16px @spacing; h1 { font-size: 24px; margin: 0; &:hover { color: @secondary-color; } } p { font-size: 14px; opacity: 0.9; margin: 8px 0 0 0; } } // 按钮组件 .button { display: inline-block; padding: 12px 24px; .border-radius(@border-radius); .box-shadow(); cursor: pointer; transition: all 0.3s ease; &:hover { transform: translateY(-2px); .box-shadow(0, 4px, 12px, rgba(0,0,0,0.15)); } &.primary { background: @primary-color; color: white; } &.secondary { background: @secondary-color; color: @primary-color; } } // 卡片组件 .card { background: white; .border-radius(@border-radius); .box-shadow(); padding: @spacing; margin-bottom: @spacing; h2 { color: @primary-color; font-size: 18px; margin-bottom: 12px; } p { color: #666; line-height: 1.6; } }`; document.getElementById('lessInput').value = sample; convertLessToCss(); }