sass的安装以及调试

我不是女神ヾ 2022-03-25 03:26 231阅读 0赞

SASS 教程

1-1 SASS 简介  
CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的  
出现，让 CSS 实现了通过代码编程来实现的方式。  
SO…SASS 是一种 CSS 开发工具，提供了许多便利的写法，让 CSS 的处理实现了可编程  
处理。  
SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好  
的 CSS 样式表文件，易于组织和维护。  
1-2 SASS 安装  
SASS 是 Ruby 语言开发的一个用于动态编程 CSS 文件的框架，但是学习 SASS 跟 Ruby 没  
有任何关系，唯一的联系就是 SASS 的运行以来 Ruby 环境。  
SASS 官网：[http://sass-lang.com/][http_sass-lang.com]  
1-2.1 MAC 安装  
mac 上一般情况已经有 ruby 环境的支持，所以只需要打开终端，输入一下命令进行安装  
SASS 教程  
gem install sass  
备注：安装完成后，使用如下命令进行测试【查看安装版本命令】  
sass -v  
1-2.2 windows 安装  
 安装 ruby  
 sass 的依赖环境，必须安装。  
 通过命令提示符黑窗口执行命令进行安装  
gem install sass  
1-3 QUICK START  
1-3.1 入门程序  
 文件结构  
|-- WORKSass/  
|-- css/  
|-- demo01.scss  
 在指定的文件夹中创建 demo01.scss 文本文件  
@charset ”utf-8”; // 设置支持中文注释  
body\{  
background-color:\#fff;  
font-size:16px;  
\}

 命令行中，执行如下命令进行编辑  
 sass \[scss\_name\]:<targetCss\_name>  
 sass scss 文件:编译好的目标 css 全路径名称  
 编译结果：在指定的文件夹 css 中生成了指定的 css 样式表文件：demo01.css  
1-3.2 自动编译命令  
 watch 命令  
语法

> > sass --watch sass:css  
> > sass --watch 要监听的目录:编译后的 css 文件的位置  
> >  使用 watch 命令  
> > 开始监听【–watch .:css 命令中，.表示当前目录】  
> > 修改 sass 文件  
> > SASS 教程  
> > 编写：老木  
> > 命令行监听提示  
> > 目标 css 文件样式  
> > 1-3.3 编译输出格式  
> > 默认情况下，SASS 提供了四种格式的 CSS 输入，默认情况输出是嵌套格式  
> > 格式 描述  
> > nested 嵌套  
> > compact 紧凑——  
> > expanded 扩展——完全格式化标准  
> > compressed 压缩——一行  
> > 不同格式的展示方式  
> >  案例 1：嵌套格式——不常用  
> > demo02.scss【以下是 sass 中嵌套格式的写法】  
> > demo02.css【输出的 css 样式中，会保存这样的嵌套的缩进格式】  
> > SASS 教程

 案例 2：紧凑格式——常用  
 修改输出样式  
 >> sass --watch .:css --style compact  
命令行修改输出格式  
修改格式 demo02.scss  
输出格式 demo02.css  
 案例 3：扩展格式——常用——规范的 CSS 代码格式  
修改输出样式格式

> > sass --watch .:css --style expanded  
> > 修改 demo02.scss 文件  
> > … .代码同上. …  
> > 输出 demo02.css 文件格式  
> > SASS 教程

 案例 4：压缩格式——常用——用于在线项目的小文件  
修改输出样式格式

> > sass --watch .:css --style compressed  
> > 修改 demo02.scss 文件  
> > … . 代码同上. …  
> > 输出 demo02.css 文件格式  
> > 1-3.4 sass 扩展名  
> >  .sass【sass3.0-版本】  
> >  .scss【sass3.0+版本，常用】  
> > 这两种在书写代码格式上，有一定的区别  
> > 根据项目开发的规范，scss的写法和项目规范更加契合，同时代码的可读性也提高了很多，  
> > 所以正常情况下，项目组都会采用.scss 格式的语法进行 sass 程序开发。  
> > .sass .scss  
> > 备注：sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种就是我们这里使用的 scss 文件，这种  
> > 和我们平时写的 css 文件格式差不 多，使用大括号和分号。而本教程中所说的所有 sass 文件都指后缀名为 scss 的文件。  
> > 在此也建议使用后缀名为 scss 的文件，以避免 sass 后缀名的严 格格式要求报错。  
> > SASS 教程

[http_sass-lang.com]: http://sass-lang.com/