sass安装入门

最新推荐文章于 2025-05-15 18:26:55 发布

thankYou_2018

最新推荐文章于 2025-05-15 18:26:55 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

分类专栏： myDream

本文链接：https://blog.youkuaiyun.com/thankYou_2018/article/details/82661371

myDream 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何安装Sass，包括安装Ruby环境，通过官方或RubyChina源安装Sass，以及Sass的编译方法，如命令行编译。文章还提到了Sass和SCSS的区别，并分享了基本操作API的链接，以及@import的使用，帮助整理和引用样式文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

决定为自己的项目选用一种css预处理器，在less和sass中徘徊了很久，最终选用了，sass，其中的优劣大家可以百度对比下。
进入正题。

1.先安装Ruby的环境

https://rubyinstaller.org/downloads/，安装的时候注意勾选第二项

Add Ruby executablesto your PATH.

配置全局变量。安装完成过后，可以通过ruby -v查看是否成功。

2.再安装sass，提供两种方法：

（1）官方安装

gem install sass
sass -v #查看是否安装成功

（2）#安装RubyChina的源

gem sources –remove
gem sources -a https://gems.ruby-china.org/
gem install sass
sass -v #查看是否安装成功

3.编译方法

Sass编译方式大概有三种：通过命令行编译（基础方法）、GUI可视化图形同居编译及自动化编译。
在这里我直接选择了多文件（文件夹）监听命令的方式：

sass –watch sass/main:static/css

监视sass目录下main文件夹中的所有Sass文件，并自动编译为CSS文件之后，放到static/css目录下。（根据自己的目录文件夹稍加修改）

ps：

Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，不过，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
下面就来测试一下我们的sass能不能用：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../sass/main/index.css">  //引入进来的文件可以是.css后缀
</head>
<style>
</style>
<body>
<div id="box">
</div>
</body>
</html>

在.scss文件中：

$myBack:#000000;

#box{
  width:150px;
  height: 100px;
  background-color: $myBack;
}

浏览器：
这里写图片描述
可以看到我们的sass已经能正常使用了！

附件：scss一些基本的操作api

https://www.sass.hk/guide/

今天补充一点sass的@import

在使用前两天的sass的时候，有一些问题慢慢暴露出来了，文件分布杂乱无章，公共样式颜色不方便提出来，所以我又去仔细研究了一下sass的引用。
1.我们可以有一个主要的sass文件，存放各种分支文件这里写图片描述
然后在 home.scss文件里面写home.html这个页面的css，其他页面同理。
2.还有个public文件夹，可以专门存放公共样式。
然后在其他sass文件里面引用public就可以用这些样式了。