$ npm install -g sass
$ choco install -g sass
$ brew install sass/sass/sass
$ sass --version
/* 定义变量 */
$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 test.scss test.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 */
<!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>
效果图