今天完成的事情

昨天小课堂录屏没路上,上午又花了些时间重新录了一遍.之前安装了sass,今天关联了webstorm,学习了一下关于sass的一些基础用法

明天的计划

结束任务11

遇到的问题

在关联webstorm的时候,一直关联不上,创建了scss但是不会自动生产css文件,一直找不到原因,后来看到了这篇文章:http://jinyanhuan.github.io/2015/04/03/sass-in-webstorm/

第一个路径是选择你下载的scss文件,关键是第二个和三个路径,我找了好几个教程都没有提到这两个路径是干什么的,其实这两个路径还是很重要的

第二个路径Arguments:

可以配置编译后的文件的输出路径,我这里写的是:

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

注意, $FileName$后面有个冒号,然后$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.

这里特别的绕,刚开始看的一脸懵逼,如果不明白的话可以和我一样,创建一个和scss同级的css文件夹,那么输入上面的路径,会自动在css文件夹里面生产css文件,这就可以了.

第三个路径Output paths to refresh:

改成这样:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

在使用的过程中还有两点需要注意:

1.同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2.这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.

收获

刚开始用sass写任务四,感觉和css是一个样子,用不出来差别,师姐姐告诉我,sass的目的不是这么简单

sass的语法构成主要这几个

SASS-扩展名

SASS-变量：变量定义、特殊变量。

SASS-嵌套：选择器嵌套，嵌套属性。

SASS-mixin：SASS混合声明以及调用，包括无参数混合、有参数混合、多参数混合。

SASS-继承扩展

SASS-导入

SASS-三种注释(多行注释、单行注释、强制注释)

SASS-数据类型：7 种主要的数据类型

SASS-数字&数字函数：在SASS中可以对数字进行运算，同时SASS支持数字函数的运算

SASS-字符串的操作

SASS-字符串函数

SASS-颜色以及颜色函数

SASS-列表(list)

SASS-map和相关函数

SASS-布尔值

SASS-interpolation

SASS-判断语句@if

SASS-循环语句@while

SASS-循环语句的两种表现形式@for

SASS-@function

SASS-警告 VS 错误

现在基本上还用不到,但是要提前开始学习语法,学会使用sass编译器编译有很多好处,比如:

易维护，更方便的定制，比较适合大型的web项目。

可以将css代码模块化，分而治之

对于编程人员的友好，让css看起来更像是一门编程语言。

效率的提升 ，轻松的解决兼容和重复问题。

SASS 的出现不是为了取代 CSS 而生的，它是为了服务 CSS的