SASS用法指南

作者: 阮一峰 日期: 2012年6月19日 学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做“CSS预处理器”(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。 各种"CSS预处理器"之中,我自己最喜欢SASS,觉得它有很多优点,打算以后都用它来写CSS。下面是我整理的用法总结,供自己开发时参考,相信对其他人也有用。 ============================================ SASS用法指南 作者:阮一峰 一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了。 2.2 使用 SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。 下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。) sass test.scss 如果要将显示结果保存成文件,后面再跟一个.css文件名。 sass test.scss test.css SASS提供四个编译风格的选项: nested:嵌套缩进的css代码,它是默认值。 expanded:没有缩进的、扩展的css代码。 compact:简洁格式的css代码。 compressed:压缩后的css代码。 生产环境当中,一般使用最后一个选项。 sass –style compressed test.sass test.css SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。 三、基本用法 3.1 变量 SASS允许使用变量,所有变量以$开头。 $blue : #1875e7; div { color : $blue; } 如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。 $side : left; .rounded { border-#{$side}-radius: 5px; } 3.2 计算功能 SASS允许在代码中使用算式: body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; } 3.3 嵌套 SASS允许选择器嵌套。比如,下面的CSS代码: div h1 { color : red; } 可以写成: div { hi { color:red; } } 属性也可以嵌套: p { border-color: red; } 可以写成: p { border: { color: red; } } 注意,border后面必须加上冒号。 3.4 注释 SASS共有两种注释风格。 标准的CSS注释 /* comment */ ,会保留到编译后的文件。 单行注释 // comment,只保留在SASS源文件中,编译后被省略。 四、代码的重用 4.1 继承 SASS允许一个选择器,继承另一个选择器。比如,现有class1: .class1 { border: 1px solid #ddd; } class2要继承class1,就要使用@extend命令: .class2 { @extend .class1; font-size:120%; } 4.2 Mixin ...

2012-06-19 · 2 min · bystander

FreeAnony-代理采集设置工具

这个名字确实有点不太好。。因为刚开始我想到这个工具是在今天早上看到一个别人的代理工具的时候,突然想做的,没有好好规化,结果后来代码越写越多。。不过收获很大。 先看界面,因为是简单实现一下,所以就不要吐槽界面了。。 刚开始想的思路就是先去一个经常发布代理IP的网页去采集。然后解析成一条条的信息。然后显示出来。中途遇到几个问题,一个就是在做代理验证的时候,没有用多线程,导致直接界面无响应。另一个就是DataGridView控件要实现对一个数组的绑定,需要的一个实体对象。 public IPEntity[] GetIpInfo(string url) { //获得网页源码 string content = Get_Http(url); //定位代理ip位置 int start = content.IndexOf("</strong></u></a><BR>"); int end = content.LastIndexOf("<BR><SCRIPT type=text/javascript>"); //提取并去除一些冗余代码 string subContent = content.Substring(start, end - start).Substring(21); subContent = subContent.Replace("&nbsp; dn28.com", ""); //通过br标签分隔代理列表为数组 string[] sArray = Regex.Split(subContent, "<br>", RegexOptions.IgnoreCase); IPEntity[] list = new IPEntity[sArray.Length]; int j = 0; foreach (string i in sArray) { int addrpos = i.IndexOf(":"); string ipaddress = i.Substring(0, addrpos); int portpos = i.IndexOf("@"); string ipport = i.Substring(addrpos + 1, portpos - addrpos - 1); int typepos = i.IndexOf(";"); string iptype = i.Substring(portpos + 1, typepos - portpos - 1); string ipcountry = i.Substring(typepos + 1); list[j++] = new IPEntity(ipaddress, ipport, iptype, ipcountry); } return list; } 这部分就是先得到网页源码,然后通过IndexOf和LastIndexOf定位到ip组的位置。这是通过分析源码来确定参数的。最后通过 标签分割成字符数组。数组元素类似于112.25.12.37:80@HTTP;江苏省 移动,然后就是继续分割成一部分,构造了一个IPEntity的数组。在按钮中绑定到DataGridView中即可 IPEntity类的定义如下:这里面设置了一个status属性,用于后面代理验证的时候进行标记。 public class IPEntity { string _Address; string _Port; string _Type; string _Country; string _Status; public string Address { get { return _Address; } set { _Address = value; } } public string Port { get { return _Port; } set { _Port = value; } } public string Status { get { return _Status; } set { _Status = value; } } public string Type { get { return _Type; } set { _Type = value; } } public string Country { get { return _Country; } set { _Country = value; } } public IPEntity(string Address, string Port,string Type,string Country) { this._Address = Address; this._Port = Port; this._Type = Type; this._Country = Country; } } 然后是验证ip可用性的部分。这部分主要的代码是验证DataGridView中的ip地址可用性 ...

2012-06-17 · 2 min · bystander

为什么sizeof(str.substr(0,3).c_str())=8?

问题: string str = "abcdefgdcb"; cout &lt; &lt; sizeof(str.substr(0,3).c_str()); For some reason, the above string is giving me 8. I assumed c_str() returns a null string, 由于某些原因,上面的这个字符串得到的结果是8,我估计c_str()返回了一个null, and sizeof uses the null to determine the size of the string. 并且sizeof函数使用这个null来定义这个字符串的大小。 答案: Because sizeof doesn’t give you the length of a string, 因为sizeof给你的不是一个字符串的长度, it gives you the size of the type (const char * in this case). Try strlen. 他给你的是这个类型的大小(这种情况下的类型是c_str()返回的const char*类型),想要得到正确的结果,试试strlen函数吧。 On your system, sizeof (const char ) == 8, like any other pointer. 在你的系统上,sizeof(const char)=8,和其他所有的指针类型一样。 8 is the size of a pointer on your machine (64-bit) 8是在你的64位电脑上一个指针的大小 There’s your problem. sizeof tells you the size of a variable, 别乱假设,sizeof告诉你一个变量的大小, which has nothing to do with the value inside the variable, ever. 他不会进入变量里面对变量做任何改变的。。永远不会。 问题:http://stackoverflow.com/q/10668764/764869

2012-05-21 · 1 min · bystander

对象数组的Xml序列化和反序列化

使用Serialization来进行序列化和反序列化,因此需要引入System.Xml.Serialization;命名空间。 为什么要做序列化和反序列化? .Net程序执行时,对象都驻留在内存中;内存中的对象如果需要传递给其他系统使用;或者在关机时需要保存下来以便下次再次启动程序使用就需要序列化和反序列化。 本文的原始例子在参考文中,但是参考文中没有给出反序列化的例子,且xml文件不清晰。于是修改了代码,同时实现对象数组序列化和反序列化。 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Xml.Serialization; using System.IO; namespace UseXmlSerialization { class Program { static void Main(string[] args) { //声明一个猫对象 var cWhite = new Cat { Color = "White", Speed = 10, Saying = "I am a good WHITE cat" }; var cBlack = new Cat { Color = "Black", Speed = 10, Saying = "I am a good BLACK cat" }; CatCollection cc = new CatCollection { Cats = new Cat[] { cWhite, cBlack } }; //序列化这个对象 XmlSerializer serializer = new XmlSerializer(typeof(CatCollection)); StringWriter sw = new StringWriter(); serializer.Serialize(sw, cc); //序列化到StringWriter对象sw里 string strXml = sw.ToString(); Console.WriteLine("对象数组序列化后:"); Console.WriteLine(strXml); Console.WriteLine("xml反序列化后:"); StringReader sr = new StringReader(strXml); CatCollection c2 = serializer.Deserialize(sr) as CatCollection; for (int i = 0; i < 2; i++) //验证xml文件是否已经被反序列化为对象数组 { Console.WriteLine("I am Cat " + i); Console.WriteLine(c2.Cats[i].Color); Console.WriteLine(c2.Cats[i].Saying); Console.WriteLine(); } } } //以下为类定义 [XmlRoot("Cats")] public class CatCollection { [XmlElement("Cat")] public Cat[] Cats { get; set; } } public class Cat { //定义Color属性的序列化为cat节点的属性 [XmlAttribute("color")] public string Color { get; set; } //要求不序列化Speed属性 [XmlIgnore] public int Speed { get; set; } //设置Saying属性序列化为Xml子元素 [XmlElement("saying")] public string Saying { get; set; } } } 参考: http://www.cnblogs.com/yukaizhao/archive/2011/07/22/xml-serialization.html

2012-05-18 · 1 min · bystander

.Net三层架构

本文来源:http://www.cnblogs.com/gaoweipeng/archive/2009/01/18/1377855.html 老规矩。因为是非常不错的文章。所有有必要收藏下来备用。推荐。 **三层体系结构的概念 ** 用户界面表示层(USL) 业务逻辑层(BLL) 数据访问层(DAL) BLL将USL与DAL隔开了,并且加入了业务规则 各层的作用 1:数据数据访问层:主要是对原始数据(数据库或者文本文件等存放数据的形式)的操作层,而不是指原始数据,也就是说,是对数据的操作,而不是数据库,具体为业务逻辑层或表示层提供数据服务. 2:业务逻辑层:主要是针对具体的问题的操作,也可以理解成对数据层的操作,对数据业务逻辑处理,如果说数据层是积木,那逻辑层就是对这些积木的搭建。 3:表示层:主要表示WEB方式,也可以表示成WINFORM方式,WEB方式也可以表现成:aspx, 如果逻辑层相当强大和完善,无论表现层如何定义和更改,逻辑层都能完善地提供服务。 具体的区分方法 1:数据数据访问层:主要看你的数据层里面有没有包含逻辑处理,实际上他的各个函数主要完成各个对数据文件的操作。而不必管其他操作。 2:业务逻辑层:主要负责对数据层的操作。也就是说把一些数据层的操作进行组合。 3:表示层:主要对用户的请求接受,以及数据的返回,为客户端提供应用程序的访问。 三层结构解释 所谓三层体系结构,是在客户端与数据库之间加入了一个中间层,也叫组件层。这里所说的三层体系,不是指物理上的三层,不是简单地放置三台机器就是三层体系结构,也不仅仅有B/S应用才是三层体系结构,三层是指逻辑上的三层,即使这三个层放置到一台机器上。 三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中间层进行处理。通常情况下,客户端不直接与数据库进行交互,而是通过COM/DCOM通讯与中间层建立连接,再经由中间层与数据库进行交换. 开发人员可以将应用的商业逻辑放在中间层应用服务器上,把应用的业务逻辑与用户界面分开。在保证客户端功能的前提下,为用户提供一个简洁的界面。这意味着如果需要修改应用程序代码,只需要对中间层应用服务器进行修改,而不用修改成千上万的客户端应用程序。从而使开发人员可以专注于应用系统核心业务逻辑的分析、设计和开发,简化了应用系统的开发、更新和升级工作。 那么为什么要应用“中间业务层”呢?举些例子: 我们假设有一段登录代码,则可以这样处理Web程序,外观层负责接收前台页面的数据,然后传给中间层,中间层对数据进行处理,比如格式化,防SQL注入等等一些,这样的数据再传给数据访问层然后与数据库进行操作,比如与数据库的用户名和密码匹配等等一些代码。** ** “中间业务层”的用途有很多,例如:验证用户输入数据、缓存从数据库中读取的数据等等……但是,“中间业务层”的实际目的是将“数据访问层”的最基础的存储逻辑组合起来,形成一种业务规则。例如:“在一个购物网站中有这样的一个规则:在该网站第一次购物的用户,系统为其自动注册”。这样的业务逻辑放在中间层最合适: 在“数据访问层”中,最好不要出现任何“业务逻辑”!也就是说,要保证“数据访问层”的中的函数功能的原子性!即最小性和不可再分。“数据访问层”只管负责存储或读取数据就可以了。 ** ** ASP.NET中的三层结构说明 完善的三层结构的要求是:**修改表现层而不用修改逻辑层,修改逻辑层而不用修改数据层。**否则你的应用是不是多层结构,或者说是层结构的划分和组织上是不是有问题就很难说.不同的应用有不同的理解,这只是一个概念的问题. * **理解ASP.NET中的三层结构**——为什么要分三层? 我们用三层结构主要是使项目结构更清楚,分工更明确,有利于后期的维护和升级。它未必会提升性能,因为当子程序模块未执行结束时,主程序模块只能处于等待状态。这说明将应用程序划分层次,会带来其执行速度上的一些损失。但从团队开发效率角度上来讲却可以感受到大不相同的效果。 需要说明一下,三层结构不是.NET的专利,也不是专门用在数据库上的技术。它是一种更加普适的架构设计理念。 ** **此种架构**要在数据库设计上注意表之间的关系,**尽力满足主与子的关系。在功能上对用户要有一定的限制,不要表现在对于子表的删除操作一定要慎重,以免造成主表与子表的数据在逻辑上出现的主表的外键在子表中没有相对应的值。 对于表的综合查询方法是: 先对主表查询,调用主表所对应的DL。再根据主表的记录分别对每一个子表进行查询。将自表的查询结果添加的主表后,形成一个大的查询集合。 对于表的操作(增删改): 此时只对主表进行操作,调用主表对应的DL中的操作方法。 RL层是逻辑判断层,主要是对页面上传入的数据进行逻辑判断。RL层之上就是UI 如何建立一个三层体系结构解决方案 新建一个空白解决方案。然后: “添加”-“新建项目”-“其他项目”-“企业级模版项目”-“C#生成块”-“数据访问”(数据层,下简称D层) “添加”-“新建项目”-“其他项目”-“企业级模版项目”-“C#生成块”-“业务规则”(业务层,下简称C层) “添加”-“新建项目”-“其他项目”-“企业级模版项目”-“C#生成块”-“Web用户界面”(界面层,下简称U层) 右键点“解决方案”-“项目依赖项”,设置U依赖于D、C,C依赖于D。 对U添加引用D、C,对C添加引用D。 到此为止,一个三层的架子建立起来了。我上面说的很具体很“傻瓜”,知道的人觉得我废话,其实我这段时间很强烈的感觉到非常多的人其实对这个简单的过程完全不了解。虽然不反对建2个“空项目”和1个“Asp net Web应用程序项目”也可以作为3层的框架,而且相当多的人认为其实这些“企业级模板项目”其实就是个空项目,这是一个误区。没错,企业级模板项目你从解决方案资源管理器里看它是个什么也没有的,但是你可以用记事本打开项目文件,看见不同了吧??有些东西在背后,你是看不见的,不过系统已经做好了。也就是说,如果你在C层里的某个类里“using System Data SqlClineit”,或者使用一个SqlConnection对象,编译时候不会出错,但是会在“任务列表”里生成一些“策略警告”,警告你在C层里不要放应该放在D层的东西(虽然就程序来说没错,但是可读性可维护性就打了折扣)而这种功能,空项目是无法給你的。 在新TraceLWord3中,应用了“企业级模板项目”。把原来的LWordTask.cs,并放置到一个单一的项目里,项目名称为:AccessTask。解决方案中又新建了一个名称为:InterService的项目,该项目中包含一个LWordService.cs程序文件,它便是“中间业务层”程序。为了不重复命名,TraceLWord3的网站被放置到了WebUI项目中。更完整的代码,可以在CodePackage/TraceLWord3目录中找到—— **面象对象与实际的结合 ** 我们知道建桥需要砖块,应该是先准备好砖再来建桥,不过为了讲解上的顺序性和连贯性,简单性。我们先建桥,建的过程中需要砖块再现做,这样就不会多出来“桥不需要的东西”。注意在实际中,还是应该先准备砖块。 U层其实就是桥,C层是砖块,D层是原料(石头、沙子)。这也解释前面为什么U层要引用、依赖D层(而不是U对C,C对D的层次),因为桥除了需要砖头,其实也需要石头沙子。 “三层结构”的缺点 有些网友在读完这篇文章前作之后,对我提出了一些质疑,这提醒我文章至此还没有提及“三层结构”的缺点。“三层结构”这个词眼似乎一直都很热门,究其原因,或许是这种开发模式应用的比较普遍。但是“三层结构”却并不是百试百灵的“万灵药”,它也存在着缺点。下面就来说说它的缺点…… “三层结构”开发模式的一个非常明显的缺点就是其执行速度不够快。当然这个“执行速度”是相对于非分层的应用程序来说的。从文中所给出的时序图来看,也明显的暴露了这一缺点。TraceLWord1和TraceLWord2没有分层,直接调用的ADO.NET所提供的类来获取数据。但是,TraceLWord6确要经过多次调用才能获取到数据。在子程序模块程序没有返回时,主程序模块只能处于等待状态。所以在执行速度上,留言板的版本越高,排名却越靠后。“三层结构”开发模式,不适用于对执行速度要求过于苛刻的系统,例如:在线订票,在线炒股等等……它比较擅长于商业规则容易变化的系统。 “三层结构”开发模式,入门难度够高,难于理解和学习。这是对于初学程序设计的人来说的。以这种模式开发出来的软件,代码量通常要稍稍多一些。这往往会令初学者淹没在茫茫的代码之中。望之生畏,对其产生反感,也是可以理解的…… 其实,无论哪一种开发模式或方法,都是有利有弊的。不会存在一种“万用法”可以解决任何问题。所以“三层结构”这个词眼也不会是个例外!是否采用这个模式进行系统开发,要作出比较、权衡之后才可以。切忌滥用! 参与资料 MainDoc.rar (《浅谈“三层结构”原理与用意》1.30M) http://www.bincess.cn/Downloads/MainDoc.rar petshop 4.0的体系结构(只是稍微看了一下,了解一下结构) 简介:PetShop随着版本的不断更新,至现在基于.Net 2.0的PetShop4.0为止,整个设计逐渐变得成熟而优雅,而且有很多可以借鉴之处。PetShop是一个小型的项目,系统架构与代码都比较简单,却也凸现了许多颇有价值的设计与开发理念。 下载地址:[http://msdn.microsoft.com/en-us/library/aa479070.aspx](http://msdn.microsoft.com/en-us/library/aa479070.aspx) **PetShop架构设计** 三层”应用结构:数据访问层、业务逻辑层(领域层)、表示层 分层的设计的特点: 结构清晰、耦合度低 便于系统的扩展 利于开发任务同步进行 降低了一定的性能 > .Net PetShop 4.0 配置文件属性管理 > http://blog.csdn.net/fengfangfang/archive/2006/09/07/1189061.aspx > > .Net PetShop 4.0 缓存处理 > http://blog.csdn.net/fengfangfang/archive/2006/09/06/1185077.aspx > > .Net PetShop 4.0 消息处理 > [http://blog.csdn.net/fengfangfang/archive/2006/09/08/1194896.aspx](http://blog.csdn.net/fengfangfang/archive/2006/09/08/1194896.aspx) > > 每个功能都使用了工厂模式 > > 参考了Duwamish Web Search

2012-05-05 · 1 min · bystander

System.Web中不存在类型或命名空间名称UI解决

今天打算用C#写个模拟登录的程序。从类库里找到一个HTMLHelper的类。用来处理html的请求接收等处理。为了让类能够先运行起来,先把该类拖入解决方案,引用就不用添加了,因为该类没写命名空间,可以直接用,我测试其中一个最简单的函数 private void btnGet_Click(object sender, EventArgs e) { txtContent.Text=HTMLHelper.Get_Http("http://leaver.me"); } 获取我网站的首页源代码。到TextBox控件 编译,运行。出现如题错误。 命名空间“System.Web”中不存在类型或命名空间名称“UI”。是否缺少程序集引用? E:\project\C#\GTest\GTest\HTMLHelper.cs 直接对着错误点右键,复制。然后删掉后面的路径。使关键字包括前面几个就行了,到Google中搜索。大部分人给的说明都是 原因是缺少System.web的引用,只要右键单击项目,添加引用就行了! 那咱就添加呗 对着工程点击引用->添加引用 悲剧发生了。。 根本就没有该dll文件。。泪奔了。。于是Google之。。发现没有一个讲清楚的。都是夸夸其谈。。没有任何实质性方案。于是换英语搜。 关键字:Cannot add System.Web.dll reference 第一个是stackoverflow,大名鼎鼎的栈溢出啊。。进去看看。 For people that cant find “System.Web” at .Net References, this might be the answer: “you need to right-click the project -> properties -> then change the “Target framework” which will probably be “.NET Framework 4 Client Profile” to just “.NET Framework 4”. The answer was given by Tinister (thanks) as a reply to a previuos post. But I thought it was a little bit hidden at his original post. So i put it here to make it easer to be seen. Hope it helps. 大牛的我就不翻译了,很简单。项目->项目属性->目标框架 改成.net framework 4 这个步骤完成后,重复前面的添加引用的步骤就会发现已经有了System.Web引用了 编译运行。一切ok 如果你遇到了这样的问题也可以试试吧。 转自请注明:http://leaver.me/archives/177.html

2012-04-13 · 1 min · bystander