js在线scss转css的方法

最新推荐文章于 2024-08-06 22:42:31 发布

会点php的前端小渣渣

最新推荐文章于 2024-08-06 22:42:31 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_39523111/article/details/130315559

版权

js 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

该代码段展示了一个用于编译SASS或SCSS的函数，利用Sass.js库。当源代码为空时，它会滚动到源代码区域并清空编辑器。在编译过程中，显示加载效果，完成后更新CSS结果或显示错误信息，并移除加载效果。

摘要由CSDN通过智能技术生成

      // 编译 SASS/SCSS
        compile: function($element) {
            $error.addClass('hidden');
            $errorText.html('');

            let $sass = $element.data('cm-editor');
            let src = $.trim($sass.getValue());
            if (src === '') {
                dom.scrollTo('.sass-src-title');
                $sass.setValue('');
                $sass.focus();
                return;
            }

            // 添加 loading...  效果
            $element.prop('disabled', true).addClass('btn-loading');

            // 编译 SASS
            // 方法及选项: https://github.com/medialize/sass.js/blob/master/docs/api.md
            let sass = new Sass();
            let options = {
                style: Sass.style.expanded,
                indentedSyntax: !isScss(src)
            };
            sass.compile(src, options, function(result) {
                if (result.status === 0) {
                    $result.data('cm-editor').setValue(result.text === null ? 'NaN' : result.text);
                    dom.scrollTo('.css-result-title');
                } else {
                    $result.data('cm-editor').setValue(`Error at Ln ${result.line}, Col ${result.column}:\n${result.message}`);
                    $error.removeClass('hidden');
                    $errorText.html(`${result.message} (第 ${result.line} 行, 第 ${result.column} 列)`);
                }

                // 移除 loading 效果
                // 注：不能放到 compile 方法外面，因为 compile 方法是异步执行，放在外面看不到 loading 效果
                $element.prop('disabled', false).removeClass('btn-loading');
            });
        }