乐鱼电竞

    教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    如何将.scss文件编译成为.css文件？【Scss编译】

    更新时间:2021年05月12日14时54分 来源:乐鱼电竞 浏览次数:

    乐鱼电竞-一样的教育，不一样的品质

    在完成了Sass代码的编写后，我们可以通过node-sass模块对.scss文件进行编译。下面主要讲解如何将.scss文件编译成为.css文件，具体如例4-1所示。

    【例4-1】

    （1）在C:\web\chapter04\Sass目录下创建color.scss文件，并将Sass语法格式中设置边框颜色的代码添加到color.scss文件中，具体代码如下。

    $highlight-color: #F90;
.selected {
 border: 1px solid $highlight-color;
}

    上述代码中，定义变量$highlight-color的值为#F90；设置类名为.selected的边框大小为1px实线，颜色为“#F90”。

    在C:\web\chapter04\Sass命令下打开命令行，执行如下命令。

    node-sass color.scss output.css

    上述代码中，定义变量$highlight-color的值为#F90；设置类名为.selected的边框大小为1px实线，颜色为“#F90”。

    在C:\web\chapter04\Sass命令下打开命令行，执行如下命令。

    node-sass color.scss output.css

    上述命令执行后，会在C:\web\chapter04\Sass目录中生成编译后的output.css文件，具体代码如下。

    .selected {
 border: 1px solid #F90;
}

    上述代码中，变量$highlight-color已成功被替换为了#F90，并且编译后的代码与基础CSS样式代码相同。

    猜你喜欢：

    Sass语言如何声明和引用变量？

    Vue如何监控某个属性值的变化？【前端技术文章】

    常见的Javascript数据类型有哪些?

    乐鱼电竞前端与移动开发培训

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】