sass了解以及安装

蔚落 2021-09-12 08:32 555阅读 0赞

[SASS][]简单的说，他是[css][]的升级版，他可以自定义变量，可以有if语句，还可以嵌套等等，很神奇吧！那下面我们就来介绍这个神奇的SASS！

# 一.了解saaa #

## 1.什么是sass ##

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

## [2.sass与less的区别][2.sass_less] ##

### (1).Less和Sass在语法上有些共性，比如下面这些： ###

①、混入(Mixins)——class中的class；  
②、参数混入——可以传递参数的class，就像函数一样；  
③、嵌套规则——Class中嵌套class，从而减少重复的代码；  
④、运算——CSS中用上数学；  
⑤、颜色功能——可以编辑颜色；  
⑥、名字空间(namespace)——分组样式，从而可以被调用；  
⑦、作用域——局部修改样式；  
⑧、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

### (2).less和sass的不同 ###

Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。  
Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

## 3.sass与scss的区别 ##

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名  
    2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号(\{\})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同，来看一个简单的对比图：

![20170817142445476][]

## 4.Sass/SCSS 和纯 CSS 写法差很多吗？ ##

(1).Sass 和 CSS 写法有差别：  
  
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。

(2).SCSS 和 CSS 写法无差别：  
  
SCSS 和 CSS 写法无差别，简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

# 二.安装 #

## 1.安装ruby ##

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。[下载ruby][ruby]

![20170628140551827][]

安装完成后需测试安装有没有成功,运行`CMD`输入以下命令：

![20170628140656976][]

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开：Start Command Prompt with Ruby

![20170628140801886][]

## 2.安装sass ##

然后直接在命令行中输入：

gem install sass

![20170628141043040][]

执行gem install sass 命令，安装sass完成。

测试sass是否安装成功，执行：sass -v   
结果如下：

![20170628141451557][]

到这里，sass就已经安装好了。

补充：

如果这边安装sass不能成功的话，那就直接在网上下载sass的文件

在执行命令：

gem install     Users\\php\\Downloads\\sass-3.4.13.gem (sass文件下载的存放路径)

回车，这样也是可以安装sass

#    三.sass更新 #

在命令执行：  
gem update sass

![20170831112227368][]

# 四.卸载sass #

在命令执行：

gem uninstall sass

[SASS]: http://www.haorooms.com/post/sass_css
[css]: http://www.haorooms.com/post/css_common
[2.sass_less]: http://www.mamicode.com/info-detail-1784382.html
[20170817142445476]: /images/20210813/baa962dff03f408c86502d8cb93e884d.png
[ruby]: https://rubyinstaller.org/downloads/
[20170628140551827]: /images/20210813/7c6141ecaa01464c93ecb19f81581932.png
[20170628140656976]: /images/20210813/0c14db62c8684b6b9646e4b9c38cef56.png
[20170628140801886]: /images/20210813/00a110208ad947d1893444169c473b51.png
[20170628141043040]: /images/20210813/0166c963fef14cd69bc8cc333260ad8d.png
[20170628141451557]: /images/20210813/944a3d2e4b254487b46ef350ab7a532f.png
[20170831112227368]: /images/20210813/73fb2cd0739f41dbb17db285a101a4ce.png