css预处理器——sass教程(1)
发布日期:2022-02-15 02:36:22 浏览次数:0 分类:技术文章

本文共 2501 字,大约阅读时间需要 8 分钟。

sass教程(1)

sass初识及安装(windows10环境)

CSS预处理器

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

sass两种不同的语法

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

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

  1. 缩进语法是 sass 的原始语法,因此它使用文件 扩展名 .sass 。由于这个扩展名的原因,这种语法有时直接被称为 “sass"。

  2. scss语法使用 .scss 文件扩展名。除了极少部分的例外, 它是 CSS 的超集,也就是说 所有有效的 CSS 也同样都是有效的 SCSS 。 由于其与 CSS 的相似性,它是最容易上手的语法, 也是最流行的语法。

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

sass的安装

sass 是使用 Ruby 语言开发的,所以安装 Ruby 是安装 sass 的必要步骤之一,有关 Ruby 的官网:上去寻找需要安装的版本。(正常软件安装就不提供相关截图了)

对于已经用上 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,这种包裹的形式非常显式地体现了bodydiv父元素的关系。我们使用$声明的变量也在字体颜色属性colorborder的颜色属性上发挥了作用,这就使得我们不必再像写 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 发生改变,它能即时进行编译。

在这里插入图片描述

Webstorm 下编译 sass

打开 webstorm ,查看是否有 File Watchers 这个工具。如果没有则需要到 Plugins 中下载。在 File Watchers 页面下点击“+”按钮增加需要监听并实时编译的文件类型。

在这里插入图片描述

在选择 scss 文件后,我们来到如下界面

在这里插入图片描述

在这个界面内需要输入 Program 的路径,这里需要选择 Ruby 安装路径下(我把 Ruby 安装了 D 盘,默认应该是在 C 盘) bin 文件夹内的 sass.bat文件的路径。

在这里插入图片描述

安装成功后,创建 scss 文件,会在 scss 文件内的页面上方显示是否要监听 scss 文件并实时编译,选择 Yes 就能实时编译了。

在这里插入图片描述

使用 含 GUI 页面的编译软件

以下是比较流行的软件:

  1. Koala ()
  2. Compass.app()
  3. Scout()

我并不推荐使用额外的软件去编译 sass。

转载地址:https://blog.csdn.net/PeZXO/article/details/107200506 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:JavaScript闭包
下一篇:CSS预处理器——sass教程(2)

发表评论

最新留言

初次前来,多多关照!
[***.208.126.232]2022年08月14日 10时50分29秒