CSS预处理器SASS入门

最新推荐文章于 2024-01-24 08:46:49 发布

美美王子

最新推荐文章于 2024-01-24 08:46:49 发布

阅读量460

点赞数

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

本文链接：https://blog.csdn.net/A_xilixiaogui/article/details/78797397

版权

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

叫做css预处理器，他的基本思想是用一门专门的编程语言来进行页面样式的设计，然后在编译成正常的css文件。

安装
sass是用ruby语言写的，所以我们在安装sass之前要先安装ruby（ruby安装自行百度），执行下面命令安装：
```
gem install sass
```
使用
sass就是普通的文本文件，后缀名为.scss。然后让我们用sass的语法写好文件之后，需要编译成.css文件才能供html文件使用（即通过link标签引入html文件），那么我们就可以使用命令行或是git工具，输入：
```
sass test.scss test.css #假设我们的sass文件名为test
```
下面是一个具体编译sass的例子：
首先我们在文件夹中建上图这样的两个文件：.html、.scss

然后在两个文件中分别写入代码：
```

<!DOCTYPE html>
<html>
<head>
    <title>css预处理器sass test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div>一个关于css预处理器sass的小练习</div>
</body>
</html>

/* scss */
$blue:red;

div{
    color:$blue;
}
```
然后我们在用git将scss代码编译成.css代码，将得到如下三个文件，其中一个就是我们需要的.css文件。

运行html将得到如下结果。

计算功能
sass允许代码中使用算式：

$var:40;
body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

继承
Sass允许一个选择器继承另一个选择器，使用@extend命令来实现：
Mixin
Mixin有点像C语言的宏，是可以重用的代码，使用@mixin命令来定义一个代码块，在使用@include命令来调用这个mixin，就可以实现一个代码块的重用。
mixin的强大之处，在于他可以指定参数和缺省值。

使用的时候可以根据需要加入参数