sass学习（一）

一、sass的安装

https://www.sass.hk/install/

二、sass语法（.scss语法）

2.1 新建项目

1.新建一个测试项目

compass create learn-sass-syntax

2.切换到项目的目录：

cd learn-sass-syntax/

为了文件实时编译，执行命令：

compass watch

3.打开文件夹sass下的screen.css。

2.2 使用变量

1.声明变量

$highlight-color: #F90;

2.变量引用

.selected {
  border: 1px solid $highlight-color;
}

3.变量名用中划线还是下划线分隔;

$link-color和$link_color 指向的是同一个变量。

使用中划线的方式更为普遍。

4.局部文件

_variables.scss 前面加下划线，表示局部文件，不需要编译

一般用来书写声明变量。

引用文件：

@import "variables";

 2.3 @import

1.区分sass中的@import与原生css中原生@import

sass中的@import规则：sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

css中原生@import规则：1. 放在代码的最前边   2.对性能不利

在sass中默认是sass中的@import，如果你想使用原生@import：（以下四种情况sass会认为是原生css的@import）

2.sass中@import： 

3.引入多个scss文件（以逗号隔开）

@import "variables","compass/reset";

 2.4 注释

1./* ... */的注释语法

即静默注释，其内容不会出现在生成的css文件中。

---

报错：（踩坑记）

1.scss文件修改并未实时编译：

 1.官网：

  2.scss文件在sass文件下，css文件在stylesheets文件夹下

sass --watch ./sass:./stylesheets

 3.检查一些campass watch的路径是否正确，并重新执行一次命令。

 

2.error sass/screen.scss <line **: Invalid GBK character "\xE5">

 1.在screen.scss文件中第一行加上：

@charset "utf-8";

  2.项目路径最好没有中文。

3.sass expected selector or at-rule, was "@import "variab..."

因为我在第一行加入@charset "utf-8"忘记加;分号。

.scss以{}表示层级结构, 语句后面需要写分号。

4.Error: File to import not found or unreadable: compass/reset.

目前发现是因为加注释，如果不加注释，就正确。

我重新建了项目，不加//注释，不加@charset "utf-8";，然后就正确了，原来的项目也这么做，还是报这个错，我也一脸懵逼。但是得接着查，这两项目唯一不同的是前者，我把screen.css中一开始的内容（1-68行标签样式）全部干掉了。重新copy进去，然后重新执行compass watch命令，然后就正确了（不加//注释，不加@charset "utf-8";）。

接着探索吧....（在现在正确的项目中）

1.先加入中文注释

不管是// 注释还是/**/注释，只要有中文，报错误2。所以加上@charset "utf-8";

2.加上@charset "utf-8";

之前的项目我加在注释后的第一行，并非文件内容的第一行。（我以为注释不影响）

---