sass/scss 入门

简介: sass/scss 入门
Sass (英文全称:Syntactically Awesome Stylesheets) 简介
  1. Sass 是一个 CSS 预处理器。
  2. Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
  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,输出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>
七、样式案例效果图

效果图

相关文章
|
9月前
|
前端开发 开发者
stylus、sass、less区别, Sass 、LESS是什么
【4月更文挑战第1天】stylus、sass、less区别, Sass 、LESS是什么
117 0
|
监控 前端开发
|
前端开发 Shell 开发工具
前端自动化系列之less、scss、sass、stylus css预处理器
前端自动化系列之less、scss、sass、stylus css预处理器
262 0
|
前端开发 JavaScript
Vue 安装 CSS 预处理器(Less、Sass、Stylus)
Vue 安装 CSS 预处理器(Less、Sass、Stylus)
285 0
|
前端开发 JavaScript
sass学习笔记(上)
sass学习笔记
250 0
|
前端开发
sass学习笔记(下)
sass学习笔记
97 0
|
前端开发
SCSS的基本使用
SCSS的基本使用
SCSS的基本使用
|
6月前
|
前端开发 安全 JavaScript
scss 学习
scss 学习
71 0
|
9月前
|
XML 前端开发 数据格式
探索CSS预处理器:Sass、Less与Stylus
探索CSS预处理器:Sass、Less与Stylus
|
前端开发
了解sass
了解sass
185 0

热门文章

最新文章

相关实验场景

更多