发表于: 2019-06-29 22:47:51
1 773
今天完成了什麽:
修改任务8910的部分bug
了解学习sass预处理;
写任务11;
遇到了什么问题:
如何使用sass;
收获了什么:
了解了sass,
什么是SASS
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。 Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法 并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的 大力推动,还是有很多开发者选择了 Sass。 Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。 最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。
2.SASS的使用
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss
3.SASS的变量
SASS的变量使用$开头,可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。
4.SASS的嵌套
在sass中属性和选择器嵌套是非常伟大的特性,因为它们不仅大大减少了你的编写量,而且通过视觉上的缩进使你编写的样式结构更加清晰,更易于阅读和开发。
5.SASS的继承
SASS允许一个选择器,继承另一个选择器。sass的继承用@extend。
6.SASS的占位符
占位符 用%开头
占位符也是一个非常强大的功能,和继承也有着密切的关系。比如说,我们有多个类都有相同的代码共有,需要继承同一个基类。但是基类本身并不存在或者基类自身并不需要这些样式,像继承的写法有产生了代码的冗余,最终会编译出多余的代码。
用占位符声明的代码,在不被@extend调用的情况下,是不会产生任何代码的
7.SASS的注释
SASS共有两种注释风格。
标准的CSS注释 /* 注释 */ ,该会保留到编译后的文件。
单行注释 // 注释 ,只保留在SASS源文件中,编译后被省略。
8.SASS混合器
混合器使用@mixin标识符定义。
这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式,然后可以通过@include来使用这个混合器,放在你希望的任何地方。调用的混合器会把所有样式提取出来放在被调用的地方
混合器并不一定总得生成相同的样式。可以通过在混合器时给混合器传参,来定制混合器生成的精确样式。
SASS和LESS的不同
1、Less:
是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。
2、Sass:
是一种动态样式语言,Sass语法属于缩排语法,
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。
关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$。
明天计划:
完成任务11;
评论