sass/scss入门

Sass (英文全称&＃xff1a;Syntactically Awesome Stylesheets) 简介

1. Sass 是一个 CSS 预处理器。
2. Sass 是 CSS 扩展语言&＃xff0c;可以帮助我们减少 CSS 重复的代码&＃xff0c;节省开发时间。
3. 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&＃xff0c;输出css文件

$ sass test.scss test.css


五、编译后的css文件

&＃64;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&＃61;test.css.map */

六、HTML引入CSS查看效果

七、样式案例效果图

效果图