css预处理器——sass教程（1）

最新推荐文章于 2024-07-07 15:38:48 发布

高崖残雪已无多

最新推荐文章于 2024-07-07 15:38:48 发布

阅读量749

点赞数

分类专栏： css sass 文章标签： css sass

本文链接：https://blog.csdn.net/PeZXO/article/details/107200506

版权

css 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

sass

3 篇文章 0 订阅

订阅专栏

sass教程（1）

sass初识及安装（windows10环境）
sass 的语法格式及编译

sass初识及安装（windows10环境）

CSS预处理器

对前端有一定了解的读者应当会知道 CSS（层叠样式表），然而 CSS 对开发者是非常不友好的，为了能让开发更加快捷、准确及容易维护，CSS的预处理器就被人为的创造出来了，我在这里要介绍的 sass 就是一种预处理器，它相较于 CSS 增加了变量和简单逻辑程序的使用。

sass两种不同的语法

sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。

sass 支持两种不同的语法。两种语法可以互相加载，一种是缩进语法，另一种是 SCSS 语法。

缩进语法是 sass 的原始语法，因此它使用文件扩展名 .sass 。由于这个扩展名的原因，这种语法有时直接被称为 “sass"。
scss语法使用 .scss 文件扩展名。除了极少部分的例外，它是 CSS 的超集，也就是说所有有效的 CSS 也同样都是有效的 SCSS 。由于其与 CSS 的相似性，它是最容易上手的语法，也是最流行的语法。

由于 scss 的广泛流行程度，实际上我整个入门教程都是围绕 scss 语法展开的。

sass的安装

sass 是使用 Ruby 语言开发的，所以安装 Ruby 是安装 sass 的必要步骤之一，有关 Ruby 的官网：https://rubyinstaller.org/downloads/上去寻找需要安装的版本。（正常软件安装就不提供相关截图了）

对于已经用上 Windows10 包管理工具 winget 的用户，也可以使用 winget 搜索下载。

安装好了 Ruby ，在命令行内键入ruby -v后回车会显示安装的 Ruby 版本信息，我的是 ruby 2.7.1p83。

然后就需要通过 Ruby 的包管理工具 gem 来安装 sass ，只需要在命令行内键入gem install sass后回车就能下载安装了（windows10用户最好用管理员身份进入命令行，~~都开始学sass了，应该对包管理工具、命令行啥的有了解了叭~~）。

安装好 sass 后，可以键入sass -v后回车显示安装的版本信息（一般软件/插件/包 -v就是查看版本信息，我的是3.7.4。

sass 的语法格式及编译

sass 的语法格式

原始的sass语法格式依靠严格的缩进，而我们更加建议使用 scss 语法格式来编写 sass ，它从外观上与 css 相似，更符合我们的编码习惯，例：

// demo.scss
$main-family: sans-serif;
$main-color: red;

body{
  font-family: $main-family;
  color: $main-color;
  div{
    width: 100px;
    height: 100px;
    border: 1px solid $main-color;
  }
}

对于 scss 语法下的样式，我们需要将它保存为以.scss为后缀的文件

上述代码使用了$来声明变量，对于常用的编程语言如 Python 、 JavaScript 等声明变量是是十分常见的行为，但是对于 CSS 而言却显得稀罕。上述代码中在body元素的花括号类包裹了另一个元素div，这种包裹的形式非常显式地体现了body是div父元素的关系。我们使用$声明的变量也在字体颜色属性color和border的颜色属性上发挥了作用，这就使得我们不必再像写 CSS 时那样不停地复制粘贴相同的属性值给不同的属性使用了。

sass的编译

但是我光把样式写出来可不行，还需要在 HTML 中使用它， HTML 可以直接使用<link>元素导入 CSS 样式，但是却不能导入 sass 样式，我们如果要使用 sass 写的样式就不得不把它编译成 CSS 样式然后才能导入到 HTML 中。

以下介绍如何对 sass 进行编译的方法。

使用命令行编译

我们可以在命令行内敲入以下命令后回车进行编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

例如sass asserts/demo.scss:css/表示将assets文件夹下的demo.scss编译成css文件夹下的同名称 css 文件。

对于文件下的多个文件则文件夹/旁的文件无需敲入，它会默认使用全部文件。

使用插件编译（推荐做法）

对于前端开发者，我建议使用 Jetbrains 公司的 Webstorm （收费）和微软公司的 VS code （免费），这两款开发软件都有着强大的功能和丰富的插件。

VS code 编译 sass 的插件

在 VS code 中我们可以在应用商店查找名为 Live Sass Compiler 的插件并进行安装使用，安装后会在 VS code 底部状态栏了出现一个 Watch Sass 的按钮，在点击它之后，它会监听你打开的文件中的 sass 或者 scss 文件，自动将它们在文件夹下编译成 css 文件，并且如果你的 scss 发生改变，它能即时进行编译。

在这里插入图片描述