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

落日映苍穹つ 2022-09-02 14:54 214阅读 0赞

![1bab94a035328853b68d064028b11baa.gif][]

在完成了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”。

![460799230fa09a7f995d68d697eef313.png][]

在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样式代码相同。

猜你喜欢：

[1bab94a035328853b68d064028b11baa.gif]: /images/20220829/23da4fc01a834bafac6a9e8d0e1935f9.png
[460799230fa09a7f995d68d697eef313.png]: /images/20220829/75cbf99c3b504355a5065240c74fb056.png

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实践：CSS和SCSS

让我们通过示例来了解一些 CSS 最佳实践：在CSS中使用外部样式表：更喜欢使用外部样式表，而不是内联样式或内部样式。创建一个单独的 CSS 文件并将其链接到您的

朴灿烈づ我的快乐病毒、/ 2024年03月22日 23:13/ 0 赞/ 81 阅读

相关 CSS - 预处理器SCSS

目录 SCSS简介 SCSS 编译环境安装 Live Sass Compiler 编辑 npm包 sass SCSS语法概览嵌套语法选择器嵌套选择器嵌套

淡淡的烟草味﹌/ 2023年09月27日 08:48/ 0 赞/ 148 阅读

相关 scss如何写伪类

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

左手的ㄟ右手/ 2023年05月29日 05:27/ 0 赞/ 12 阅读

相关 Css3、Scss 常用的布局设置-通用

一、垂直居中 > // 第一种绝对定位 > \parent\{ > position:relative; > height:400px; > .

港控/mmm°/ 2023年01月06日 01:25/ 0 赞/ 334 阅读

相关 css文件如何设置scss,如何将.scss文件编译成为.css文件？【Scss编译】

![1bab94a035328853b68d064028b11baa.gif][] 在完成了Sass代码的编写后，我们可以通过node-sass模块对.scss文件进行编译。

落日映苍穹つ/ 2022年09月02日 14:54/ 0 赞/ 215 阅读

相关 scss

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。 SASS是CSS3的一个扩展，增加了规则

不念不忘少年蓝@/ 2022年06月04日 01:37/ 0 赞/ 277 阅读

相关 SCSS--扩展的CSS

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS

布满荆棘的人生/ 2022年05月14日 04:38/ 0 赞/ 181 阅读

相关 vue引入外部js文件和scss文件

最近在做一个vue项目，已经有一段时间了。之前对在vue项目如何引入外部的js文件和scss文件一片空白。网上百度也是鱼龙混杂,很少有用的东西。后来自己通过一个线上项目学习到了

￡神魔★判官ぃ/ 2022年04月18日 02:38/ 0 赞/ 468 阅读

相关 webstorm如何配置sass ，scss，less等css预处理器！

参考文档：[https://www.cnblogs.com/congxueda/p/7086575.html][https_www.cnblogs.com_congxueda_

ゞ浴缸里的玫瑰/ 2021年09月18日 13:26/ 0 赞/ 429 阅读

相关 Webpack安装(2)-打包css、scss、less(包括编译、分离)

此文接着[《Webpack安装(1)-集成Babel》][Webpack_1_-_Babel] 完整代码详见：[https://github.com/lhtzbj12/we

灰太狼/ 2021年09月14日 15:36/ 0 赞/ 357 阅读