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

小结

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

习题

1.在Sass中编译出来的样式风格有哪些?[多选](ABCD)

A.嵌套输出方式nested                                                     B.展开输出方式expanded

C.紧凑输出方式compact                                                 D.压缩输出方式compressed

2.Sass的变量不包括以下哪个?(D)

A.声明变量的符号”$”                                                        B.变量名称

C.赋予变量的值                                                                    D.变量类型

3.以下sass代码编译后生成的css文件为哪项?(A)

a{

color: red;

&:hover{

color: green;

}

}

A.a{ color: red; } a:hover{ color: green; }

B.a{ color: red; } &:{ color: green; }

C.a{ color: red; } hover{ color: green; }

D.a{ color: red; } a{ color: green; }

4.SassScript支持以下哪些数据类型?[多选](ABCD)

A.数字                                                                                              B.文本字符串

C.颜色                                                                                              D.布尔值

5.所有算数运算都支持颜色值,并且是分段运算。下面的颜色计算的结果是?(C)

p { color: #010203 + #040506; }

A.#010203;                                                                                        B.#040506;

C.#050709;                                                                                        D.#000000;

6.Sass是什么?

参考答案:

Sass是对CSS的扩展,让CSS语言更强大、优雅。它允许你使用变量、嵌套规则、mixins、导入等众多功能,并且完全兼容CSS语法。Sass有助于保持大型样式表结构良好,同时也让你能够快速开始小型项目,特别是在搭配Compass样式库一同使用时。

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

时间: 2024-11-09 02:21:33

IT兄弟连 HTML5教程 初识Sass 小结及习题的相关文章

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

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

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

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

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使用实例

在了解基本的Sass语法之后,那么笔者给各位读者抛出一个需求,使用Sass语法实现七色板,效果图1所示: 图1  七色板示意图 在初步了解Sass之后,可能在思路上还没有从CSS转换过来,那么笔者就带领各位读者一起来分析这个需求的特点. Ø 七色板由七种颜色组成,分别为红橙黄绿蓝灰紫 Ø 每一种颜色都是自左向右颜色逐渐加深 Ø 每一行格子有十一个 Ø 每一行的都有一个基色,并且基色的位置位于中间位置,小于基色位置则依次变浅,大于基色位置则依次加深. 既然分析出了特点或需求,那各位读者就来看看在之

IT兄弟连 HTML5教程 HTML5表单 小结及习题

小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架.HTML5新增表单元素有<datalist>.<keygen>和<output>.<datalist>元素规定输入

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时,不用工具你便手足无措,更不用提如何进行页面优化以