发表于: 2019-06-29 22:47:51

1 771


今天完成了什麽:

修改任务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;


返回列表 返回列表
评论

    分享到