当前位置：首页 > article >正文

CSS系列（13）-- 预处理器详解

article 2025/3/1 12:19:38

前端技术探索系列：CSS 预处理器详解 🎨

致读者：探索 CSS 开发的进阶之路 👋

前端开发者们，

今天我们将深入探讨 CSS 预处理器，学习如何使用它们提升 CSS 开发效率。

Sass/SCSS 基础 🚀

变量与运算

// 变量定义
$primary-color: #007bff;
$secondary-color: #6c757d;
$spacing-unit: 8px;
$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

// 变量使用
.button {
    background-color: $primary-color;
    padding: $spacing-unit * 2;
    font-family: $font-stack;
    
    // 颜色函数
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}

// 运算
.container {
    width: 100% - 20px;
    margin: $spacing-unit * 2 auto;
}

嵌套规则

// 基础嵌套
.nav {
    background: #fff;
    
    &__item {
        padding: $spacing-unit;
        
        &--active {
            color: $primary-color;
        }
    }
    
    // 属性嵌套
    font: {
        size: 16px;
        weight: bold;
        family: $font-stack;
    }
    
    // 媒体查询嵌套
    @media (min-width: 768px) {
        display: flex;
        justify-content: space-between;
    }
}

混合与继承

// 混合定义
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin button-variant($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    
    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

// 混合使用
.modal {
    @include flex-center;
    
    &__button {
        @include button-variant($primary-color, white);
    }
}

// 继承
%button-base {
    padding: $spacing-unit * 2;
    border: none;
    border-radius: 4px;
}

.button-primary {
    @extend %button-base;
    background: $primary-color;
}

.button-secondary {
    @extend %button-base;
    background: $secondary-color;
}

Less 特性对比 🎯

// Less 变量
@primary-color: #007bff;
@spacing: 8px;

// 混合
.button-styles() {
    padding: @spacing * 2;
    border-radius: 4px;
}

// 命名空间
#utils {
    .center() {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.modal {
    .button-styles();
    #utils.center();
}

// 映射
@themes: {
    light: {
        background: #fff;
        text: #000;
    };
    dark: {
        background: #000;
        text: #fff;
    };
}

.theme(@name) {
    background: @themes[@name][background];
    color: @themes[@name][text];
}

Stylus 语法特点 🎨

// Stylus 变量
primary = #007bff
spacing = 8px

// 混合
button-styles()
    padding spacing * 2
    border-radius 4px
    background primary

// 函数
lighten-color(color, amount)
    lighten(color, amount)

// 条件语句
theme(type)
    if type == 'dark'
        background #000
        color #fff
    else
        background #fff
        color #000

// 使用
.button
    button-styles()
    &:hover
        background lighten-color(primary, 10%)

工程化实践 🛠️

// 预处理器配置类
class PreprocessorConfig {
    constructor(options = {}) {
        this.options = {
            syntax: 'scss', // scss, less, stylus
            sourceMap: true,
            autoprefixer: true,
            minify: process.env.NODE_ENV === 'production',
            ...options
        };
        
        this.init();
    }

    init() {
        this.createConfig();
        this.setupWatcher();
    }

    createConfig() {
        return {
            entry: this.options.entry,
            output: this.options.output,
            rules: this.generateRules(),
            plugins: this.generatePlugins()
        };
    }

    generateRules() {
        const rules = [];
        
        // SCSS 规则
        if (this.options.syntax === 'scss') {
            rules.push({
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: this.options.sourceMap,
                            sassOptions: {
                                outputStyle: this.options.minify ? 'compressed' : 'expanded'
                            }
                        }
                    }
                ]
            });
        }
        
        // Less 规则
        if (this.options.syntax === 'less') {
            rules.push({
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: this.options.sourceMap,
                            lessOptions: {
                                math: 'always'
                            }
                        }
                    }
                ]
            });
        }
        
        return rules;
    }

    generatePlugins() {
        const plugins = [];
        
        if (this.options.autoprefixer) {
            plugins.push(
                require('autoprefixer')({
                    grid: true
                })
            );
        }
        
        if (this.options.minify) {
            plugins.push(
                require('cssnano')({
                    preset: ['default', {
                        discardComments: {
                            removeAll: true
                        }
                    }]
                })
            );
        }
        
        return plugins;
    }

    setupWatcher() {
        if (process.env.NODE_ENV === 'development') {
            const chokidar = require('chokidar');
            
            chokidar.watch(this.options.entry).on('change', (path) => {
                console.log(`File ${path} has been changed`);
                this.recompile(path);
            });
        }
    }

    recompile(path) {
        // 重新编译变更的文件
        console.log(`Recompiling ${path}...`);
    }
}