这里是修真院前端小课堂,每篇分享文从 八个方面深度解析前端知识/技能,本篇分享的是: 【如何使用sass? 】 一、背景介绍 CSS预处理器 CSS 预处理器 定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。 俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。 二、知识剖析 CSS预处理器 CSS 预处理器 定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。 俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。 二、知识剖析 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。 Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能 Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。 SASS的安装 点击下载 SASS的使用 SASS提供四个编译风格的选项 NESTED是 SASS 默认的输出格式,能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行,缩进量与 SASS 文件中一致,每行的缩进量反映了其在嵌套规则内的层数。 COMPACT 输出方式比起上面两种占用的空间更少,每条 CSS 规则只占一行,包含其下的所有属性。嵌套过的选择器在输出时没有空行,不嵌套的选择器会输出空白行作为分隔符。 COMPRESSED 输出方式删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。 EXPANDED 输出更像是手写的样式,选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进。 SASS的变量 SASS的嵌套 SASS的注释 标准的CSS注释 /* 注释 */ ,该会保留到编译后的文件。 单行注释 // 注释 ,只保留在SASS源文件中,编译后被省略。 SASS混合器 这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式 然后可以通过@include来使用这个混合器,放在你希望的任何地方。调用的混合器会把所有样式提取出来放在被调用的地方 混合器并不一定总得生成相同的样式。可以通过在混合器时给混合器传参,来定制混合器生成的精确样式。 SASS的继承 sass的继承用@extend SASS的占位符 占位符也是一个非常强大的功能,和继承也有着密切的关系。比如说,我们有多个类都有相同的代码共有,需要继承同一个基类。但是基类本身并不存在或者基类自身并不需要这些样式,像继承的写法有产生了代码的冗余,最终会编译出多余的代码。 用占位符声明的代码,在不被@extend调用的情况下,是不会产生任何代码的 三、常见问题 四、解决方案 五、编码实战 六、拓展思考 判断一组属性是否应该组合成一个混合器,一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式,那么往往能够构造一个合适的混合器。如果你找不到,这时候构造一个混合器可能并不合适。 何时使用继承 如果a的样式和b的样式相同,那么就可以使用继承,让a继承b的属性,或者让b继承a的属性 何时使用占位符 七、参考文献 SASS用法指南 八、更多讨论 答:CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。
2、sass和Ruby有什么关系? 答:sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。 3、混合器和继承,占位符有什么区别? 答:混合器,可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式,那就应该把这段样式构造成 优良的混合器,尤其是这段样式本身就是一个逻辑单元,比如说是一组放在一起有意义的属性。 来源:https://www./content-4-373051.html
|
|