Sass 的入门安装和基本使用
0 / 0 / 创建于 5年前
汤清丽 的个人博客
前言#
Sass 是一个 CSS 预处理器，可以帮助我们减少 CSS 重复的代码，节省开发时间。 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。生成良好格式化的 CSS 代码，易于组织和维护，Sass 文件后缀为.Scss。
一、Sass 安装#
NPM 安装#
1.1 我们可以使用 npm 来安装 Sass，这是最常用的安装方式。
首先查看有没有下载 npm，以下命令可以查看到是否有下载过 npm，已经下载会出现一个版本号 6.12.1
npm -v
1.2 sass 一般都使用淘宝 NPM 镜像定制的 cnpm，命令行工具代替默认的 npm: 只需要安装以下命令就会自动下载安装一个包。
npm install \-g cnpm \--registry\=https://registry.npm.taobao.org
1.3 然后就可以使用 cnpm 命令使用这个包，以下就算安装完成了。
cnpm install -g sass
二、sass 的使用方法#
2.1 首先要建立 2 个文件夹，文件夹名称可以随便起，再启动以下命令监听。
sass --watch sass:css //（sass:css为文件夹名称，可以自设定）
2.2 在.scss 文档写入内容，另外一个 css 文件夹就会自动出现一个 css 的文档，在写代码时命令窗口不能关闭，负责无法执行 css 文档代码。
2.3 下面是案例 .scss 文档代码：
$a:#fff;
$b:#000;
body {
color: $a;
background: $b;
width: 500px;
height: 100px;
}会在.css 文档出现以下执行代码：
body {
color: #fff;
background: #000;
width: 500px;
height: 100px;
}
/*# sourceMappingURL=a.css.map */三、sass 的变量#
3.1 Sass 变量使用 $ 符号：变量用于存储一些信息，它可以重复使用。
Sass 变量可以存储以下信息：
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
3.2 以下实例设置了四个变量：myFont, myColor, myFontSize, 和 myWidth。
变量声明后我们就可以在代码中使用它：
$myFont:Helvetica,sans-serif;
$myColor:red;
$myFontSize:18px;
$myWidth:680px;
body{
font-family:$myFont;
font-size:$myFontSize;
color:$myColor;
}
#container{
width:$myWidth;
}将以上代码转换为 CSS 代码，如下所示：
body{
font-family:Helvetica,sans-serif;
font-size:18px;
color:red;
}
#container{
width:680px;
}3.3 Sass 变量的作用域，只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。
$myColor:red;
h1{
$myColor:green;// 只在 h1 里头有用，局部作用域
color:$myColor;
}
p{
color:$myColor;
}将以上代码转换为 CSS 代码，如下所示：
h1{
color:green;
}
p{
color:red;
}四、Sass 嵌套规则与属性#
4.1 Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。
如下我们嵌套一个导航栏的样式：
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:6px12px;
text-decoration:none;
}
}实例中，ul, li, 和 a 选择器都嵌套在 nav 选择器中
将以上代码转换为 CSS 代码，如下所示：
nav ul{
margin:0;
padding:0;
list-style:none;
}
nav li{
display:inline-block;
}
nav a{
display:block;
padding:6px12px;
text-decoration:none;
}4.2 Sass 嵌套属性很多，在 Sass 中，我们可以使用嵌套属性来编写它们，会省事很多，以下 sass 的代码如下：
font:{
family:Helvetica,sans-serif;
size:18px;
weight:bold;
}
text:{
align:center;
transform:lowercase;
overflow:hidden;
}将以上代码转换为 CSS 代码，如下所示：
font-family:Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
text-align:center;
text-transform:lowercase;
text-overflow:hidden;总结：#
以上是 sass 的基本简单介绍，sass 还有比较深入复杂的方法，大家也可以去 sass 官网深入学习，网址：https://www.sasscss.com/getting-started/
。
作者：汤清丽
日期：2020-1-6
微信：lenat666
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号