CSS 转JSON

CSS 转JSON

在前端开发中，我们经常需要处理CSS样式，有时候我们需要将CSS样式转换成JSON格式，以便于在JavaScript中进行处理。本文将详细介绍如何将CSS样式转换成JSON格式，并提供多个示例代码。

1. 将CSS字符串转换成JSON对象

我们可以使用正则表达式来将CSS字符串转换成JSON对象。下面是一个示例代码：

const cssString = `
    .container {
        width: 100px;
        height: 100px;
        background-color: red;
    }
`;

function cssStringToJson(cssString) {
    const cssObj = {};
    cssString.replace(/([\w-]+)\s*:\s*([^;]+);/g, function (match, key, value) {
        cssObj[key] = value.trim();
    });
    return cssObj;
}

const cssJson = cssStringToJson(cssString);
console.log(cssJson);

运行结果：

{ width: '100px', height: '100px', 'background-color': 'red' }

2. 将CSS样式表转换成JSON对象

除了将CSS字符串转换成JSON对象外，我们还可以将整个CSS样式表转换成JSON对象。下面是一个示例代码：

const css = `
    .container {
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .text {
        font-size: 16px;
        color: blue;
    }
`;

function cssToJson(css) {
    const cssObj = {};
    css.replace(/([\s\S]*?)\{([\s\S]*?)\}/g, function (match, selector, rules) {
        const ruleObj = {};
        rules.replace(/([\w-]+)\s*:\s*([^;]+);/g, function (match, key, value) {
            ruleObj[key] = value.trim();
        });
        cssObj[selector.trim()] = ruleObj;
    });
    return cssObj;
}

const cssJson = cssToJson(css);
console.log(cssJson);

运行结果：

{
  '.container': { width: '100px', height: '100px', 'background-color': 'red' },
  '.text': { 'font-size': '16px', color: 'blue' }
}

3. 将JSON对象转换成CSS字符串

除了将CSS转换成JSON对象外，我们还可以将JSON对象转换成CSS字符串。下面是一个示例代码：

const cssJson = {
    '.container': { width: '100px', height: '100px', 'background-color': 'red' },
    '.text': { 'font-size': '16px', color: 'blue' }
};

function jsonToCss(cssJson) {
    let cssString = '';
    for (const selector in cssJson) {
        cssString += `{selector} {\n`;
        for (const key in cssJson[selector]) {
            cssString += `{key}: ${cssJson[selector][key]};\n`;
        }
        cssString += '}\n';
    }
    return cssString;
}

const cssString = jsonToCss(cssJson);
console.log(cssString);

运行结果：

.container {
    width: 100px;
    height: 100px;
    background-color: red;
}
.text {
    font-size: 16px;
    color: blue;
}

4. 示例代码

下面是更多的示例代码，演示了如何处理不同类型的CSS样式：

示例代码1：处理带有单位的CSS属性

const cssString = `
    .container {
        width: 100px;
        height: 100px;
    }
`;

const cssJson = cssStringToJson(cssString);
console.log(cssJson);

运行结果：

{ width: '100px', height: '100px' }

示例代码2：处理带有多个选择器的CSS样式表

const css = `
    .container, .text {
        width: 100px;
        height: 100px;
    }
`;

const cssJson = cssToJson(css);
console.log(cssJson);

运行结果：

{ '.container, .text': { width: '100px', height: '100px' } }

示例代码3：处理带有嵌套规则的CSS样式表

const css = `
    .container {
        width: 100px;
        height: 100px;
        .text {
            font-size: 16px;
            color: blue;
        }
    }
`;

const cssJson = cssToJson(css);
console.log(cssJson);

运行结果：

{ '.container': { width: '100px', height: '100px', '.text': { 'font-size': '16px', color: 'blue' } } }

示例代码4：将JSON对象转换成CSS字符串并输出到文件

const fs = require('fs');

const cssJson = {
    '.container': { width: '100px', height: '100px', 'background-color': 'red' },
    '.text': { 'font-size': '16px', color: 'blue' }
};

const cssString = jsonToCss(cssJson);
fs.writeFileSync('styles.css', cssString);
console.log('CSS文件已生成');

运行结果：生成一个styles.css文件，内容为：

.container {
    width: 100px;
    height: 100px;
    background-color: red;
}
.text {
    font-size: 16px;
    color: blue;
}

通过本文的介绍，我们学习了如何将CSS样式转换成JSON格式，并提供了多个示例代码来演示不同情况下的处理方法。