现代 CSS

《献给你,我深爱的ECMAScript》之Object篇

本文主要想说说ECMAScript中的Object相关的东西,主要内容会定位在5和6。

题外话:

其实我自己博客一直维护着一个分类叫《js-object》,里面收录了一些框架关于Object扩展的业务api和ECMAScript已有以及新增相关. 本文中部分内容也来自这个分类,有兴趣的可以看看。

我们先看一段代码:

《献给你,我深爱的ECMAScript》开篇

本系列之个人初衷:

从有这个想法到真正一点一点开始写,再到这个beta版本上线,其实有很多心酸。 基本都是挤出的大部分的私人时间(有晚上的7-10点,有周六日和几个北京暴热的夏夜通宵等等),能够坚持下来,我自己很开心也很欣慰。

也声明: 本文中代码均个人手敲,发布前也大致校正了一版,但是难免会有问题,希望大家可以在评论区留言,会第一时间修复。

也承诺: 考虑到ECMAScript本身的特殊性,本文中列举的部分ECMAScript6标准还没有定稿,会一直保持更新状况。

也欢迎: 欢迎对此感兴趣的同学加入进来,对系列内容进行补充。

其实和我2012-09-20发布的 《个人呕心沥血之作-----js大脑图beta01版正式发布》,当然有心的人能看出那个大脑图不是市面上的一些简单地罗列原生属性和方法的图,

SASS基础——SASS Triangle Mixin

SASS基础——十个常见的Mixins》一文中介绍了SASS中常见的十个,当然这些其实对应的就是CSS中常用到的公共样式,例如:设置行内块,水平居中,浮动,以及重置浮动,清除浮动以及图片替换文本和隐藏元素等等。事实上,SASS的不仅仅只做这些简单的工作,只要你原意去想,你会发现,你可以定制很多你熟悉的功能,甚至可以将某些在线样式生成器,定义成一个,实现所需效果。

由在线生成三角工具出发做为思考,结合不同的Sass实现的。最终在BourbonsassCoreMigue Lmota三个基础实现一个全新的,在这个集合了众家之处。仅从代码层看,变得复杂化,但在实际使用上和生成三角的代码都无太多差异化。使用这个可以实现和等效果。

 

SASS基础——十个常见的Mixins

W3cplus最近的更新都可以看出我的学习新动向。是的,自从开始学习SASS之后,我喜欢上了SASS。因为他能让我的工作效率更快,同时让我更加节约出时间去做一些我自己喜欢的事情。

现在开始我开始使用SASS私下用在我喜欢的项目中,让我更加的对SASS喜欢与执着。在使用过程中,SASS中的Mixins让我觉得他的功能强大,使用方便——SASS的Mixins可以一次性定义功能模块,让你在任何地方调用,并且可以无限制的重用。

Compass是一个SASS的库,里面包括了很多有用的功能模块,比如说和等。但很多时候,这些功能模块还无法满足我们所有项目的需求,但是大家可以根据自己的需求定义一些功能模块。接下来主要和大家一起探讨一些在实际项目中经常使用的。

理解SASS的嵌套,@extend,%Placeholders和Mixins

在《SASS基础教程——SASS基本语法与特性》文中主要介绍了SASS的基本语法和特性。简单的知道SASS具有四个基本特性:变量Variables嵌套Nesting混合Mixins继承Selector Inheritance。其实这四种特性中的嵌套、混合和继承是有一种千丝万缕的关系,甚至会让初学者理不清,这也从侧面也说明了这三者在SASS的重要性。那么今天这篇教程,我们将主要介绍和探讨嵌套混合继承三者之间的关系,以及各自的优缺点。

 

SASS基础教程——SASS基本语法与特性

前一段时间,一直在聊SASS的环境、安装、调试以及转译等相关问题。但一直未真正的切入SASS是如何使用的。我在想,更多的同学其关注点还是如何使用SASS?如何在项目中运用SASS?那么从这篇文章开始,我们一起来走进SASS。

当你想真正走入SASS的时候,个人建议您能按照前面几篇文章,在你的电脑中构建好SASS的环境,包括如何安装环境、安装SASS、调试SASS以及编译SASS。或许正因为前期有这么多事情要做,很多同学不敢轻意的踏入,其实没有大家想得那么复杂,不管是在Window下还是在Mac OS X下,这些都是非常简单的。

Hold住CSS布局新属性

新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志。按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作。然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了。

主流的浏览器,在W3C的推动下,已经开始实现多种新型的布局方式,而且我们现在已经可以开始使用了。举个例子,W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

SASS调试

大家都知道几大主流浏览器对CSS的调试都非常方便,特别是通过Firebug这样的浏览器插件,更是让大家爱得没法说了。那么我们玩SASS能不能像玩CSS一样,通过浏览器的开发者工具,直接调试SASS呢?

带着这样的问题,我开始在互联网上寻找这样的答案。值得庆幸的是在net tuts+上看到Umar Hansa的一篇教程——《Developing With Sass and Chrome DevTools》。

SASS编译

SASS的出现让CSS变得更加有意思。至于SASS是什么?就不在做更多的阐述,因为她并不是一个新鲜的产物,现在在互联网上可谓是铺天盖地。如果你实在想知道SASS是什么?那你只要简单得知道他是CSS预处理器语言的一种。

SASS在CSS的基础上做了一些扩展,使用SASS你可以使用一些简单的编程思想进来编写CSS。比如,SASS中可以定义变量、混合、嵌套以及函数等功能。只不过SASS不像CSS,可以直接运用到项目中,如果你需要将样式运用到项目中,有一个步骤是必须经过的——SASS转译成CSS。

Alexwolfe的Button库使用

前几天在互联网上看到alexwolfe制作的Button库,觉得很有意思,特意花了些时间学习了一下这个库的源码与使用。今天花了点时间将期整理与大家分享。

Button库并不是简单的一个CSS制作的Button库,在这里alexwolfe大师采用了SASSCompass进行开发和维护的。或许有些同学看到这两个东东会觉得很蛋疼,不知道怎么使用,其实没有那么恐怖的,只要你略懂CSS,就完全可以使用这个按钮库,大不了直接git下来他的CSS到你的项目中,这样也能使用,只不过你要按你的设计风格来调整就略会麻烦些。

页面

返回顶部