sass/scss 入门
2019-12-08 本文已影响0人
祈澈菇凉
Sass (英文全称：Syntactically Awesome Stylesheets) 简介
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
- Sass 完全兼容所有版本的 CSS。
一、Sass安装
Install on windows (cmd / git bash / porwershell)
$ npm install -g sass
Install on windows (chocolatey)
$ choco install -g sass
Install on Mac OS X (Homebrew)
$ brew install sass/sass/sass
二、查看Sass版本
$ sass --version
三、编写test.scss文件
/* 定义变量 */
$bgColor: lightblue;
$txtColor: darkblue;
$fontSize: 24px;
$with: 200px;
$height: 200px;
$bdRadius: 50%;
$color: #ffffff;
/* 使用变量 */
.circle {
width: $with;
height: $height;
border-radius: $bdRadius;
background-image: linear-gradient(to bottom, $bgColor, $txtColor);
font-size: $fontSize;
color: $color;
}
四、编译sass，输出css文件
$ sass test.scss test.css
五、编译后的css文件
@charset "UTF-8";
/* 定义变量 */
/* 使用变量 */
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: linear-gradient(to bottom, lightblue, darkblue);
font-size: 24px;
color: #ffffff;
}
/*# sourceMappingURL=test.css.map */
六、HTML引入CSS查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sass_demo</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>
七、样式案例效果图
效果图
