发表于: 2019-06-25 23:30:40

1 913


今天完成的事情:

昨天写完了任务十一 ,今天开始看sass,这个sass是对我而言是个比较新的东西,而我对新的东西理解的非常慢,这个sass里面的东西又比较多,所以今天从早上开始看sass的官方文档快速入门,然后就看的不是很明白,比较难受,然后 在小课堂里面看了很多以前的师兄讲的sass的视频,当时没把sass下载好所以没跟着敲代码,所以还是看不懂。果然看视频的时候还是要跟着敲一遍才行,不过也弄明白sass大概的作用了:

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

1.SASS的变量

SASS的变量使用$开头,可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。


2.SASS的嵌套

在sass中属性和选择器嵌套是非常伟大的特性,因为它们不仅大大减少了你的编写量,而且通过视觉上的缩进使你编写的样式结构更加清晰,更易于阅读和开发。


3.SASS的继承

SASS允许一个选择器,继承另一个选择器。sass的继承用@extend。


4.SASS的占位符

占位符 用%开头

占位符也是一个非常强大的功能,和继承也有着密切的关系。比如说,我们有多个类都有相同的代码共有,需要继承同一个基类。但是基类本身并不存在或者基类自身并不需要这些样式,像继承的写法有产生了代码的冗余,最终会编译出多余的代码。

用占位符声明的代码,在不被@extend调用的情况下,是不会产生任何代码的


5.SASS的注释

SASS共有两种注释风格。

标准的CSS注释 /* 注释 */ ,该会保留到编译后的文件。

单行注释 // 注释 ,只保留在SASS源文件中,编译后被省略。


6.SASS混合器

混合器使用@mixin标识符定义。

这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式,然后可以通过@include来使用这个混合器,放在你希望的任何地方。调用的混合器会把所有样式提取出来放在被调用的地方

混合器并不一定总得生成相同的样式。可以通过在混合器时给混合器传参,来定制混合器生成的精确样式。

这些是简单的认识了sass吧,东西确实比较多,也比较难用,现在我主要用到的就是嵌套,后面几个以后用到了再说吧。

明天计划的事情:

明天计划早上做完任务十一,然后下午做完任务十二,这个说实话任务十一和十二也就改改样式,然后用最简单的嵌套简化代码,这个应该没啥难的吧,好像任务十往后就是对sass的应用了,只要把sass用好css任务就算是做完了。

遇到的问题:

几天遇到的最主要的问题就是ruby下载的太慢了,简直不符合常理,谷歌浏览器下载的途中是不可以中断的,一中断就再也续不上了,后来用网线下载的也很难, 没办法,最后还是靠崔师兄向师妹要了一个sass的安装包才解决了问题,关键的时候还是师兄靠谱啊。
收获:

最大的收获就是安装了sass吧,然后简单的了解了一下他的功能,虽然还是一脸懵逼,但好歹也算是认识到了新东西了,明天再加深一下知识,尽快的熟练使用sass才是正事。


返回列表 返回列表
评论

    分享到