IT兄弟连 HTML5教程 初识Sass Sass使用实例

在了解基本的Sass语法之后,那么笔者给各位读者抛出一个需求,使用Sass语法实现七色板,效果图1所示:

图1  七色板示意图

在初步了解Sass之后,可能在思路上还没有从CSS转换过来,那么笔者就带领各位读者一起来分析这个需求的特点。

Ø 七色板由七种颜色组成,分别为红橙黄绿蓝灰紫  

Ø 每一种颜色都是自左向右颜色逐渐加深  

Ø 每一行格子有十一个

Ø 每一行的都有一个基色,并且基色的位置位于中间位置,小于基色位置则依次变浅,大于基色位置则依次加深。 

既然分析出了特点或需求,那各位读者就来看看在之前的讲述中是否有哪些基本语法可以为这次需求所用到,笔者将解决方案总结如下。

Ø 七种颜色可以定义为变量,或者列表解决七色问题。

Ø 颜色加深函数“darken”和变浅函数“lighten”解决颜色问题。  

Ø 流程控制语句中的@for循环,解决相同格子与类似行的问题。

Ø 流程控制语句中的@if语句,解决加深和变浅问题。 

既然基本语法都能够解决分析出来的每一个需求,那么只需要理清思路就能实现这个七色板,那么笔者就带着大家理一下实现的思路。

首先将前台的HTML代码实现,如下所示:

其二,笔者先将七色板分解,仅实现第一行的红色板,如下所示:

可以看到,第一行实现成功。其实第一行实现成功后,仅需要替换对应的选择器和颜色值即可让它实现其余色板。那么,各位读者有没有想到,可以传递参数的混合宏呢?

其三,用混合宏封装单行色板,然后使用for循环最终实现七色板,最终代码如下:

相信有读者朋友在完成七色板功能之后,还会有这样的疑问。原生的CSS就能实现这个功能,为什么还要多学一门语言呢,太麻烦了。

那么笔者就抛出几个问题,各位读者请思考一下解决方案,问题如下:

Ø 如果需要修改格子的尺寸和颜色,是重新做一份,还是修改Sass源码,如果修改那该如何修改? 

Ø 如果要将七色板增加成八色板、九色板,那么该如何去扩展?  

其实呢,使用Sass编码时正好解决了这些维护、扩展的问题。下面是上面两个问题的回答。

Ø 如果需要修改尺寸,仅需要修改行高和行宽即可,格子宽度就是行宽除以单行格子个数。如果修改颜色,仅需要对颜色列表进行修改调整即可。

Ø 如果需要增加或减少色板,仅需要对颜色列表进行相应的增加和减少,并且要与HTML代码对应即可。

笔者就不再贴编译后CSS代码的图了,它最终使用默认模式生成的代码行数是250行左右,而上述的Sass代码仅需要43行就能完成。

最后,笔者使用一句话总结一下Sass的优点:使用Sass语言编写CSS代码,让你的代码具有高质量、高扩展、易维护、高效率的特性。

原文地址:https://www.cnblogs.com/itxdl/p/12117887.html

时间: 2024-10-28 14:47:34

IT兄弟连 HTML5教程 初识Sass Sass使用实例的相关文章

IT兄弟连 HTML5教程 初识Sass Sass的作用

在了解完Sass之后,相信大多数人更期望了解它到底如何将我们编写CSS代码的效率提高的?到底是如何让我们的CSS代码更具有可维护性的?到底如何让我们编写的CSS代码更具有重用性的?那么笔者就来讲述一个Sass编码的实例,来解答这些疑问. 首先我们先拟定一个需求,让HTML中按钮有相同的大小和不同的款式,那么笔者根据这一需求,使用Sass编写出了如下代码: 首先笔者来分析一下,上述代码的具体含义.在20行以前笔者将按钮的背景色,字体颜色.按钮背景色.边框线颜色定义成了变量:在21行到25行,笔者将

IT兄弟连 HTML5教程 初识Sass Sass基本语法

本文重点在于HTML5与CSS3的学习和使用,HTML与CSS不属于编程范畴,更偏向于设计,而Sass是编程化的CSS的扩展语言,对于没有接触过编程的读者可能会有点吃力,这里不做对语法详细介绍,仅作为基本介绍,让读者了解Sass的优越性,如果对Sass感兴趣,请自行查阅相关资料. Sass基本语法 在大部分编程语言之中,其基本语法都包括这样一些东西,比如说变量.数据类型.运算符.流程控制语句.函数等,具体的这些名词都具有什么功能呢?那么笔者来依次进行介绍. 1.变量 变量,顾名思义,就是可以动态

IT兄弟连 HTML5教程 初识Sass Sass的使用和编译

Sass作为一门具有编程性质的CSS扩展语言,它具有独立的文件名称,因为其历史原因,它的后缀名可以有两个选择,分别为sass和scss,其中sass的编写格式不符合CSS编程语法规范,其不能使用大括号和分号,需要的严格的缩进来做定界.如下所示: body background: #eee font-size:12px p background: #0982c1 scss完全符合CSS语法,我们可以直接使用CSS语法,如下所示: body { background: #eee; font-size

IT兄弟连 HTML5教程 初识Sass 小结及习题

小结 Sass完全兼容CSS语法,并且添加了一些编程的特性,编写的Sass代码在编译之后最终生成的是CSS文件.Sass具有维护性高.可扩展性强.复用性高的优点,提高我们的编码效率.Sass是使用Ruby语言编写的,Sass的运行是依赖于Ruby环境的,所以在安装Sass之前我们首先要安装Ruby环境.Sass的后缀名可以有两个选择,分别为sass和scss,其中后缀名为sass需要的严格的缩进来做定界.跟大部分编程语言一样,Sass其基本语法也包括这些基本语法,比如变量.数据类型.运算符.流程

IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同的岗位所涉及的技术也会有差别,所以先要确定自己的发展定位,收集要学习的内容,整理好学习的顺序.很多时候,成功除了勇气.坚持不懈外,更需要方向.也许有了一个好的方向,成功来得比想象的更快.如果在错误的路上奔跑,再怎么努力也是白搭.学习Web前端也是如此,首先应该选择一个正确的学习路线.HTML5学习线

IT兄弟连 HTML5教程 了解HTML5的主流应用2

3  与用户交互的特效 十多年前做一个页面,只要结构清晰并且内容呈现完整,就是一个非常不错的网站了.而现在的用户对视觉的体验要求越来越高,在用户的潜意识中,页面做的越炫则代表公司实力越强.不管是整体页面风格特效(目前采用类似PPT中的幻灯播放效果居多),还是页面中的局部特效(例如炫酷的导航),以及在微信中传播的品牌宣传信息等,都成为了HTML5开发的主战场.而过去十几年,WEB是用特效与互动多数都是由Adobe Flash主宰,而现在的目光转向了HMTL5,HTML5的画图标签允许你做更多的互动

IT兄弟连 HTML5教程 HTML5的靠山 W3C、IETF是什么

无规矩不成方圆,软件开发当然不能例外.Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准.Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循,开发者一样要遵循相同的标准.而似乎和Web相关标准的制作组织机构很多,例如W3C.IETF.ECMA和  WHATWG等,哪些是我们需要了解的?需要掌握什么信息?都在本节详细介绍. W3C是什么 W3C创建于1994年,W3C是万维网(World Wide Web)联盟的

IT兄弟连 HTML5教程 HTML5的基本语法 如何选择开发工具

如何选择开发工具 有许多可以编辑网页的软件,事实上你不需要用任何专门的软件来建立HTML页面,你所需要的只是一个文本编辑器(或字处理器),如Office Word.记事本.写字板等.制作页面初学者通常都会选择一个集成开发环境(IDE),例如Dreamweaver,入门快.见效快,在不知不觉中已经完成了页面制作.但是随着学习的深入,你就会发现步入了一种窘境,因为过分的依赖IDE导致我们不清楚其实现的本质,知其然但不知其所以然.特别是页面出现BUG时,不用工具你便手足无措,更不用提如何进行页面优化以

IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题,以及开发人员对HTML5新技术需要一段时间了解和熟练,所以学习HTML必须兼顾这两个版本.可以按版本升级的方式,先学习HTML4的技术,再延伸学习HTML5新增加的内容.而HTML是一个不断变化的标准,不管是哪个版本都属于HTML技术,所以本书直接学习HTML5的标准,当然遇到与HTML4变化较大的