超级简单的SASS教程和使用指南 - 哈喽比特

462次阅读 | 发布于3年以前

作为前端开发者，你一定对CSS很熟悉，但是你知道CSS是可以定制的吗？大家都知道在js中可以自定义变量，而css只是一种标记语言，不是编程语言，所以变量不能自定义、引用等。

面对这些问题，我们现在介绍一下SASS。简单的说就是CSS的升级版。可以自定义变量，可以有if语句，还可以嵌套等等，厉害了！那么就让我们介绍一下这个神奇的SASS吧！

1、什么是SASS

SASS是一个CSS开发工具，提供了很多方便的书写方式，大大节省了我们的开发时间，让CSS的开发也变得简单易维护。

本文总结了SASS的主要用法。我的目标是有了这篇文章，日常通用就不需要再去阅读官方文档了。

2、安装使用

2.1、安装

SASS 是用 Ruby 语言编写的，但两者的语法没有关系。我不知道 Ruby，所以我仍然使用它。您只需要先安装 Ruby，然后再安装 SASS。

在window下安装ruby：

https://www.ruby-lang.org/en/documentation/installation/#homebrew下载 rubyinstaller.exe 并安装它。

mac下安装ruby：

$ curl -L https://get.rvm.io | bash -s stable
$ source ~/.rvm/scripts/rvm
$ rvm -v
$ rvm install 2.0.0
$ gem -v

可以看到版本号，证明安装成功！

如果您已经安装了 Ruby，则在命令行中输入以下命令：

gem install sass

然后，就可以使用了。

2.2、使用

SASS 文件是可以直接使用 CSS 语法的普通文本文件。

文件扩展名为.scss，意思是Sassy CSS。

下面的命令可以在屏幕上显示 .scss 文件的转换后的 css 代码。（假设文件名为 test。）

sass test.scss

如果要将显示的结果保存为文件，请在其后添加 .css 文件名。

sass test.scss test.css

SASS 提供了四种编译风格选项：

nested：嵌套缩进的css代码，它是默认值。
扩展：未缩进、扩展的 css 代码。
紧凑：简洁格式的 css 代码。
Compressed：压缩后的css 代码。

在生产环境中，通常使用最后一个选项。

sass — style compressed test.sass test.css

你也可以让SASS监控某个文件或目录，一旦源文件发生变化，它会自动生成一个编译版本。

// 观察一个文件
sass — watch input.scss:output.css
// 观察一个目录
sass — watch app/sass:public/stylesheets

SASS 的网站提供了一个在线转换器。您可以在那里尝试下面的各种示例。

3、基本用法

3.1、变量

SASS 允许使用变量，所有变量都以 $ 开头。

$blue: #1875e7; 
div {
 color: $blue;
}

如果变量需要嵌入到字符串中，必须写在#{}中。

$side: left;
.Rounded {
border-#{$side}-radius: 5px;
}

3.2、计算功能

SASS 允许在代码中使用计算：

body {
 Margin: (14px/2);
 Top: 50px + 100px;
 Right: $var * 10%;
 }

3.3、嵌套

SASS 允许嵌套选择器。例如，以下 CSS 代码：

Div h1 {
 Color: red;
 }
// can be written as:
 Div {
 Hi {
 Color:red;
 }
 }
//Attributes can also be nested, such as the border-color attribute, which can be written as:
 P {
 Border: {
 color: red;
 }
 }
//Note that a colon must be added after the border.

在嵌套的代码块中，您可以使用 $ 来引用父元素。例如，a:hover 伪类可以写成：

a {
 &:Hover {color: #ffb3ff;}
 }

3.4、注意事项

SASS 中有两种注释样式。

标准的 CSS 注释 / 注释 / 将保留在编译文件中。

单行注释 // 注释，只保存在SASS源文件中，编译后省略。

在 /* 后添加感叹号表示这是“重要说明”。即使以压缩方式编译，也会保留这行注释，通常可以用来声明版权信息。

/*!
 Important note!
*/

4、代码重用

4.1、继承

SASS 允许选择器从另一个选择器继承。例如，现有的 class1：

.class1 {
 Border: 1px solid #ddd;
 }

要从 class2 继承 class1，请使用 @extend 命令：

.class2 {
 @Extend .class1;
 Font-size:120%;
 }

4.2 、Mixin

Mixin 有点像 C 语言中的宏，一个可以复用的代码块。

使用@mixin 命令定义代码块。

@mixin left {
 float: left;
 margin-left: 10px;
 }

使用@include 命令来调用这个mixin。

div {
 @Include left;
 }

mixin 的强大之处在于您可以指定参数和默认值。

@mixin left($value: 10px) {
 float: left;
 margin-right: $value;
 }

使用时，根据需要添加参数：

div {
 @Include left(20px);
 }

下面是一个mixin的例子，用于生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {
 Border-#{$vert}-#{$horz}-radius: $radius;
 -Moz-border-radius-#{$vert}#{$horz}: $radius;
 -Webkit-border-#{$vert}-#{$horz}-radius: $radius;
 }

使用时可以这样调用：

#navbar li {@include rounded(top, left);}
#footer {@include rounded(top, left, 5px);}

4.3 、颜色功能

SASS 提供了一些内置的颜色函数来生成一系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

4.4 、插入文件

@import 命令用于插入外部文件。

@import “path/filename.scss”;

如果插入 .css 文件，则相当于 css import 命令。

@import “foo.css”;

5、高级用法

5.1、条件语句

@if 可以用来判断：

p {
 @If 1 + 1 == 2 {border: 1px solid;}
 @If 5 ❤ {border: 2px dotted;}
 }
There is also the @else command:
@if lightness($color)> 30% {
 Background-color: #000;
 } @else {
 Background-color: #fff;
 }

5.2、循环语句

SASS 支持 for 循环：

@for $i from 1 to 10 {
 .Border-#{$i} {
 Border: #{$i}px solid blue;
 }
 }

还支持while循环：

$i: 6;
 @While $i> 0 {
 .Item-#{$i} {width: 2em * $i;}
 $i: $i-2;
 }

each 命令类似于 for：

@each $member in a, b, c, d {
 .#{$member} {
 Background-image: url(“/image/#{$member}.jpg”);
 }
 }

5.3、自定义功能

SASS 允许用户编写自己的函数。

@function double($n) {
 @Return $n * 2;
 }
 #Sidebar {
 Width: double(5px);
 }

看了我上面的文章，您感觉如何？学会怎么使用SASS了吗？如果还有什么问题，可以在留言区给我留言，我们一起交流学习。

另外，如果你是第一次使用的话，你可以文章内容描述安装sass，然后用记事本输入上面的case，边看边运行一遍。

经过一段时间的学习后，我相信你肯定可以上手SASS了。

最后，感谢您的阅读，如果您觉得今天内容有用，请记得点赞我，关注我，并且也可以将它分享给您身边做开发的朋友，也许能够帮助到他。

祝编程愉快！