html5 global对象中有哪些常用方法

Python07

html5 global对象中有哪些常用方法,第1张

HTML5 标签列表

HTML5 <!--...-->标签

comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是,有助于增强代码的可读性。

HTML5 <!DOCTYPE>标签

!DOCTYPE 文档声明必须位于 HTML5 文档中的第一行,也就是位于 html 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

HTML5 <a>标签

html5 a 标签定义超链接,用于从一个页面链接到另一个页面。a 标签最重要的属性是 href 属性,它指定链接的目标 url 。

HTML5 <abbr>标签

abbr 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。

HTML5 <address>标签

address 标签定义文档作者或拥有者的联系信息。通常的做法是将 address 元素添加到网页的头部或底部。

HTML5 <applet>标签

定义和用法 applet 定义嵌入的 applet。 HTML 5 中不支持 applet 标签 请使用 object 标签代替它。

HTML5 <acronym>标签

定义和用法 HTML 5 不支持 acronym 标签。 请使用 abbr 标签代替它。 在 HTML 4.01 中,acronym 标签定义首字母缩略词。 如果首字母缩略词是一个单词,则可以被读出来,例如 NATO、NASA、ASAP、GUI。

HTML5 <area>标签

area 元素始终嵌套在 map 标签内部。area 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。

HTML5 <article>标签

article 标签是 HTML 5 的新标签, article 标签的内容独立于文档的其余部分。

HTML5 <aside>标签

html5 aside 标签定义其所处内容之外的内容。aside 标签的内容应该与附近的内容相关。

HTML5 <audio>标签

audio 标签是 HTML 5 的新标签, audio 标签想网页中插入声音,比如音乐或其他音频流。

HTML5 <b>标签

html5 b 标签定义粗体的文本。b 标签用于强调某些文本。如果您希望把文本标记为相比其他文本更为重要,应该使用 strong 标签。

HTML5 <base>标签

base 标签为页面上的所有链接规定默认地址或默认目标。base 标签必须位于 head 元素内部。

HTML5 <basefont>标签

HTML5 中不支持 basefont 标签。请用 CSS 代替。

HTML5 <bdi>标签

bdi 标签是 HTML5 中的新标签。bdi 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

HTML5 <bdo>标签

bdo 标签覆盖默认的文本方向。通过设置 dir 属性来设置文本的显示方向。

HTML5 <big>标签

HTML5 中不支持 big 标签。请用 CSS 代替

HTML5 <blockquote>标签

blockquote 标签之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。

HTML5 <body>标签

body 标签定义文档的主体。 body 标签包含文档的所有内容,比如文本、超链接、图像、表格、列表等。在 HTML 5 中,删除了所有 的特殊属性。

HTML5 <br>标签

br 标签插入简单的换行符。br 标签是一个空标签,意味着它没有结束标签。br 标签常用来输出空行

HTML5 <button>标签

button 标签定义按钮。您可以在 button 标签内放置内容,比如文本或图像。但是在 form 中通常使用 input 标签创建按钮。

HTML5 <canvas>标签

html5 canvas 标签定义图形,比如图表和其他图像。canvas 标签只是图形容器,您必须使用脚本来绘制图形。

HTML5 <caption>标签

caption 标签定义表格的标题。caption 标签必须直接放置到 table 标签之后。通常标题会居中显示在表格上方。

HTML5 <center>标签

HTML5 中不支持该 center 标签。请使用 CSS 代替。

HTML5 <cite>标签

cite 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题,通常斜体显示。

HTML5 <code>标签

em,strong,dfn,code,samp,kbd,var,cite 标签常用来格式话文本,使用 css 样式表可以显示更丰富的效果。

HTML5 <col>标签

col 标签为表格中的一个或多个列定义属性值。通过使用 col 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。

HTML5 <colgroup>标签

通过使用 colgroup 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。只能在 table 元素内使用 colgroup 标签。

HTML5 <command>标签

command 元素表示用户能够调用的命令。可以用它规定键盘快捷键。只有当 command 元素位于 menu 元素内时,该元素才是可见的。

HTML5 <datalist>标签

datalist 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

HTML5 <dd>标签

dd 标签定义一个定义列表中对项目的描述。dt 标签定义列表中的项目,而 dd>标签描述这些项目。

HTML5 <del>标签

del 标签定义文档中已删除的文本。与 ins 标签一起使用,描述文档中的更新和修正。

HTML5 <details>标签

details 标签是 HTML 5 中的新标签。details 标签用于描述文档或文档某个部分的细节。目前只有 Chrome 支持 details 标签。

HTML5 <dfn>标签

HTML5 <dir>标签

HTML5 中不支持 dir 标签。请用 CSS 代替。

HTML5 <div>标签

div 标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化。通常使用 div + css 对网页进行布局。

HTML5 <dl>标签

dl 标签定义一个定义列表。dl 标签内部使用 dd 和 dt 定义列表中的项目。

HTML5 <dt>标签

dt 标签定义一个定义列表中的一个项目。dd 标签描述这些项目。

HTML5 <em>标签

HTML5 <embed>标签

embed 标签是 HTML 5 中的新标签。embed 标签定义嵌入的内容,比如插件。

HTML5 <fieldset>标签

fieldset 标签会在相关表单元素周围绘制边框。fieldset 标签会在相关表单元素周围绘制边框。

HTML5 <figcaption>标签

figcaption 标签是 HTML 5 中的新标签。figcaption 标签定义 figure 元素的标题(caption)。

HTML5 <figure>标签

figure 标签是 HTML 5 中的新标签。figure 标签规定独立的流内容(图像、图表、照片、代码等等)。

HTML5 <font>标签

定义和用法 在 HTML 5 中,不支持 font 标签。请用 CSS 代替它。 font 标签规定文本的字体、大小和颜色。

HTML5 <footer>标签

footer 标签是 HTML 5 中的新标签。footer 标签定义 section 或 document 的页脚。

HTML5 <form>标签

form 标签标签用于创建供用户输入的 HTML 表单。form 标签包含多个表单元素,如:button,input,keygen,object,output,select,textarea

HTML5 <frame>标签

定义和用法 在 HTML 5 中不支持 frame 标签。 frame 标签定义框架集中的子窗口(框架)。 由于该标签对网页可用性的负面影响,在 HTML 5 中 frame 和 frameset 标签没有得到支持。

HTML5 <frameset>标签

定义和用法 在 HTML 5 中不支持 frameset 标签。 frameset 标签定义框架集。它用于组织多个窗口(框架)。 由于该标签对网页可用性的负面影响,在 HTML 5 中 frame 和 frameset 标签没有得到支持。

HTML5 <h1 - h6>标签

h1,h2,h3,h4,h5,h6 标签用来定义文档中的标题。h1 定义最大的标题。h6 定义最小的标题。

HTML5 <head>标签

head 标签是所有头部元素的容器。位于 head 内部的元素可以包含 title,base,link,meta,script,style等。

HTML5 <header>标签

header 标签是 HTML 5 中的新标签。header 标签定义文档的页眉(介绍信息)。

HTML5 <hgroup>标签

hgroup 标签是 HTML 5 中的新标签。hgroup 标签用于对网页或区段(section)的标题进行组合。

HTML5 <hr>标签

在 HTML 5 中,hr 标签定义内容中的主题变化,并显示为一条水平线。在 HTML 4.01 中,hr 标签仅仅显示为一条水平线。

HTML5 <html>标签

html 标签告知浏览器这是一个 HTML 文档。html 元素是 HTML 文档中最外层的根元素。

HTML5 <i>标签

i 标签定义的文本在 html 文档中呈现为斜体,以便与文档中其余部分区别开来。

HTML5 <iframe>标签

iframe 标签创建包含另一个文档的行内框架。在 HTML 5 中,仅仅支持 src 属性。

HTML5 <img>标签

img 标签定义 HTML 页面中的图像。img 标签定义 HTML 页面中的图像。img 标签定义 HTML 页面中的图像。

HTML5 <input>标签

input 标签规定 form 表单中用户可输入数据的输入字段。根据不同的 type 属性,输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等。

HTML5 <ins>标签

ins 标签定义文档的其余部分之外的插入文本。通常能够与 del 标签一起使用,来描述对文档的更新和修正。

HTML5 <keygen>标签

keygen 是 HTML5 中的新元素。keygen 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

HTML5 <kbd>标签

HTML5 <label>标签

label 标签为 input 元素定义文字标识,label 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。

HTML5 <legend>标签

legend 元素为以下元素定义标题(caption):fieldset、figure、details 。 legend 元素为以下元素定义标题(caption):fieldset、figure>、details。

HTML5 <li>标签

li 标签定义列表项,有序列表 ol 和无序列表 ul 中都使用 li 标签。 HTML 5 中,li 标签不再支持 type 属性。

HTML5 <link>标签

link 标签定义文档与外部资源之间的关系。link 标签大多数时候都用来连接 css 样式表。link 标签只能位于head 标签中。

HTML5 <map>标签

map 标签用于定义图像中可点击的热点区域。map 标签的 name 属性与 img 标签的 usemap 属性相关联,以创建图像与映射之间的关系

HTML5 <mark>标签

mark 标签是 HTML 5 中的新标签。mark 标签定义带有记号的文本。请在需要突出显示文本时使用 mark 标签。

HTML5 <menu>标签

menu 标签定义菜单列表。当希望列出表单控件时使用该标签。在 HTML 5 中,重新定义了 menu 元素,且使用用于排列表单控件。

HTML5 <meta>标签

meta 标签位于文档的头部 head 标签中,meta 标签的属性用来定义有关页面的元信息,比如 字符集,关键词,描述,重定向等。

HTML5 <meter>标签

meter 标签是 HTML 5 中的新标签。meter 标签定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。

HTML5 <nav>标签

nav 标签是 HTML 5 中的新标签。nav 标签定义导航链接的部分。

HTML5 <noframes>标签

定义和用法 在 HTML 5 中不支持 noframes 标签。 noframes 标签向浏览器显示无法处理框架的提示文本。

HTML5 <noscript>标签

noscript 元素用来定义在脚本未被执行时的替代内容(文本)。此标签用于可识别 script 标签但无法支持其中脚本的浏览器。

HTML5 <object>标签

object 定义一个嵌入的对象。请使用此元素向您的 HTML5 页面添加多媒体。

HTML5 <ol>标签

ol 标签定义有序列表。在 HTML 5 中,不再支持 compact 和 type 这两个属性

HTML5 <optgroup>标签

optgroup 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

HTML5 <option>标签

option 标签定义下拉列表中的一个选项。在 HTML 5 中,option 标签也用于新元素 datalist 中。

HTML5 <output>标签

output 标签是 HTML 5 中的新标签。output 标签定义不同类型的输出,比如脚本的输出。

HTML5 <p>标签

p 标签定义段落。在 HTML 5 中不再支持 p 标签的 align 属性。

HTML5 <param>标签

param 标签允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 object 标签提供参数。

HTML5 <pre>标签

pre 标签可定义预格式化的文本。pre 标签的一个常见应用就是用来表示计算机的源代码。

HTML5 <progress>标签

progress 标签是 HTML 5 中的新标签。progress 标签定义运行中的进度(进程)。

HTML5 <q>标签

q 标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。

HTML5 <rp>标签

rp 标签是 HTML 5 的新标签。rp 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

HTML5 <ruby>标签

ruby 标签是 HTML 5 的新标签。ruby 标签定义 ruby 注释(中文注音或字符)。

HTML5 <s>标签

s 标签定义加删除线的文本。HTML 5 中不再支持 s 标签。

HTML5 <samp>标签

HTML5 <script>标签

script 标签用于定义客户端脚本,比如 JavaScript。script 元素既可包含脚本语句,也可以通过 src 属性指向外部脚本文件。

HTML5 <select>标签

select 标签创建下拉列表。请在 form 元素中使用此标签来接受用户的输入

HTML5 <small>标签

在 HTML5 中,small 元素定义旁注信息,并显示为更小的文本。对于由 em 元素强调过的或由 strong 元素标记为重要的文本,small 元素不会取消对文本的强调,也不会降低这些文本的重要性。

HTML5 <source>标签

source 标签是 HTML 5 中的新标签。source 标签为媒介元素(比如 video 和 audio)定义媒介资源。

HTML5 <span>标签

span 标签用于对文档中的行内元素进行组合,以便通过样式表 css 对它们进行格式化。

HTML5 <strike>标签

定义和用法 在 HTML 5 中不支持 strike 标签。请使用 CSS 代替。 strike 标签定义加删除线的文本。请使用 del 标签代替。

HTML5 <strong>标签

HTML5 <style>标签

style 标签定义 HTML 文档的样式信息。scoped 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。

HTML5 <sub>标签

sub 标签可定义下标文本。sup 可定义上标文本。

HTML5 <summary>标签

summary 标签是 HTML 5 中的新标签。是 details 元素的第一个子元素,定义 details 元素的标题。

HTML5 <sup>标签

HTML5 <table>标签

table 标签定义 HTML 表格。一个简单的 HTML 表格包括 table 元素,一个或多个 tr、th 以及 td 元素。

HTML5 <tbody>标签

使用 tbody 标签,可以将表格分为一个单独的部分。tbody 标签可将表格中的一行或几行合成一组。在 HTML 5 中,不支持 tbody 标签的任何属性。

HTML5 <td>标签

td 标签定义 HTML 表格中的标准单元格。thead 元素中只能使用 th 标签按,不允许使用 td 标签。

HTML5 <textarea>标签

textarea 定义一个多行的文本输入区域。文本区中的默认字体是等宽字体 (fixed pitch)。

HTML5 <tfoot>标签

tfoot 定义表格的页脚(脚注),tfoot 内部必须拥有 tr 标签!tfoot 表亲必须位于 table 标签内。

HTML5 <th>标签

th 标签定义 HTML 表格中的表头单元格。th 元素中的文本呈现为粗体并且居中。th 标签在 tr 标签中定义。

HTML5 <thead>标签

thead 标签在 table 标签中使用,定义表格的表头。thead 内部必须拥有 tr 标签!

HTML5 <time>标签

time 标签是 HTML 5 中的新标签。time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

HTML5 <title>标签

title 位于 head 部分,用来定义文档的标题。title 元素在所有 HTML 文档中是必需且唯一的。

HTML5 <tr>标签

tr 标签定义表格中的行,一个 tr 元素包含一个或多个 td 或 th 标签。

HTML5 <track>标签

track 标签是 HTML 5 中的新标签。track 标签为诸如 video 元素之类的媒介规定外部字幕文件或其他包含的文版文件。

HTML5 <tt>标签

定义和用法 在 HTML 5 中不支持 tt 标签。 tt 标签定义打字机文本。

HTML5 <u>标签

在 HTML 5 中不支持 u 标签

HTML5 <ul>标签

ul 标签定义无序列表。请使用 CSS 来定义列表的显示样式。

HTML5 <var>标签

HTML5 <video>标签

video 标签是 HTML 5 的新标签。video 标签定义视频,比如电影片段或其他视频流。

HTML5 <wbr>标签

wbr 标签是 HTML 5 中的新标签。wbr 规定在文本中的何处适合添加换行符。

HTML5 <rt>标签

定义和用法 rt 标签定义字符(中文注音或字符)的解释或发音。 ruby 注释是中文注音或字符。 在东亚使用,显示的是东亚字符的发音。 与 ruby 以及 rt 标签一同使用: ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 ruby 元素时显示的内容。 实例 一个 ruby 注释: ruby汉 rt ㄏㄢˋ /rt/ruby HTML 4.01 与 HTML 5 之间的差异 rt 标签是 HTML 5 的新标

HTML5 <section>标签

section 标签是 HTML 5 中的新标签。section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

河南新华网络运营协会

一.前言

注:因为复制的时候太激动了,所以本文的转载无法经过夏克的同意,这里说声对不住了,希望有人能给个地址,大家上他那去看看!本文在原文的基础上面稍微扩充了RGSS2的知识,但是不多,很多地方都修改了,希望希望夏克同学原谅我,因为我实在没办法联系到你.那么,请各位看官阅览本文过后,仔细看看RPG Maker自带的帮助,虽然说是帮助,但是那个也是很好的教材哦!

二.基本概念

1.什么是RGSS/RGSS 2?

Ruby Game Scripting System(以下简称RGSS),中文意思就是:Ruby游戏脚本系统,是一个脚本性质的游戏编程系统,并不是整个游戏都用它来生成,RGSS所能做的只是一些有限的功能,而这些功能,是由厂家也就是EnterBrain所规定的,我们只能在自己力所能及的范围内来挖掘RGSS的潜力,RGSS 2则是在RGSS的基础上扩充和删减了一部分形成的,也可以称之为RGSS的换代版本,是RMVX所使用的

2.脚本(Script):

脚本这个概念应用的范围很广,Windows系统里就有VBScript,JavaScript,WScript等脚本程序,Unix系统也有很多Perl,C等脚本程序,脚本可以解释为是一种系统内用来实现一些特定功能的有着局限性的编程环境.有的脚本可以触及到系统底层,有的却只是完成一些运算或者控制流程的功能,这取决于脚本系统的权限,也可以说取决于脚本系统所提供的库函数功能.

3.RGSS/RGSS2中的脚本:

在RPG Maker XP/RPG Maker VX(以下简称RMXP/RMVX)中,按F11就可以打开[脚本编辑器],不过RM2003或更早的版本却没有这个功能,左边的窗口是脚本列表,右边的窗口是脚本内容,左下角可以修改脚本名称.

在RMXP/RMVX中,游戏开始运行后,总是从最上边的脚本开始运行,依次往下,所以,经常把变量声明、类声明、函数声明、函数定义的脚本放在上面,而MAIN脚本总是放在最后.

三.开始神奇的脚本学习旅程

1.Hello,World!

经过上面的基本知识后,相信你对RGSS/RGSS2的相关知识有了一定了解,一般的编程语言教程都是从"Hello,World!"开始的,那好,我们也从"Hello,World!"开始,不过为了体现RGSS语言与Ruby的不同,我们将其改为"Hello,World,我来学习RGSS语言了!",首先,请打开RMXP/RMVX,在新建好一个空白工程后,按下键盘上面的"F11"键,开始我们的RGSS/RGSS2脚本学习之旅!为了保证执行脚本的快速,请在脚本列表中选中最顶端的那个脚本,然后按下方向键上面的Delete(也称为DEL、删除)键,删除脚本直到Main脚本为止(这里的意思是只保留Main脚本),选择[插入]来插入一个新的脚本,给新脚本命名为Test,删除Main脚本,点[确定].这样我们就得到了一个空的脚本系统,试着运行一下游戏,可以看到游戏在短暂的启动后就自动终止了,这表明没有任何脚本可以执行,游戏只好退出.既然测试成功了,那么下面我们在Test脚本中加入一些内容.按F11打开[脚本编辑器],因为我们只有Test一个空脚本,所以在Test的内容中输入下面的代码:

p "Hello,World,我来学习RGSS语言了!"

把这行代码复制并粘贴在Test脚本中,按[确定],按F12,保存后游戏开始运行,短暂停顿后就会弹出一个对话框,内容是不是:"Hello,World!"?这样我们就做出了第一个脚本,如果是学过Ruby的你一定会发现中文会被正常的输出,而不是类似于"/数字/"的结果,但是这里要说的是,RGSS不支持puts命令,而printf命令则会忽略掉,如果您实在怀恋,可以通过其他的脚本来辅助实现.值得说一下的是,RGSS是会区分大小的,所以这里的p不能使用P(大写的P).

2.脚本的注释

在学习任何语言的过程中,注释是少不了的,因为注释不仅仅可以让新手更明白脚本语句的含义,而且还会使脚本看起来更整洁、美观,当然,能做到的当然还有很多.在RGSS中,有两种注释,它们分别是符号 # 和

=begin

=end

如果你比较细心的话应该可以看出他们的用途, 符号#是用来注释单行,而 =begin ... =end 是用来注释多行的,在这里,有个知识点需要提一下,符号#后的脚本是会被忽略的,也就是说,你把符号#插入到某一脚本的前面,那么那条脚本就会无效,很多人都将在脚本前添加#看做是一种解决脚本故障的办法(也就是DEBUG),举个例子:

p "Hello,World,我来学习RGSS语言了!" #我是很可爱的注释,执行脚本的时候你会无视我!

将这段代码插入到脚本中,#后面的语句或者注释将被无视,然而在这段代码中,无论是什么都会无效.

=begin

p "Hello,World,我来学习RGSS语言了!" #我是很可爱的注释,执行脚本的时候你会无视我!

=end

到此,基础部分完毕,如果你想要学习更深入的知识,请往下看.

四.数据类型

1.数字

数字包括整数和小数,小数在计算机术语中被称为浮点数,相信大家都明白什么是整数和小数了.整数包括正整数和负整数,0可以被视为整数,数字属于常量的一部分.

常见的数字种类有:

1= 整数

100 = 整数

-10 = 整数

0= 整数

0.11 = 浮点数

-12.3 = 浮点数

那好,让我们写一个脚本来学习如何显示一个常量的值,在Test脚本中,清除脚本内容,插入下面的代码:

p 100

运行游戏,看到弹出的对话框显示:"100",若输入我们输入:

p 100.100

作为新手的你觉得会弹出什么呢,想想,实际上弹出的是100.1,而不是100.100

2.数字的计算

我们在上节讲了数字的类型与输出给用户的方法,现在我们来体验一下数字的计算,在脚本 TEST 中插入以下代码:

p 1+1

运行游戏,看到弹出的对话框显示:2.这就是常量的加法.你可以很聪明地想象出乘法、除法、减法:

p 3+5

p 3*5

p 3/5

p 3-5

运行游戏,你会发现游戏按脚本顺序输出了加、乘、除、减,你会发现,3/5输出的是0而不是正确结果,整数和整数的运算,其结果仍旧表现为整数,如果你希望得到浮点数,那么就应该使被除数或者除数至少有一个是小数形式的表示.请看下面的代码:

p 3.0/5

p 3/5.0

运行游戏,显示的结果就都是小数了.值得一提的是还有两个很有用的算符,求余数(%)和乘方(**),输入以下代码:

p 14%4

p 2**3

它们分别输出了2与8,和预期的正确结果一样.

3.括号的用处

各种运算符之间总会存在优先顺序,加减乘除的顺序是不变的,对于其它你所不熟悉的或者弄不清除的,只要记住一点就可以了,那就是括号的优先权是最高的,善用括号能够至少确保程序的准确性而先不管是不是很难看,当然,强大的RGSS所使用的基本不是只有一个功能,或考得其他功能我们会在以后的章节一一阐述.

4. 常量与变量

常量:常量就是我们经常会用的数字、字符串了,比如我们问一张光盘多少钱,回答说5元,那么5就是常量,如果说一张光盘的价格不定,在3-5元的范围内浮动,那么这就是我们学过的未知数,对于这样的未知数我们经常会用一个变量来表示.

变量:变量就是我们用一个符号来表示一个我们想要表示的概念,比如我们可以用price这个变量来表示一张光盘的价格.变量与常量的区别就在变量是可以变动的,也就是说我们用变量来定义一个概念后,接下来就会来操作这个变量使它变化.而我们不能让一个常量变化,比如我们不能让5=4,但我们可以让price=4.

命名规则: 变量的取名有以下的限制:

1、必须以英文字母(大小写均可)、汉字、下划线开头.

2、第二个字符开始可以使用数字、英文字母、汉字、下划线.

3、不能使用保留字作变量的名字.

保留字是保留给系统用的,也就是说系统已经占用了,以下是系统的保留字:

alias def false nil return unless

and do for not self until

begin else if or super when

break elsif in redo then while

case end module rescue true yield

class ensure next retry undef

所以不要使用上面列出的单词做你的变量的名字.

变量的赋值:变量无需事先声明,可以拿来就用,例如:

a=100

p a

运行脚本,看到弹出的对话框显示:100 , 但必须先赋值才可以使用变量,否则,试试下面的代码:

p b

会弹出什么呢,如果不赋值给变量,就相当于这个变量不存在,而一旦赋值给它,就表明这个变量存在了.

变量的运算:

下面的代码你应该可以猜出是什么结果的:

战斗前的体力=234

战斗后的体力=200

p 战斗前的体力

p 战斗后的体力

继续:

p 战斗前的体力-战斗后的体力

看到了吗,这里我进行了运算,变量的运算.

就像对于常量一样,加减乘除和括号同样适用于变量的运算:

x=1

y=2

z=3

p x+(y*z)/(y+z)-y+z

但下面的运算是常量所没有的:

自运算:

x+=5

y*=2

z/=3

p x

p y

p z

+=,-=,*=,/=这四个运算符是自运算符,x+=1相当于x=x+1,其它同理.

全局变量:

局部变量和全局变量的区别在于局部变量只能被所在的脚本访问,而全局变量能被所有的脚本访问.

在变量名前加$符号就可以声明全局变量了.

5. 字符串

显示字符串:

先看看下面这几行语句在RGSS中的效果:

p"这将会显示双引号"

p'这也会显示双引号'

print"这不会显示双引号"

print'这也不会显示双引号'

把上面的四行语句复制下来,然后在我们刚刚建立好的Test脚本中粘贴,粘贴前最好把Test脚本的内容清除掉,我们只需要测试我们现在的代码.好,运行游戏,看看效果吧.

首先,看得出来,用来输出显示的方法又多了一种:print,不同的是,p可以显示很多种数据类型,对不同的数据类型,它会按人们容易理解

的格式来显示,比如说这里的字符串,它都会加上双引号来告诉人们:这次显示的是字符串,而print直接显示字符串本身.

在上面的代码中,分别输出下面的四行字符串:

"这将会显示双引号"

"这也会显示双引号"

这不会显示双引号

这也不会显示双引号

6.字符串常量:

字符串常量的表示有两种方法.

1.双引号表示的字符串:

这种表示方法使得字符串可以支持一些特殊格式,这将是我们用的最多的表示方法,下面会有更详细的介绍.

2.单引号表示的字符串:

直白的说,单引号所包括的字符串会被原样显示出来,也就是说,即使单引号中包含特殊格式,也不会显示这种特殊格式.

7.字符串变量:

和数字变量一样,看看例子吧:

1、赋值:

a="欢迎使用RGSS来编程"

print a

结果输出:欢迎使用RGSS来编程

2、连接:

a="中华人民"

b="共和国"

print a+b

结果输出:中华人民共和国

3、乘法:

a="连续两遍"

print a*2

结果输出:连续两遍连续两遍

4、换行符:

\n表示换行,但是只能用在双引号字符串内,若是在单引号字符串内便不起作用了,看看下面两个例子:

a='中华人民\n共和国'

b="中华人民\n共和国"

print a

print b

结果输出:

中华人民\n共和国

中华人民

共和国

5、常量中包含变量:

a="人民"

print "中华#{a}共和国"

结果输出:中华人民共和国

记住:这个特殊格式和\n一样只能在双引号形式的字符串中使用,这里提一下,这里的#符号不是注释的意思.

再看一个:

a="C:\\Program Files\\RPG Maker XP\\System\\Data\\Skills.rxdata"

print "系统安装后的初始脚本文件是:#{a}"

你可以试试看下面的例子:

a="人民"

print '中华#{a}共和国'

结果输出:中华#{a}共和国

五. 控制语句

1. 条件分歧语句

1.比较运算符:

有6个比较运算符,分别是

== 相等

!= 不相等

<小

>大

<= 小或相等

>= 大或相等

比较运算符,顾名思义,就是用来比较的,比较的对象可以是任意的,比较的结果是True或者False.

举例:

p(" 早安 "==" 早安 ") # =>true

p(" 早安 "==" 晚安 ") # =>false

p (3 + 1 == 3 + 5) # =>false

p (3 + 1 == 2 + 2) # =>true

观察一下结果就会明白.

逻辑运算符:

逻辑运算符也有6个,分别是:

与:and , &&

或:or , ||

非:not , !

举例:

p (100 >77 and 1 + 1 == 2) # =>true

p (100 >77 &&1 + 1 == 2) # =>true

if..elseif..else..end 语句:

结构:

if 条件1

语句1

elseif 条件2

语句2

.

.

else

语句

end

举例:

x=123

y=23

z=67

a=(x*y*z+x/y+z/y)*(y-z)+x*z

if a>0

print "大于0"

elseif a=0

print "等于0"

else

print "小于0"

end

最常用的还是if...end语句:

金钱数=10

if 金钱数<100

print "对不起,你的钱不够了.."

end

unless..end 语句:

这是if..end语句的变种,正好跟if..end相反,就是除非的意思:

unless 条件

语句

end

举例:

金钱数=10

unless 金钱数>=100

print "对不起,你的钱不够了.."

end

除非你的金钱数大于等于100,否则:“对不起,你的钱不够了..”

case..when..end 语句:

如果对于把条件限制在某个范围或者某些特定的值的情况,使用case..end语句更方便:

case 变量

when 特定的值或者范围

when 特定的值或者范围

.

.

end

举例:

主角状态="昏睡"

case 主角状态

when "昏迷"

print "你昏迷了.."

when "中毒"

print "你中毒了.."

when "昏睡"

print "你昏睡了.."

end

2.条件赋值语句:

条件赋值语句给我们提供了一个非常方便的if..else..end的简化版.

(条件1 ? 语句1 : 语句2)

相当于:

if 条件1

语句1

else

语句2

end

举例:

战斗状态=1

print (战斗状态>0 ? "胜利" : "失败")

2.循环

1.while..end 循环:

举例:

a = 0

i = 1

while i <= 5

a += i

i += 1

end

p a

这很简单,很容易明白的.

2.for..in..end 循环:

类似于c语言中的for,但不同,in后面给出变量的变化范围.

3变化范围:

类似于1..5表示一个变化范围,其所含的值为大于等于1小于等于5.

举例:

a = 0

for i in 1..5

a += i

end

p a

这也很简单,很容易明白的.

4.loop do..end 循环:

举例:

i = 0

loop do

i += 1

p i

end

上面的代码会一直循环下去,也就是说是个死循环.只有使用break才可以从中跳出.

5.break 语句:

上面的例子如果改成下面的样子,就不再是死循环了:

i = 0

loop do

i += 1

if i == 5

break

end

p i

end

break也可以从while、for循环中跳出.

6.next 语句:

跳过本次循环,进入下次循环.

举例:

for i in 1..5

if i == 3

next

end

p i

end

结果显示四次,就只有1,2,3,4,5被显示出来了.

3. 函数

1. 函数的概念:

我们把事先编好的,能够解决或者说处理某种情况的功能的集合叫做函数.不必在意概念,用得多了自然就明白.其实我们一直在使用的

p,print就是函数的一种,下面介绍一个很有用的函数,随机函数rand():

rand(x)返回0-(xx-1)范围内的随机数,例如:

p rand(100)

返回的数字在0-99范围内.

我们也可以设计自己的函数以便增加我们需要的功能,更多的时候,我们大多数时间是在跟函数打交道.

2. 函数的声明:

函数的名字基本上和变量的名字有着相同的限制,例外的情况是,函数可以在名字的最后添加?或!符号,这种符号有着特殊的用处,以后会讲到.

函数的声明要用def..end语句,形如:

def 函数名字

语句

end

我们用rand函数来设计一个自己的函数bet():

def bet

if rand(6)>3

return "大"

else

return "小"

end

end

print bet

这里的return表示函数返回的值,如果省略return也可以,但最好带上,能够使程序可读性更好.

我们给bet函数增加参数:

def bet(x)

if rand(x)>3

return "大"

else

return "小"

end

end

print bet(7)

还可以为参数设置默认值:

def bet(x=7)

if rand(x)>3

return "大"

else

return "小"

end

end

print bet #这和print bet(7)一样

函数可以有很多参数:

def bet(x,y,z)

if rand(x)>3 and rand(y)>3 and rand(z)>3

return "大"

else

return "小"

end

end

print bet(7,6,10)

4. 重定义函数:

如果定义了两次相同的函数,则只有后面定义的函数有效,而先前的定义就无效了.

def hello

return" 您好 "

end

def hello

return" 晚安 "

end

p hello #=>" 晚安 "

六. 数组

如果知道将多次对一个变量,例如 $salut赋值,您会怎样做呢?这在很多情况下都会发生.因此,您可以将所有的变量值放进一个数组里,而不是手动

地给变量重新赋值.

数组允许对每个变量值进行分别的处理.请看如下示例:

$salut = ['Hello World','Good Bye World','What do you mean Good Bye World?'] print $salut

运行上述代码得到的输出如下所示:

Hello WorldGood Bye WorldWhat do you mean Good Bye World?

显然,这不是我们想要的输出.没有间隔也没有换行.因此,我们可以标识希望显示数组的哪一部分,并使用先前解释的串联技术来更方便地提供易读的输出.

$salut = ['Hello World','Good Bye World','What do you mean Good Bye World?']

print $salut[0] + "\n"

print $salut[1] + "\n"

print $salut[2] + "\n"

将会导致如下输出:

Hello World

Good Bye

World What do you mean Good Bye World?

仔细分析这些代码.如果回顾一下我们建立的数组:

$salut = ['Hello World','Good Bye World','What do you mean Good Bye World?']

我们告诉 Ruby 定义一个名为 salut 的变量,其值为:

$salut = 0 1 2

Hello World Good Bye World What do you mean Good Bye World?

每个值通过一个数字来被识别.数字通过数组中的数字位置来定义.位置总是从 0 开始,并从 0 开始递增.所以要打印数组中的第 2 个值,

您要输入:

print $salut[1]

最容易忘记的是字段从 0 而不是从 1 开始.

七. load,require语句

在许多知名网站上,很多的人都认为RGSS不支持load,requir,语句,如果需要使用的话好去破解Scripts.rxdata文件(XP)或者Scripts.rvdata(VX),其实你不用去研究破解Scripts.rxdata了,因为RGSS完全支持load,require语句,只不过与Ruby语言稍有区别的是这两个语句只支持绝对地址,也就是说不支持类似于:require "win32/***" 的格式

在我们的试验脚本中输入:

load "d:/sequh.rb"

就可以加载D盘的sequh.rb文件了,同理:

require "D:/sequh.rb"

这里我输入的是绝对路径,绝对路径的表示方法是:

把DOS格式的路径名中的“\”统统改为“/”即可

而相对路径的获得,需要一点儿办法:

因为在我的游戏目录下有game.exe文件,所以我们可以通过它来获得游戏目录,然后得到绝对目录,把我们的相对路径加到绝对目录后面,例

子:

load "#{File.dirname(File.expand_path("Game.exe"))}/scripts/sequh.rb"

其中的File.dirname(File.expand_path("Game.exe"))便是游戏目录的绝对路径.

八. 对象和方法

这个代码段中用到的一些技术和方法您可能是第一次见到.RGSS是一种面向对象的编程(Object Oriented Programming,OOP)语言.使用 OOP 时,通常情况下程序员将调用诸如对象和方法之类的项目.对象就象一个容器.它包含自己特定的变量和函数. 方法是一种被调用的东西,就像函数对对象进行专门处理一样.如果看一下先前的示例,我们就可以显示工作中的对象和方法.

while enterWorld = STDIN.gets enterWorld.chop!

这里我们有两个对象和两个方法的示例.第一个对象是 enterWorld,第二个对象是 STDIN.enterWorld 对象是用户定义的对象,而 STDIN 对象(Standard Input 的缩写)是RGSS内建的.

这个示例中还有两种方法.第一种是 gets,第二种是 chop!.前面提到过,方法对对象进行专门处理.明确地说,方法将在对象中执行一个操作.用 gets 方法,我们告诉 RGSS 去获取 STDIN.当 RGSS 看到与 STDIN 关联的 gets,它就会等待键盘输入和一个回车.简而言之,STDIN.gets 就是等待用户输入一些内容然后敲 Enter 键.

第二种方法 chop! 用来对用户定义的对象 enterWorld 进行专门处理.chop! 方法告诉 enterWorld 将 enterWorld 对象关联的数据的换行符

和回车符截去.如果不使用 chop!(或者 chomp!),那么包含在先前代码上下文中的下面语句永远都不会为真.

if enterWorld == $salut[0]

因为没有使用 chop!,所以得出结果将为假,$salut[0] 实际上就等于 $salut[0]\n.新行是由 STDIN 对象从 gets 方法接收的输入产生的.使用回车将会在值末尾添加一个换行符.

autoit和按键精灵 按键娃娃这些属于按键工具 可以模拟控制

ruby,lua,php,python vb6.0,C#,java erlang等这些可以模拟控制

C/C++ 汇编 可以控制硬件键盘鼠标

1、安装sass

1.安装ruby

因为sass是用ruby语言写的,所以需要安装ruby环境

打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径

Add Ruby executables to your PATH

安装完成之后继续下一步操作

2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具,类似于nodejs 的npm

gem install sass1

这个时候如果不翻墙的话是会出问题的,因为:

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】

$ gem sources -l

*** CURRENT SOURCES ***

https://ruby.taobao.org

# 请确保只有 ruby.taobao.org

$ gem install sass1234567

安装好之后执行sass -v就可以看到sass的版本了

实在实在不行,就安装离线文件吧,但是失败率也很高

gem install ./…/sass-3.4.22.gem

2、编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译

例如:

sass scss/a.scss:css/a.css1

sass 后面写要编译的sass文件的路径,‘:’后面写的是

要输出的目录及名字

需要注意的是:必须有这个文件夹才能在里面生成css

这样的话写一句执行一次编译一次有些太麻烦

可以开启一个watch来监听文件变化来进行编译

sass --watch scss:css1

–watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹

2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的

考拉的方式就不多做介绍了,大家i自己去看一下

gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less

这里是网址,点击查看

3、sass四种风格

sass编译的格式

sass编译输出的css有四种格式

nested 嵌套

compact 紧凑

expanded 扩展

compressed 压缩

这些样式会影响输出的css的格式

简单介绍一下:

css默认输出的嵌套

ul{

      font-size:15px

      li{

             list-style:none

      }

}123456

—》

ul {

 font-size: 15px}

 ul li {

   list-style: none}1234

紧凑compact

在编译的时候需要执行

sass --watch scss:css --style compact1

这个时候输出的代码就是

ul { font-size: 15px}

ul li { list-style: nonepadding: 5px}12

compressed 压缩

在编译的时候需要执行

sass --watch scss:css --style compressed1

—>

ul{font-size:15px}ul li{list-style:noneanimation:all 0.4s}1

expanded 扩展

更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style expanded1

—>

ul {

 font-size: 15px

}

ul li {

 list-style: none

 animation: all 0.3s

}1234567

compressed 压缩

更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style compressed1

—>

.a{width:100pxheight:100pxborder:1px solid red}.a .b{background:red}1

4、sass与scss

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式

采用这种格式文件的后缀名是.sass

在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法

两个版本的区别

后缀名不同 .sass和.scss

语法不同,请看下面

新版:

/*新版本

多行文本注释*/

//新版本

//单行文本注释

@import "base"

@mixin alert{

      color:red

      background:blue

}

.alert-warning{

      @include alert

}

ul{

      font-size:15px

      li{

             list-style:none

      }

}123456789101112131415161718

老版本:

/*新版本

多行文本注释

//新版本

 单行文本注释

@import "base"

=alert

      color:red

      background:blue

.alert-warning

      +alert

ul

      font-size:15px

      li

             list-style:none1234567891011121314

5、变量、嵌套、混合、继承拓展

变量的意义

在sass里我们可以定义多个变量来存放颜色、边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了

这样的优点就是便于维护,更改方便

变量的使用

可以通过$来定义变量,在变量名字中可以使用-和_来作为连接,并且-和_是可以互通的,就是用起来一模一样。

变量的值可以是字符串、数字、颜色等等,在变量里还可以使用其他变量,使用的时候直接写变量名就好了

例如

$primary-color:#ff6600

$primary-border:1px solid $primary_color

div.box{

      background:$primary-color

}

h1.page-header{

      border:$primary-border

}12345678

—》

div.box {

 background: #ff6600

}

h1.page-header {

 border: 1px solid #ff6600

}123456

嵌套的使用

合理的使用嵌套语法,可以使我们编写代码更为快捷

假设我们想写这样的css:

.nav {

 height: 100px

}

.nav ul {

 margin: 0

}

.nav ul li {

 float: left

 list-style: none

 padding: 5px

}1234567891011

在sass里我们可以这样写

.nav{

      height:100px

      ul{

             margin:0

             li {

                    float:left

                    list-style:none

                    padding:5px

             }

      }

}1234567891011

大家会发现,写出来的代码父和子之间都有空格隔开,如果我们需要给a加上伪类的话我们这样写

.nav{

   height:100px

   a{

       color:#fff

       :hover{

           color:#ff6600

       }

   }

}123456789

在里面就会出现这样的情况

.nav a :hover {

 color: #ff6600

}123

我们发现在a和:hover之间有了空格,这样是不好的,所以我们需要在写的时候在:hover之前把a加上,这样就需要用到在之类里引用父类选择器的方式,我们可以用&符号代替父类

例如:

.nav{

   height:100px

   a{

       color:#fff

       &:hover{

           color:#ff6600

       }

   }

}123456789

这样就好了,下面来个完整的代码:

.nav{

   height:100px

   ul{

      margin:0

      li{

             float:left

             list-style:none

             padding:5px

      }

      a{

             display:block

             color:#000

             &:hover{

                    color:#f60

                    background:red

             }

      }

   }

   &&-text{

      font-size:15px

   }

}12345678910111213141516171819202122

-----》

.nav {

 height: 100px

}

.nav ul {

 margin: 0

}

.nav ul li {

 float: left

 list-style: none

 padding: 5px

}

.nav ul a {

 display: block

 color: #000

}

.nav ul a:hover {

 color: #f60

 background: red

}

.nav .nav-text {

 font-size: 15px

}12345678910111213141516171819202122

嵌套属性

我们可以把一些个复合属性的子属性来嵌套编写,加快编写速度,例如

body{

      font:{

             family:Helvitica

             size:15px

             weight:bold

      }

}

.nav{

      border:1px solid red{

             left:none

             right:none

      }

}

.page-next{

      transition:{

             property:all

             delay:2s

      }

}12345678910111213141516171819

-----》

body {

 font-family: Helvitica

 font-size: 15px

 font-weight: bold

}

.nav {

 border: 1px solid red

 border-left: none

 border-right: none

}

.page-next {

 transition-property: all

 transition-delay: 2s

}1234567891011121314

mixin 混合

你可以把它想象成一个有名字的定义好的样式

每一个mixin都有自己的名字,类似于js里的函数定义方法如下

@mixin 名字(参数1,参数2...){

   ...

}123

使用方法是在其他选择器css样式里通过@include引入,其实就相当于将mixin里的代码写入到这个选择器的css里,如下:

@mixin alert {

      color:#f60

      background-color:#f60

      a{

             color:pink

      }

      &-a{

             color:red

      }

}

.alert-warning{

      @include alert

}12345678910111213

-----》

.alert-warning {

 color: #f60

 background-color: #f60

}

.alert-warning a {

 color: pink

}

.alert-warning-a {

 color: red

}12345678910

刚才是没有参数的mixin,mixin也可以拥有参数,需要注意的是:

形参的名字前要加$

传参的时候只写值的话要按顺序传

传参的时候不想按顺序的话需要加上形参名字

例如:

@mixin alert($color,$background) {

      color:$color

      background-color:$background

      a{

             color:darken($color,10%)//把颜色加深百分之十

      }

}

.alert-warning{

      @include alert(red,blue)

}

.alert-info{

      @include alert($background:red,$color:blue)

}12345678910111213

------》

.alert-warning {

 color: red

 background-color: blue

}

.alert-warning a {

 color: #cc0000

}

.alert-info {

 color: blue

 background-color: red

}

.alert-info a {

 color: #0000cc

}1234567891011121314

继承拓展 extend

如果我们有一个选择器想要拥有另一个选择所有的东西,不管是样式还是子元素等等,可以使用@extend来继承

大家需要注意的是,++b继承a的时候,a的子元素设置了样式,也会给b的子元素设置样式++,达到完全一样的情况,例如:

.alert {

      padding:5px

}

.alert a {

      font:{

             weight:bold

             size:15px

      }

}

.alert-info {

      @extend .alert

      backgournd:skyblue

}12345678910111213

----》

.alert, .alert-info {

 padding: 5px

}

.alert a, .alert-info a {

 font-weight: bold

 font-size: 15px

}

.alert-info {

 backgournd: skyblue

}12345678910

partials

在以前咱们编写css的时候,一个css引入另一个css需要使用@import,其实这是不好的,会多发一次http请求,影响咱们站点的响应速度。

在sass里,咱们可以把小的sass文件分出去,叫做partials,在某个sass里通过@import ‘partials名’去引入,注意路径哟,这样的话就可以把partials里的代码引到咱们大的sass里一起编译

需要注意的是 partials的文件名前要加_

_base.sass :

body{

      margin:0

      padding:0

}1234

style.sass :

@import "base"

.alert {

      padding:5px

}

.alert a {

      font:{

             weight:bold

             size:15px

      }

}

.alert-info {

      @extend .alert

      backgournd:skyblue

}1234567891011121314

----------->

body {

 margin: 0

 padding: 0

}

.alert, .alert-info {

 padding: 5px

}

.alert a, .alert-info a {

 font-weight: bold

 font-size: 15px

}

.alert-info {

 backgournd: skyblue

}1234567891011121314

这样的话我们就可以把模块化的思想引入到sass里了

comment注释

sass里的注释有三种

多行注释

单行注释

强制注释

多行注释:压缩后不会出现在css里 /* /

单行注释: 不会出现在css里 //

强制注释:压缩后也会出现在css里 /! */

6、数据类型与函数

数据类型

在sass里有数字、字符串、列表、颜色等类型

在cmd里 输入

sass -i1

就会进入到交互模式,输入的计算可以马上得到结果

type-of()可以用来得到数据类型,如:

type-of(5) ->number1

注意数字类型的可以包含单位,如:

type-of(5px) ->number1

字符串类型:

type-of(hello) ->string

type-of('hello') ->string12

list类型:

type-of(1px solid red) ->list

type-of(5px 10px) ->list12

颜色:

type-of(red)  ->color

type-of(rgb(255,0,0)  ->color

type-of(#333)  ->color123

number 计算

2+9 -》10

2*8 -》16

(8/2) ->4 //除法要写括号123

也可以包含单位

5px + 5px ->10px

5px -2 ->3px

5px *2 ->10px

5px * 2px ->10px*px //这样就不对了哟

(10px/2px) ->5//除法单位取消

3+2*5px->13px123456

好吧,都是一些小学的数学题,很简单对吧

处理数字的函数

绝对值

abs(10) ->10

abs(10px) ->10px

abs(-10px) ->10px123

四舍五入相关

round(3.4)->3  //四舍五入

round(3.6)->4

ceil(3.2)->4  //向上取整

ceil(3.6)->4

floor(3.2)->3  //向下取整

floor(3.9)->3

percentage(600px/1000px) ->65%  //百分之

min(1,2,3) ->1   //最小值

max(2,3,4,5) ->5  //最大值123456789

字符串相关

//带引号和不带引号的字符串想加为带引号的字符串

"a" + b ->"ab"

a + "b" ->"ab"

//字符串+数字

"ab" + 1 ->"ab1"

//字符串 - 和 / 字符串

"a" - b ->"a-b"

"a" / b ->"a/b"

//注意字符串不能相乘123456789

字符串函数

大写:

$word:"hello"

to-upper-case($word) ->"HELLO"12

小写:

$word:"Hello"

to-lower-case($word) ->"hello"12

得到length:

$word:"Hello"

str-length($word) ->512

得到字符串在字符串里的位置:

$word:"Hello"

str-index($word,"el") ->212

字符串中插入字符串:

$word:"Hello"

str-insert($word,"aa",2) ->"Haaello"12

颜色相关

在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL

分别表示的是 色相 0-360(deg) 饱和度 0-100% 明度 0-100%

例如:

body {

      background-color:hsl(0,100%,50%)

}

-》

body {

 background-color: red

}1234567

body {

      background-color:hsl(60,100%,50%)

}

-》

body {

 background-color: yellow

}1234567

也可以有透明哟

body {

      background-color:hsl(60,100%,50%,0.5)

}

-》

body {

 background-color: rgba(255,255,0,0.5)

}1234567

颜色函数

lighten函数和darken函数可以把颜色加深或减淡,即调整明度,第一个参数为颜色,第二个参数为百分比,例如:

$color:#ff0000

$light-color:lighten($color,30%)

$dark-color:darken($color,30%)

.a{

      color:$color

      background:$light-color

      border-color:$dark-color

}12345678

—》

.a {

 color: #ff0000

 background: #ff9999

 border-color: #660000

}12345

saturate和desaturate函数可以调整颜色的纯度

$color:hsl(0,50%,50%)

$saturate-color:saturate($color,50%)

$desaturate-color:desaturate($color,30%)

.a{

      color:$color

      background:$saturate-color

      border-color:$desaturate-color

}12345678

–》

.a {

 color: #bf4040

 background: red

 border-color: #996666

}12345

用transparentize来让颜色更透明

用opatify来让颜色更不透明

$color:rgba(255,0,0,0.5)

$opacify-color:opacify($color,0.3)

$transparentize-color:transparentize($color,0.3)

.a{

      color:$color

      background:$opacify-color

      border-color:$transparentize-color

}12345678

—》

.a {

 color: rgba(255, 0, 0, 0.5)

 background: rgba(255, 0, 0, 0.8)

 border-color: rgba(255, 0, 0, 0.2)

}12345

列表类型

在sass里,用空格或者逗号隔开的值就是列表类型

如:

1px solid red

Courier,microsoft yahei12

列表函数

sass里的列表类似与数组

获取列表的长度

length(5px 10x)  2

获取列表中的第几个元素

nth(5px 10px,2)  10px

获取一个元素在一个列表里的下标

index(1px solid red,solid) 2

给列表里加入新的元素

append(5px 10px,5px)  5px 10px 5px

连接两个列表

join(5px 10px,5px 0) 5px 10px 5px 012345678910

map类型

sass里的map类型类似与js里的object

$map:(key1:value1,key2:value2,key3:value3)1

map 函数

//定义一个map

$color:(light:#ffffff,dark:#000000)

//获取map 的length

length($color)    ->2

//得到map里key对应的值

map-get($color,dark)   ->#000000

获取map里的所有键的列表

map-keys($color)   ->("light","dark") //列表类型

获取map里的所有值的列表

map-values($color)  ->("#ffffff","#000000") //列表类型

判断map里是否含有这个key

map-has-key($color,light)   ->true

给map里添加键值对

map-merge($color,(light-gray:#cccccc))

->(light:#ffffff,dark:#000000,light-gray:#cccccc)

移除map里的某个键值对

map-remove($colors,light)  ->(dark:#000000,light-gray:#cccccc)1234567891011121314151617

boolean类型

在sass里通过><比较得到的值就是布尔值 true 和false

5px>3px ->true

5px<2px ->false12

在sass里也可以有或 且 非

且:

(5px >3px) and (5px <2px) ->false

(5px >3px) and (5px >2px) ->true12

或:

(5px >3px) or (5px <2px) ->true

(5px <3px) and (5px >2px) ->false12

非:

not(5px>3px) ->false1

interpolation

在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值,例如

$name:"info"

$attr:"border"

.alert-#{$name}{

      #{$attr}-color:red

}12345

---->

.alert-info {

 border-color: red

}123

7、分支结构、循环结构、函数

分支结构

在sass里,可以使用@if让我们根据一些条件来应用特定的样式

结构:

@if 条件 {

 

}123

如果条件为真的话,括号里的代码就会释放出来

例如:

$use-refixes:true

.rounded{

  @if $use-refixes {

      -webkit-border-radius:5px

      -moz-border-radius:5px

      -ms-border-radius:5px

      -o-border-radius:5px

  }

  border-radius:5px

}12345678910

—>

.rounded {

 -webkit-border-radius: 5px

 -moz-border-radius: 5px

 -ms-border-radius: 5px

 -o-border-radius: 5px

 border-radius: 5px

}1234567

如果是另外一种情况

$use-refixes:false1

—》

.rounded {

 border-radius: 5px

}123

if else在sass里的写法是:

body{

      @if $theme == dark {

             background:black

      } @else if $theme == light {

             background:white

      } @else {

             background:gray

      }

}123456789

for循环

在sass里的for循环是这样的

@for $var form <开始值>through <结束值>{

   ...

}123

还有一种是

@for $var form <开始值>to <结束值>{

   ...

}123

注意,开始值和结束值的关系可以是升序也可以是倒序,但是每次只能+1或者-1

这两种有什么区别呢?

区别就是 from 1 to 4 的话是执行三次,i的变化是 1 2 3

from 1 through 4 的话是执行四次,i的变化是 1 2 3 4

如:

from to

$columns:4

@for $i from 1 to $columns{

      .col-#{$i}{

             width:100% / $columns * $i

      }

}123456

—》

.col-1 {

 width: 25%

}

.col-2 {

 width: 50%

}

.col-3 {

 width: 75%

}123456789

from through

$columns:4

@for $i from 1 through $columns{

      .col-#{$i}{

             width:100% / $columns * $i

      }

}123456

—>

.col-1 {

 width: 25%

}

.col-2 {

 width: 50%

}

.col-3 {

 width: 75%

}

.col-4 {

 width: 100%

}123456789101112

each 遍历list类型

在sass里可以利用each方法来遍历咱们的list类型的数据

list类型在js里类似于数组,那么each类似于for in遍历,结构如下:

@each $item in $list{

   ...

}123

例如:

$colors:success error warning

$map:(success:green,warning:yellow,error:red)

@each $color in $colors{

      .bg-#{$color}{

             background:map-get($map,$color)

      }

}1234567

—>

.bg-success {

 background: green

}

.bg-error {

 background: red

}

.bg-warning {

 background: yellow

}123456789

@while 循环

在sass里,拥有@while循环,比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行,每次变化都是1,while设置循环结构的话更为灵活;

结构:

@while 条件{

 

}123

eq:

$i:6

@while $i>0{

      .item-#{$i}{

             width:$i*5px

      }

      $i:$i - 2

}1234567

注意:$i - 2 需要用空格隔开哟

---------》

.item-6 {

 width: 30px

}

.item-4 {

 width: 20px

}

.item-2 {

 width: 10px

}123456789

自定义函数

在sass里也可以定义函数,并且也可以有返回值

结构:

@function 名称 (参数1,参数2){

   @return ...

}123

例如,我们做一个返回map里key对应的值的函数:

$colors:(light:#ffffff,dark:#000000,gray:#555555)

@function color($key){

      @return map-get($colors,$key)

}

body{

      background:color(light)

      color:color(dark)

      border-color:color(gray)

}123456789

—》

body {

 background: #ffffff

 color: #000000

 border-color: #555555

}