发表于: 2018-07-09 22:02:18
0 677
今天完成的事情:
完成任务12
明天计划的事情:
完成下面任务
遇到的问题:
1、在编译scss的时候比如类似“color与background-color”这种结构,我想的是定义$c:color,在使用的时候按下面方法写,结果转成css的时候出现了问题,如下:
只有在下面这种情况下才能转成正常的css样式
想了一下为什么只能代替一部分,看了别人写的教程有一句话:SASS允许使用变量,所有变量以$开头。
我的理解是因为是变量,所以只能替代一部分。
我写错的地方相当于先定义$c=color,然后在语句中$c:#6d6e6a,那么就相当于又把$c=#6d6e6a,当调用$c的时候相当于background-#6d6e6a,所以当然是错的。一时没转过弯来当时。。。。。
收获:
1、学习了sass及安装
1 下载安装ruby
2 cmd输入输入 gem install sass
3 安装完毕后输入 sass -v查看sass版本信息
4 webstrom点击setting选择tool下的file watcher ,添加scss,program里选择“sass.bat”
5 新建文件.scss 编写后同时出现.
2、Sass 和 SCSS 有什么区别?
Sass 和 SCSS 其实是同一种东西,两者之间不同之处有以下两点:
1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
3、sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
4、sass常见错误就是编码和路径不能有中文(我就在这进坑,有中文死活编译不了)
5、关于编译风格我喜欢--style nested,比较容易看,格式和css一样
可能还是不熟还是不习惯sass还是觉得css方便
评论