sass/scss 入门

作者: 祈澈菇凉 | 来源:发表于2019-12-08 01:07 被阅读0次

sass/scss/less/css的前世今生
SCSS（Sass）入门
sass/scss 入门
聊聊SCSS的语法(一)
CSS 预处理语言之 Scss 篇
sass和scss
SCSS速学
Scss 在项目中的使用
Hbuilder scss/sass编译插件
关于sass（scss）、less、postcss、stylus

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>