Sass的安装使用

1.介绍

1.1 CSS预处理技术，及种类介绍

什么是css预处理技术

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如变量$main-color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

css预处理技术的种类

Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

如此之多的 CSS 预处理器，那么“我应该选择哪种 CSS 预处理器？”也相应成了最近网上的一大热门话题，各大技术论坛也是争论不休。

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀。

1.2 什么是sass

Sass(Syntactically Awesome StyleSheets)是一种CSS预处理器(preprocessor)，是一款强化 CSS 的辅助工具。可以高效的编写样式，同时实现变量、嵌套、组合、继承等编程语言功能。

css是一门非程序式语言，没有变量、函数、scope(作用域)等概念。

CSS需要书写大量看似没有逻辑的代码，冗余度比较高

不方便维护及扩展，难以复用

css没有很好的计算能力

非前端工程师往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者只要使用这种语言进行CSS的编码工作就可以了。

“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。”

2.关于scss和sass

sass是最早出现的css预处理语言，有着比less更强大的功能。采用Ruby语言编写。

最初版本采用的是严格缩进的风格（不带大括号( {} )和分号( ; )，这一语法也导致一开始，sass并不太为开发者所接受）。

从 V3 版本开始放弃了缩进式的风格，并完全兼容普通的css代码，也因此从第三代开始，sass也被称为scss。

Sass 3 就是 Scss，是Sassy CSS的简写，它是CSS3语法的超集，也就是说所有有效的CSS/CSS3样式也同样适合于Sass。

对现代编程来说，sass就是scss，也因此，sass现在的扩展名为.scss（如果是旧版本的sass，可能扩展名会为.sass）。

3.安装和命令行编译

cmd打开本地命令控制窗口，输入下面字符串然后回车就装好了。

npm install -g sass

编译.scss文件为.css文件：

Sass使用.scss作为文件后缀名，不能直接在< link >标签里使用，需要编译为 .css文件。 演示：

建一个html文件，随便写个h1标签：

建一个.scss后缀的文件，如input.scss，写点基本样式sass的语法：
在html文件所在的路径下打开cmd命令控制符，输入：
```
//单文件转换命令
sass input.scss:output.css// 或 sass input.scss output.css
```
表示把名字为 input.scss 转换成名字为 ouput.css 的文件。
回车后，接下来发现就得到了css的文件。

使用 : 编译输出时，前后不能有空格，即 : 前紧跟输入的scss文件，: 后紧跟输出的css文件。

: 冒号形式的命令，常用于编译文件夹（中的所有sass文件）的输入输出。

css文件内容如下，可以看出转换好了：

接下来就是老操作了，在HTML里用 < link >标签把css文件引入就行。

但是不可能说写一句.scss语句就转换一次，太麻烦，所以可以自动转换，当我在.scss里写一句，.css就自动生成一句。在cmd输入以下：
```
sass --watch input.scss:ouput.css
```
表示监视变化，当input.scss一变化，output.css就变化

空格和冒号对应生成css的两中模式，如果是一对一模式（一个scss生成一个css），使用空格即可；如果是多对多模式，比如一个文件夹生成到另一个文件夹，同时一次性有多个scss文件生成css文件等。

# 编译 light.scss 和 dark.scss 到 light.css 和 dark.css.
> sass light.scss:light.css dark.scss:dark.csssass  --watch  fileFolder:outputFolder/css

当名字为fileFolder这个文件夹里任意一个.scss后缀的文件变化时，就将其编译到名字outputFolder/css这个文件夹里面（会自动生成相应的.css文件）

4.Sass文件编译快览

4.1 命令行编译配置选项

可以通过 sass -h 或 sass --help 查看详细配置项。

配置选项可以指定编译后的css的排版、是否生成调试map、开启debug等，最常用的是 --style 和 --sourcemap。

4.2 `--watch`监听文件变化

sass使用--watch选项，用于监听scss文件的变化。这样，当scss文件内容有改动时，会自动编译为css。

监听单个scss文件

sass --watch .\firstsass.scss .\firstsass1.css

监听scss文件夹

sass --watch .\scssdir\ .\cssdir\sass --watch scssdir:cssdir

可以看到，使用 : 可以指定输出的路径（文件夹），否则css将默认生成在源scss文件所在目录中。

结合 --style 监听

sass --watch app/sass:public/stylesheets --style=compressed

使用压缩（compressed）的样式（style）输出 css 文件

4.3 `--style`指定css的样式

--style 的css格式有两种：expanded（默认）、compressed。

旧版本的Ruby实现中有四种样式，还有nested、compact。

// 指定编译格式
sass input.scss:output.css --style=expanded

比如，一个scss文件如下：

.box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}
}

下面，可以查看expanded、compressed编译后的css格式。

expanded ：默认值，未压缩的展开的css格式

每个选择器和声明单独一行。

执行如下命令编译：

sass styletest.scss styletest.css --style=expanded# 或 sass styletest.scss styletest.css

expanded编译过后的样式，是标准的没有经过任何压缩，全部字符展开的css格式：

.box {width: 300px;height: 400px;
}
.box-title {height: 30px;line-height: 30px;
}

compressed 去除所有的空白字符，全部css内容压缩为一行

生产环境中推荐的css格式。

执行如下命令编译，将css结果输出在命令行中：

sass --style=compressed styletest.scss.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

5.使用VSCode插件编译

5.1 基本使用

live sass compiler是VSCode扩展，可以实时地将SASS / SCSS文件编译/转换为CSS文件。

可以自动添加css兼容性前缀，-webkit-，-moz-，-ms，-o-等。
可以自定义css文件解析后的代码样式（expanded 展开，compact，compressed 压缩，nested）。
可自定义编译/转换后的文件扩展名（.css或.min.css）。

1.在vscode插件里搜索live sass compiler安装。

2.安装后，新建scss文件，在vscode底部状态栏中点击watch sass，此时状态为 Watching ，即可自动解析sass为css文件。

5.2 自定义设置

在使用live sass compiler插件时，并不是所有的默认设置都如我们所愿，那么，我们来看一下如何自定义设置。

1.编译/转换后的文件格式、扩展名、保存位置

文件格式
格式可以是expanded，compact，compressed或nested。默认值为 expanded。
扩展名
扩展名可以是.css或.min.css。默认值为.css。
保存位置
默认的转换后的css文件保存在scss文件的同级目录下，但实际，我们通常需要把所有scss文件保存在scss文件夹，而css文件希望保存在css的文件夹，如图所示：

我们在配置中如下设置：

"liveSassCompile.settings.formats": [{"format": "expanded","extensionName": ".css","savePath": "~/../css/"}
]

savePath即为导出后的文件保存位置。

2.去掉编译时出现的css.map文件
在每个文件编译后，默认设置下，会同时出现一个map格式的文件，有时并不需要该文件，那么我们如何去掉呢？

"liveSassCompile.settings.generateMap": false,

默认值为true，我们设置为false即可。

3.设置css兼容性前缀
live sass compiler可以在编译时自动添加CSS兼容性前缀（-webkit-，-moz-，-ms，-o-等），如下设置：

"liveSassCompile.settings.autoprefix": ["> 1%","last 3 versions"
],

其中，

">1%"是指通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
"last 3 versions"是指每个浏览器的最后3个版本。

这里也可以设置为具体的浏览器，如下：

"liveSassCompile.settings.autoprefix": ["ie >= 6",  //ie6以上"firefox >= 8","chrome >= 24","Opera>=10"
],

总结

个人配置：

"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": ["ie >= 6",  //ie6以上"firefox >= 8","chrome >= 24","Opera>=10"
],
"liveSassCompile.settings.excludeList": ["**/node_modules/**",".vscode/**"
],
"liveSassCompile.settings.formats": [{"format": "expanded","extensionName": ".css","savePath": "~/../css/"},      "liveSassCompile.settings.showOutputWindow": true
]

压缩生成min.css文件
"liveSassCompile.settings.formats": [// More Complex{"format": "compressed","extensionName": ".min.css","savePath": "~/../css/"} ]

感觉总体作用不大，还是结合webpack等工具，实时更新页面内容时，实时编译scss，而不需要单独使用该工具。

6.使用webpack编译

在目前主流的前端项目中，一般是使用 Webpack 来构建我们的前端项目，并且大多数都跑在 Node 环境下。

行如下命令安装 sass-loader ：

npm install mini-css-extract-plugin -D
npm install css-loader -D
npm install sass-loader --save-dev

webpack.config.js

module.exports = {...module: {rules: [{test: /\.s[ac]ss$/i,use: ['[MiniCssExtractPlugin.loader',// 将 css 文件整合到 js 文件中'css-loader',// 编译 sass 文件为 css 文件'sass-loader']}]},plugins: [// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/[name].css",}),]
}

01 【Sass的安装使用】相关推荐

saiku docker配置部署_【安装教程】01 Gitea Docker 安装部署 - 【SkywenCode】技术团队基...
在2016年-2019年,SkywenCode技术团队使用码云Gitee 作为线上代码库管理,基于敏捷开发和持续构建的思路,我们整体基础建设以Drone / Jenkins + Docker 的方式构 ...
PHPwind9.01傻瓜图解安装教程
PHPwind9.01傻瓜图解安装教程大家好,按照惯例,PHPwind出新版本,我就会习惯发布图解安装教程,现在开始了~ 首先, 1.您的空间要支持php+mysql, 2.您的m ...
SASS的安装与使用（windows系统）
Sass官方文档安装一.安装Ruby Sass是用Ruby语言写的,但是两者的语法没有关系,所以学 Sass 不用学 Ruby,只是必须先安装Ruby,然后再安装Sass. Linux和Mac已自 ...
史上最简单的，最直接的sass的安装教程
废话不多说直接进入主题: 1.sass基于ruby,所以安装sass前下载Ruby. 2.下载后直接安装,在这里注意选择把它添加到环境变量中,Add Ruby executables to you ...
Ubuntu17.04+Nvidia GT 640LE+CUDA9.0+cuDNN7.05+Tensorflow1.5r0(GPU)+Anaconda5.01(python3.6)安装
Ubuntu17.04+Nvidia GT 640LE+CUDA9.0+cuDNN7.05+Tensorflow1.5r0(GPU)+Anaconda5.01(python3.6)安装一.详细的安装 ...
sass教程之--sass的安装
Sass 安装本章节我们主要介绍 Sass 的安装与使用. NPM 安装我们可以使用 npm(NPM 使用介绍)来安装 Sass. npm install -g sass 注:国内 npm 建议使 ...
QIIME 2教程. 01简介和安装 Introduction Install(2020.11开始更新)
写在前面 QIIME是微生物组领域最广泛使用的分析流程,10年来引用20000+次,2019年Nature杂志评为近70年来人体菌群研究的25个里程碑事件--里程碑16:生物信息学工具助力菌群测序数据 ...
QIIME 2用户文档. 01简介和安装 Introduction Install(2020.2)
写在前面 QIIME是微生物组领域最广泛使用的分析流程,10年来引用近20000次,2019年Nature杂志评为近70年来人体菌群研究的25个里程碑事件--里程碑16:生物信息学工具助力菌群测序数据 ...
oracle-xe-11.2.0-1.0.x86_64安装教程
目录 1.下载OracleXE的包 2.安装依赖 3.根据提示安装XE 4.连接数据库 oracle -11g-xe是数据库是免费版本,支持标准版的大部分功能.oracle XE版本也称快捷版本.是个 ...

01 【Sass的安装使用】

Sass的安装使用

1.介绍

1.1 CSS预处理技术，及种类介绍

1.2 什么是sass

2.关于scss和sass

3.安装和命令行编译

4.Sass文件编译快览

4.1 命令行编译配置选项

4.2 `--watch`监听文件变化

4.3 `--style`指定css的样式

5.使用VSCode插件编译

5.1 基本使用

5.2 自定义设置

6.使用webpack编译

01 【Sass的安装使用】相关推荐

最新文章

热门文章

01 【Sass的安装使用】

Sass的安装使用

1.介绍

1.1 CSS预处理技术，及种类介绍

1.2 什么是sass

2.关于scss和sass

3.安装和命令行编译

4.Sass文件编译快览

4.1 命令行编译配置选项

4.2 --watch监听文件变化

4.3 --style指定css的样式

5.使用VSCode插件编译

5.1 基本使用

5.2 自定义设置

6.使用webpack编译

01 【Sass的安装使用】相关推荐

最新文章

热门文章

4.2 `--watch`监听文件变化

4.3 `--style`指定css的样式