每个人都有故事,我在想有没有一个app能记录下我们每个人的故事和成长?
毕竟
一个人,不论贫穷还是富有,辉煌还是落寞,都有属于自己的精彩故事,让我来组织起来,让大家分享彼此的故事。
先不透露太多,上张截图,查看大图:
每个人都有故事,我在想有没有一个app能记录下我们每个人的故事和成长?
毕竟
一个人,不论贫穷还是富有,辉煌还是落寞,都有属于自己的精彩故事,让我来组织起来,让大家分享彼此的故事。
先不透露太多,上张截图,查看大图:
如果你在启动MongoDB的时候,出现以下错误:
Wed Apr 27 10:02:41 [initandlisten] shutdown: going to close listening sockets…
Wed Apr 27 10:02:41 [initandlisten] shutdown: going to flush diaglog…
Wed Apr 27 10:02:41 [initandlisten] shutdown: going to close sockets…
Wed Apr 27 10:02:41 [initandlisten] shutdown: waiting for fs preallocator…
Wed Apr 27 10:02:41 [initandlisten] shutdown: closing all files…
Wed Apr 27 10:02:41 closeAllFiles() finished
Wed Apr 27 10:02:41 [initandlisten] shutdown: removing fs lock…
Wed Apr 27 10:02:41 [initandlisten] couldn’t remove fs lock errno:9 Bad file descriptor
Wed Apr 27 10:02:41 dbexit: really exiting now
理论来说,是因为缺乏写权限,无法向/data/db/文件夹写入数据。
修复方法:
sudo chown id -u
/data/db
sudo mongo
如果还有问题:
sudo mongo –repaire
现在让我们来用刚学会的Responsive技巧来制作一个blog前端。
一切从导航开始,例子的Demo大概是这样的:点击查看例子 请尝试拖拽窗口大小,查看响应式效果。
index.html:
注意:index.css 的宽度要用百分比来计算,这样在页面大小变化的时候,整个框架也会按比例放缩。
.container{ width:90%; height: auto; margin:0 auto; margin-top:20px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); -moz-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); } div#logo{ float: left; padding-top: 7px; width:25%; } div.navigation{ height: 80px; } div#nav{ width: 75%; float:right; } #nav ul{ margin-top:25px; list-style: none; } #nav ul li{ float: left; width:20%; text-align: center; font-size:1.5rem; }
要实现响应式的布局,就要监测当屏幕大小变化时,重新调整一些元素的位置,大小,样式。
而在这个例子中,我们需要:
@media screen and (max-width: 480px){ div#logo{ width: 100%; text-align: center; margin-left: 0; padding-left: 0; } div#nav{ width: 100%; } div#nav ul{ float:none; margin-left: 0; padding-left: 0; width: 100%; } div#nav ul li{ float: none; width: 100%; margin-right: 0; margin-left: 0; padding-top:10px; padding-bottom: 10px; background-color: #fff; } }
首先不得不说,ADT22就是个大坑,一旦更新,过去稍不符合规定的代码,统统会现出原形来。(其实就是ADT22变得严格了)
FATAL EXCEPTION: main java.lang.IllegalStateException: The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDataSetChanged!
出这个错,是因为你的PagerAdapter中的数据变了,但是没有调用adapter.notifyDataSetChanged方法。
如果你的代码逻辑是这样的:
class XXX extends asynctask
…
doInBackground(…){
1、获取数据
2、添加到数据池
3、publicProgress()
}
onPublicProgress(…){
4、调用adapter的notifydatasetchanged方法
}
在ADT22中,上面的代码肯定会报错的。为什么?
看下官方文档对 support/v4/view/PagerAdapter 的一个解释:
PagerAdapter supports data set changes. Data set changes must occur on the main thread and must end with a call to <a href="http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#notifyDataSetChanged()">notifyDataSetChanged()</a>
similar to AdapterView adapters derived from <a href="http://developer.android.com/reference/android/widget/BaseAdapter.html">BaseAdapter</a>
.
出错原因:数据更新必须在main thread进行更新!!结束前还得调用 notifyDataSetChanged() !!
也就是说,必须得把上面的2步骤,移动到onPublicProgress中才正常。
之前一直在Eclipse上开发小熊词典,Google I/O上推出Android Studio后,就转到Studio上了,但是项目依赖的文件太多,配置总是失败(因为尝试的Git方式管理),就打算重新在Eclipse上配置好再导入到Android Studio中。但是…Eclipse编译通过了,当在手机上运行的时候就出问题了。问题很传统,就是ClassNotFound,这种问题普遍是由于Android.manifest文件中的类名或者包名写错的原因。网上解决方案一大堆,我再三检查根本不是这个问题,我还总是不相信自己的眼睛,删掉ANdorid:name 认真粘贴的路径。。。
但是,这种屌丝的作法根本不解决问题,依然爆出如下错误:(橘黄色是Warning 红色是Error)
….直到最后:
连续搜索了很多此 Unable to instantiate activity ComponentInfo ClassNotFoundException (因为总觉得Warning是不足轻重的!)… 看了一堆stackoverflow的帖子,都类似类名出错….最后看到那个warning抱着试一试的态度搜了一下 Unable to resolve superclass of Landroid/support/v4/app/Watson 在GitHub的ActionBarSherlock的issue中终于找到了答案,而后百感交集啊。。。总结如下:
问题原因:更新到了SDK 22 具体看此处: GoogleCode GitHub Issue
问题解决:
教训:不要忽略warning!
这里记载着我的发展,是我努力从屌丝的蜕变:
这里记载着我的教程组织目录:
ps:更新较慢,而且应该多数是面向web,Android和MAC,并且我多数时候在更新github和开源小组的微博…
Responsive系列:
1、Media Query是什么?
Media Query 是CSS3中用来查询设备类型(Media Type),并且通过条件语句,加载满足条件的样式表。
2、关于设备类型:
–Media Query可以检测出以下设备–
设备名称 | 指代 |
---|---|
all | 匹配所有设备 |
braille | 匹配触觉反馈设备 |
embossed | 凸点字符印刷设备 |
handheld | 手持设备(尤其是小屏幕,有限带宽,不过注意:现在的Android,iPhone都不是Handheld设备,他们都是screen设备。所以,不要试图用handheld来识别iphone或者ipad,android等设备)PSP,NDS这种规格一般可以叫作Handheld,不过没有测试过,如有疏漏还请指正) |
打印机设备 | |
projection | 投影仪设备 |
screen | 彩色计算机显示器设备 |
speech | 语音合成器设备 |
tty | 栅格设备(终端,或者电传打字机) |
tv | 电视设备 |
3、Media Query的语法:
用法1:
@media 设备类型 { //…满足该设备条件的css属性… }
用法2:
[逻辑表达式only或者not] 设备类型{ …//如果逻辑表达式是only:代表只有这一种设备,调用如下css …//如果逻辑表达式是not : 代表除此之外的设备,调用如下css }
用法3:
@media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//用法3比用法2多了一个[and 媒体特征表达式],@media的强大之处在于, …//他不但能选择设备类型,还能对设备的不同配置(如屏幕宽度,色彩等的)进行选择。 //(这就是设备特征表达式所做的事情) …//这个用法,就是对相同设备的不同属性进行选择,而后条用满足条件的css表达式 …//现在你可能还不明白[and 媒体特征表达式],不过没有关系,后面我将认真介绍 //媒体特征表达式的用法,你一定会惊叹@media query的强大。 }
用法4:
@media 设备特征表达式 | 设备特征表达式 |….{ …//满足所给出的媒体特征表达式后,调用以下css代码块 …//注意:只要满足设备特征就可以了,不一定要是相同设备。 }
下面,我们用一个例子,来一步一步介绍这四种表达式的用法。
想想这一种场景,你开发了个小有名气的在线阅读网站,不过后来有小孩子吐槽说:“我常常在NDS上看电子书,能不能在NDS上,将背景变为深色,字变成白色,夜里看小说,背景太亮很刺眼。”
这时,你有两种做法:
1、对设备UA进行检测,完全为NDS重新做一个适合手机的站点。(这是传统的做法,虽然现在多数站点都在用,在现在看来,很不聪明了!)
2、利用css3的强大特性,轻松完成(我们当然要选择这种聪明些的做法!)
让我们来考虑考虑实现思路:
首先利用media query检查是否是手持设备 如果是: 背景为黑色,字为白色 如果不是: 不做处理
我们现在来看media query的第一种用法:
@media 设备类型 { //…满足该设备条件的css属性… }
用法1正好符合我们在此情形下的筛选条件,那么我们书写的css如下:
@media handheld{ body{ color:white; background-color:black; } }
我们的html页面便类似这个样子:
代码家
我们来测试Handheld,手持设备和screen显示器设备。
用chrome打开该html,发现如下图:
好像没有看到黑底白字啊?当然啦,你现在是在用电脑显示器来访问的页面,也就是满足了screen设备特征,handheld设备所书写的css都被忽略了。
那我们要如何测试在手持设备中的样式呢?难道一定要用NDS访问么,可是我没有NDS啊?!
当然不是,我们这里要用Chrome的一个设置功能,来覆盖一些属性,模拟手持设备,按照如下操作,便可以调用Chrome中模拟各种设备的功能。
1.首先,点击右键->审查元素
2.而后,在弹出的控制窗口中,点下设置按钮
3.左上角切到overrides中,寻找Emulate选项,勾上后,选中HandHeld,你就会惊奇的发现,网页整个变了个风格。正如我们预期的那样,黑底白字。
做到此处,是否已经对media query有些了解,而且有很强的成就感,不过先按捺住不要激动,这才是media query功能的一部分,还有一些更为实用的用法还没有接触到。还需慢下心来继续看下去。
后来,过了一段时间,上次的那个小盆友又发来吐槽反馈,说:“哈哈哈哈,我买了个iPad2,可是我发现iPad2在横屏看书的时候字体有点儿小啊,能不能在横屏的时候把字改大一点儿?”。
这时候,技术人员抓狂了,这可怎么改啊,iPad2也是screen设备,电脑显示器也是screen设备?! 让我怎么识别!
冷静
我们下面介绍的东西就能很好的处理这种情形:那就是 设备特征表达式
设备特征表示 看起来是是这个样子的:设备特征:设备特征值
留意一下用法3:
@media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//我们现在就要用用法3来识别iPad2 }
现在考虑一下,虽然iPad2和电脑显示器都是screen设备,可是他们之间还是有不同之处的。比如说,ipad是有横屏特征的设备,电脑却没有。
这个问题先搁浅到这里,我们先来研究一下设备表达式究竟是什么,等弄懂后,你自然就知道该怎么做了。
前面说到过,media query是可以识别设备特征的,可是设备特征是什么?想想,屏幕宽度算不算设备特征?设别分辨率算不算设备特征呢?设备色彩支持情况,横竖屏情况?
没错,这些都是我们在使用电子设备时候的设备特征。Media query支持很多种设备特征的识别属性。
媒体特性 | 说明/值 | 可用媒体类型 | 接受min/max |
width | 长度正数值(单位一般为px下同) | 视觉屏幕/触摸设备 | 是 |
heigth | 长度正数值 | 视觉屏幕/触摸设备 | 是 |
device-width | 长度正数值 | 视觉屏幕/触摸设备 | 是 |
device-heigth | 长度正数值 | 视觉屏幕/触摸设备 | 是 |
orientation | 设备手持方向(portait横向/landscape竖向) | 位图介质类型 | 否 |
aspect-ratio | 浏览器、纸张长宽比 | 位图介质类型 | 是 |
device-aspect-ratio | 设备屏幕长宽比 | 位图介质类型 | 是 |
color | 颜色模式(例如旧的显示器为256色)整数 | 视觉媒体 | 是 |
color-index | 颜色模式列表整数 | 视觉媒体 | 是 |
monochrome | 整数 | 视觉媒体 | 是 |
resolution | 解析度 | 位图介质类型 | 是 |
scan | progressive逐行扫描/interlace隔行扫描 | 电视类 | 否 |
grid | 整数,返回0或1 | 栅格设备 | 否 |
扫了一眼表格发现不明白min/max?没有关系,后面会说到。
这张表格来自:zzjyingzi,尊重原创,转载请保留。
留意一下那个蓝色的orientation,这不正是我们可以用来识别ipad横屏的状态么?
我们在原来的html中加上:
@meida screen and (orientation:landscape){ font-size:25px; }
这样,你可以测试一下,在ipad横屏时。会正如我们所预料的那样,25px字体展示。一切都太完美了。
在此之前,你或许需要用js去获取,而后调整属性。现在,只需简单几行就能实现,css3的强大之处当然不止如此,以后我也会给大家介绍更多关于css3的新特性。
正在我们说话之际,小盆友又发来消息:“我最近买了个iPhone,我也要黑底白字,保护眼睛。”
我想你也猜到了,我们这次需要识别的是同为screen设备的iPhone….
Here we go!
先来考虑iPhone与台式机显示器的不同之处:最大的区别就是屏幕大小。
那我们这次就要介绍一个属性,device-width,指代的是设备的宽度,注意,这可不是网页渲染的区域宽度。这个是与设备相关的。
iPhone的device-width就是320px,那么我们继续补充一个media-query在css中。
@media screen and (device-width:320px){ body{ background-color:black; color:white; } }
好啦,加上以后,那个小盆友就每天很happy的看上了小数,可是过了几日,我们又收到了这个倒霉孩子的来信:“我的iPhone坏了…555555….我妈给我买了个小手机先用着,屏幕可小了,烦。。。能不能把这个小屏幕的手机也让黑体白字、”。
忽然觉得技术部门就是为他开的。
好吧,冷静。
这个时候,就要介绍min/max属性了。device-width:320px 其实类似于divice-width==320px;
min/max 其实就是 >= 和 <=
min-device-width : 320px; 等价于 device-width >= 320px;
max-device-width : 320px; 等价于 device-width <= 320px;
明白了吧,我们只要在device-width前加个max 就能轻松解决这个熊孩子的要求了(让iPhone或者iPhone屏幕小的设备都能黑底白字)。来自Apple官方
@media screen and (max-device-width:320px){ body{ background-color:black; color:white; } }
从此之后,这个熊孩子就成了网站的忠实用户。。
关于Media Query的初步介绍就随着这个熊孩子安静下来而在此结束,不过我们的教程还未完结,熊孩子或许有一天又会发信来吐槽。
你可以在这个gist中查看目前多数设备的Media Query语句:点此
在上一篇Responsive系列之知识储备 – SASS高阶教程(1)中,我带大家介绍了一些sass的高级特性。在这篇中,我将介绍另外一些比较常用的@指令。
如果你还不知道什么是sass,可以看Responsive系列之知识储备 – SASS基础教程
@extend 是一种扩展功能,通常用在有一定递进关系的样式中。
比如说有两个class,一个叫 .error ,一个叫 .seriousError。很明显 .seriousError应该是 .error的一个扩展。
假设所有的 .error 都用红体字显示:
.error{ color:red; }
.seriousError不但要红体字,还要粗体!
.seriousError{ font-weight:bold; }
过去,我们通常是这样来表现这个seriousError的
其实这种写法并不合理,有语义学上的重叠。 seriousError本身就是一种error,而我们重复的写下error 和 seriousError 是不合理的,并且当一个div有两个class样式同时作用时,我们在维护的时候就得小心翼翼了,无疑增加了维护负担。
我们如果能写成如下,就显得合理和精简了许多
但是想要写成这样,我们就得对css做一番修改。
.error, .seriousError{ color:red; } .seriousError{ font-weight:bold; }
很明显seriousError扩展了error样式。我们前面说到的@extend指令便实现了这种开发逻辑。
.error{ color:red; } .seriousError{ @extend .error; /请留意此处的语法/ font-weight:bold; }
生成的css:
.error, .seriousError{ color:red; } .seriousError{ font-weight:bold; }
@extend不但可以扩展class,也可以扩展伪类。
.hoverlink { @extend a:hover; } a:hover { text-decoration: underline; }
生成的css如下:
a:hover, .hoverlink { text-decoration: underline; }
@extend还能保持被扩展元素的父子关系。
假使 error类下还有个 instruction 类用来显示错误的说明信息,因为字比较多的原因,为了让他能放得下,我们指定他的字体是小号的字体。
.error{ color:red; } .error.instruction{ font-size:small }
.seriousError下自然也有关于错误的说明,也就是instruction.
sass对此考虑周到,对父类的子类在扩展的时候也考虑了进来。
.error{ color:red; } .error .instruction{//instruction可以理解为error的子类 font-size:small; } .seriousError{ @extend .error; font-weight:bold; }
请留意生成的css:
.error, .seriousError { color: red; } .error .instruction, .seriousError .instruction { //.seriousError也包含了.instruction font-size: small; } .seriousError { font-weight: bold; }
@extend同样支持多重扩展
前面我们有了一个error和seriousError的例子,想想后来,我们又生成了一种attention的样式,为了提起人们的注意,为此我们设置了边框为红色。
.error{ color:red; } .attention{ border:1px solid red; }
现在,我们相对seriousError进行一番修改,毕竟是serious,一定要确保引起了用户的注意,因此,我们也需要将attention样式集成进来,这时多重扩展便起了作用。
.error{ color:red; } .attention{ border:1px solid red; } .seriousError{ @extend .error; @extend .attention; /* 当然,也可以这样书写 @extend .error, .attention; */ font-weight:bold; }
生成的css如下:
.error, .seriousError { color: red; } .attention, .seriousError { border: 1px solid red; } .seriousError { font-weight: bold; }
这样的样式用着用着,有一天发现又有一种更危险的error出现了,情况极其严重,一旦出现,就一定要引起用户注意并且修改,如果不改,简直要天崩地裂。
好吧,我们姑且叫他 criticalError ,他依旧用鲜艳的红色,粗体,并且要有像attention一样的红色边框,只不过他需要更大,达到40px才解气。
很显然,criticalError是seriousError情况的加深。因此我们选择extend seriousError。
这样,便形成了一种链式extend结构。
.error{ color:red; } .attention{ border:1px solid red; } .seriousError{ @extend .error, .attention; font-weight:bold; } .criticalError{ @extend .seriousError; font-size:40px; }
生成的css如下:
.error, .seriousError, .criticalError { color: red; } .attention, .seriousError, .criticalError { border: 1px solid red; } .seriousError, .criticalError { font-weight: bold; } .criticalError { font-size: 40px; }
现在,这个error系统用着很棒,但是忽然有一天,技术总监说:“上面又发了一个新的error系统我们需要完成,我认为我们应当用现在的sass错误系统建立一个快速的error开发框架”
这时,问题来了,如何用sass建立一个error开发框架呢?这时,让我们引出extend的另一个特性,这个特性就是为建立框架而生的。
让我们先来做个简单的实验,粘贴下面的sass代码然后编译看看:
%baseError{ color:red; }
是不是发现生成的css空空如也。
现在 试试这个
%baseError{ color:red; } .Error{ @extend %baseError; }
生成的css是否如下:
.Error { color: red; }
这便是一个最最简单的框架结构。%Name 告诉sass这时框架结构,不要输出这些。 @extend %name告诉sass我要扩展这个name选择器样式,调用一下这个框架。
框架在书写的时候,需要debug,在用户使用的时候需要对错误的输入警告,这时就需要@debug和@warn
用在测试时候的输出,可以在控制台看到。
如
@debug 10em + 12em;
你就会在控制台看到:
Line 1 DEBUG: 22em
看个例子:
@mixin adjust-location($x, $y) { @if unitless($x) { @warn “没有赋予单位,假设#{$x}按像素来算”; $x: 1px * $x; } @if unitless($y) { @warn “没有赋予单位,假设#{$y}按像素来算”; $y: 1px * $y; } position: relative; left: $x; top: $y; } .box{ @include adjust-location(10,20);//我们在这里故意不加入像素值 }
生成的css如下:
.box { position: relative; left: 10px; top: 20px; }
但是这不是重点,请留意你的控制台。
WARNING: 没有赋予单位,假设10按像素来算 on line 3 of style.scss, in adjust-location' from line 13 of style.scss WARNING: 没有赋予单位,假设20按像素来算 on line 7 of style.scss, in
adjust-location’ from line 13 of style.scss
至此,我大致介绍了大致85%左右关于sass的常用知识,随后我将推荐和分析几个sass框架,来带着大家一起摸索sass的开发模式。
在探索过程中,我们将一起来制作一个基于Responsive和SASS的站点。
作者:代码家
来源:代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权,转载请注明来源!
SASS系列:
Responsive系列之知识储备 – SASS基础教程
Responsive系列之知识储备 – SASS高阶教程(1)
Responsive系列之知识储备 – SASS高阶教程(2)
如果你还不了解什么是sass,请点击Responsive系列之知识储备 – SASS基础教程
sass支持一些基本的控制指令,通过条件判断来输出某些特定的样式。
1、@if :
@if 条件语句 {…(返回的样式)}
如;
p { @if 1 + 1 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }
生成的css如下:
p { border: 1px solid; }
@if 同样可以跟 @else if
如:
$type: monster; p { @if $type ocean { color: blue; } @else if $type matador { color: red; } @else if $type monster { color: green; } @else { color: black; } }
生成的css如下:
p { color: green; }
2、@for
@for指令用来重复输出一系列的样式,通过一个循环语句,指定一个变量名,一个开始和一个结尾,而后在执行体中写入想要输出的样式格式,sass会自动循环的输出一系列的样式结构。
注:sass的循环 包含 开始和结尾
如:
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
生成的css如下:
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
3、@each
@each指令用来遍历一个序列,每次将序列中的一个值设为声明的一个变量,并且进行特定操作,操作完成后,循环到下一个值,直到结束。
如:
@each $animal in dog, cat, bird { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); } }
生成的css如下:
.dog-icon { background-image: url(‘/images/dog.png’); } .cat-icon { background-image: url(‘/images/cat.png’); } .bird-icon { background-image: url(‘/images/bird.png’); }
设想如果有很多重复性的css要生成,sass多么的方便。
4、@while
@while语句首先判断是否满足给定条件,满足条件的情况下重复输出某一样式表达式,直到条件为false为止。
@while是一个比较少用的表达式,通常用来实现@for语句难以实现的复杂循环结构.
如:
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i – 2; }
生成的css如下:
.item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }
在Responsive系列之知识储备 – SASS基础教程中,介绍了Mixins的基础用法,@include以及传递参数。
现在我将介绍一下关于Mixins的更多功能:
1、Mixins的声明内部可以@include其他的Mixins
如:
@mixin compound { @include highlighted-background; @include header-text; } @mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; }
2、Mixins的参数传递功能可以有默认值
如:
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }
生成的css如下:
p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }
3、Mixins同样可以显式声明要传递的参数/也可以叫作关键字传参 (Keyword arguments)
如:
p { @include sexy-border($color: blue); } h1 { @include sexy-border($color: blue, $width: 2in); }
显式传递会让sass代码更加易读,而且在有很多参数的情况下,不用过多的在意参数传递的顺序,建议多用这种方式去传递参数。
4、Mixins也支持不定参数传递
在某些情况下,我们可能无法确定一个Mixins要传递的参数个数,这个时候,我们就可以利用这一特性来传递参数。参数书写规则类似其他语言,在参数变量后加…
代表不定参数。
如我们要实现shadow效果,而shadow的参数往往比较多样,无法确定:
@mixin box-shadow($shadows…) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }
生成的css如下:
.shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }
5、调用Mixins,也可以用类似不定参数的方法调用。
可以提前声明一个数值List,而后在调用时传入这个List+…
,sass会自动分配List中的value给每个参数。
如下:
@mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values…);/留意这里/ }
生成的css如下:
.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }
6、如果你想扩展一个已有的Mixins(如:添加某些新的属性),又不希望打破旧的结构,这时新的Mixins可以包装旧的Mixins,并且可以利用不定参数的方式来实现参数传递,是不是听起来略微抽象,没有关系,看个例子就明白了。
假如有个Mixins叫stylish-mixin,我们现在想扩展出一个新的Mixins,让他的字体变为bold
@mixin stylish-mixin($color,$width){ color:$color; font-size:$width; } @mixin wrapped-stylish-mixin($args…) { font-weight: bold; @include stylish-mixin($args…); } .stylish { @include wrapped-stylish-mixin(#eeeeee,$width: 100px); }
生成的css如下:
.stylish { font-weight: bold; color: #eeeeee; font-size: 100px; }
7、传递内容块(content blocks)给Mixins
这个比较抽象,我会从一个例子下手,而后讲解此功能的用法。
首先,我们在此引入一个@指令,即@content
,@content
表示一个未来要被替换的文本。
看如下scss文件:
@mixin apply-to-ie6-only { * html { @content; /这个@content,表示未来此处会被传递的值重新替换的样式文本/ } } /而后,我们利用@include指令来调用 apply-to-ie6-only mixins/ /但是在调用的时候,我们得考虑到替换@content , 因而我们要使用 @include 的另一种使用方式 ,如下:/ @include apply-to-ie6-only {/*这个代码段内的文本将替换 apply-to-ie6-only中的@content部分 */ #logo { background-image: url(/logo.gif); } }
而后sass在编译后的文本内容其实如下:
@mixin apply-to-ie6-only { * html { #logo { background-image: url(/logo.gif); } } } @include apply-to-ie6-only;
最终生成的 css文件如下:
这种看似麻烦的方法是用来做什么的呢?
实际上是用来提供抽象接口的,看看这种结构像不像C++中的abstract类(抽象类)。想想C++的抽象类是用来干什么的?
sass允许你定义自己的函数。
使用方法:
@function 函数名(参数1,参数2…){
…一些处理语句;
@return 返回的内容;
}
举个例子:
$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n – 1) * $gutter-width; } #sidebar { width: grid-width(5); }
生成如下css:
函数跟mixin的传参方法很类似,同样支持关键字传参,如上面的grid-width也可以如下调用:
同样函数也支持不定参数的传递方式。
注意:为了不发生命名冲突或者为了不使阅读你代码的人误以为函数是sass内部提供的函数,建议在属于你自己的函数上加入前缀,如你在google工作,可以在grid-width前加入google,变成为google-grid-width
下一节,我将补充介绍一些@规则指令,并且介绍一些常用的css格式。
也会补充介绍一些平台下的便利开发工具。
作者:代码家
来源:代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权,转载请注明来源!
SASS系列:
Responsive系列之知识储备 – SASS基础教程
Responsive系列之知识储备 – SASS高阶教程(1)
Responsive系列之知识储备 – SASS高阶教程(2)