Preprocessor

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

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

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

SASS界面编译工具——Codekit的使用

在《SASS编译》和《Nodejs+Grunt配置SASS项目自动编译》教程中,我们详细介绍了使用和使用命令完成SASS项目的转译任务,其中还可以使用和命令实现时时监控SASS项目,一旦修改任何SASS文件,都会自动将SASS文件转译成CSS。

当然,我们可以通过系统自带的命令行或者其他的终端命令工具,实现SASS的编译工作,但对于前端设计人员而言,虽然常用能记得住这些命令,终究会觉得不习惯。为此,我们可以使用APP应用来帮助我们完成SASS编译工作,从此告别使用命令来转译SASS。

目前为止,有关于SASS编译的界面工具数不胜数,例如:ScoutCodeKitLiveReloadCompassFire以及国产的编译工具Koala等。其中前几款都是付费工具,唯有Koala是免费的。

孰好孰坏,我们不做过多的评论与对比。从我个人出发,我更趋向于CodeKitCompassKoala。由于Compass无法获取到破解版本,同时CodeKit与之无太多区别,所以在我的Mac系统中,我安装了CodeKit。今天特意和大家一起分享一下使用CodeKit的一点经验。

 

Nodejs+Grunt配置SASS项目自动编译

早前听说NodejsGrunt很强大,特别是用来构建自动化的前端开发,更是强大无比。但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去。最近在开始学习SASS,也慢慢的接触这方面的东西。为了能更好的让SASS项目实现自动化编译,打算使用Nodejs和Grunt来试试。

SASS的编译的话题,在《SASS编译》有进行过介绍,文中介绍的方法是在Ruby环境下,使用sass命令配合其各种不同的参数来实现SASS的编译。那么今天我们换过一种方式,使用Nodejs和Grunt来实现SASS的自动编译。

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。

Less/Sass编译工具,koala使用指南

如果你正在使用sass、less或coffee,而没有注意到koala,那说明你可能已经好久没有更新你的知识库了。koala这个由国人编写的,用于编译sass、less、coffee利器,在最近的短短几个月曝光率不亚于任何其他的技术。当然这跟其作者的辛勤劳动,让其更强更优秀有很大关系。在此先感谢koala的作者们,感谢你们给我们带来这么棒的免费工具。

其实编译工具有很多,我本人就各种免费的编译sass的工具都试过,一般都是不了了之,要么功能有限,要么编译速度不敢恭维,直到一个偶然的机会遇到koala,才停止搜索脚步,稳定使用它,现在它已经是我开机必备工具之一。下面我将以我自己的实际经验,简单介绍下koala。

浅析sass死亡在团队合作中

其实很多人对sass都有所了解,尤其是国内的大团队,甚至花过一番力气去推广,可是最后却一个个流产,这其中的原因众多。这里我简单说下个人的一些理解,如有不对还请手下留情。

第一,sass毕竟有一个学习成本,不过学习过的人都知道,其实学习这个起来还是很快的,如果你团队确实存在某个人连这个都学不会,那就别让他搞css了,要不拍拍屁股走人要不搞别的去要不他就是当领导的吧。

第二,sass不能动态引入在线的资源,拿css来说对于一些共有的东西如reset.css我们一般都是直接引入线上的绝对地址的,但是sass不能,所以目前我们引入sass有两种方法,第一种如compass那样,安装好,然后调用;第二个就是放在项目里调用。这个就牵扯到一个更新的问题,确实是比较头疼的,目前没有什么解决办法。

第三,sass从前不是很成熟。说实话听到less,sass什么的还是比较早的,但是那个时候总觉得还不是很好,所以简单摸了下。这不,技术是发展的,现在经过一步步的改进,已经发展到合意的地步了,是时候推广使用了。而那些曾经被sass伤害过的大神,回个头重新看下吧,现在的它发展到了一个更合理成熟的阶段了。

sassCore——设计更好的sass库

目前sass库中应用最多的应该就是compassbourbon,但是使用之后会发现compass设计太复杂了,而bourbon有点太简单了。于是只好琢磨着去搞一个使用起来更方便合理的sass库,经过翻阅众多资料、实践及思考,终于有了现在的sassCore,当然到目前为止sassCore还不是非常完善,但是对付日常的工作已经很够了。

之所以说是设计更好,决不会空穴来风,下面我们从几个方面简单说下sassCore的优势。

1、sassCore涵盖范围广,目前涉及了setting,reset,mixin,css3,typography,media-queries,grids,helps八个部分。

2、sassCore采用开关机制,对是否支持ie6/7等众多条件可以通过设置为true或false来搞定。

Sass新手指南

Sass是一门非常优秀的CSS预处理语言,他是由Hampton Catlin创立,其中他还有另外一个名称SCSS,这个SCSS看起来更像CSS。最近迷上了CSS预处理器方面的东东,所以开始在针对性的学习Less、Sass和Stylus三个流行的预处器语言的基础知识,希望具有一定的基础后可以针对一些优秀的框架,研读他们的源码。所以今天给大家介绍的是Sass新手方面的指南。这篇文章是根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译,希望这篇译文能帮助大家对Sass有一个概念性的了解,当然要深入的介绍的话,我想我们可以用一本书来描述,此处只是做引导性的学习,今后我也会加强这方面的分享,有兴趣的同学就观注一下相关更新吧,让我们一起来学习这几种CSS预处理器语言。更好的帮助大家开发CSS、维护CSS,从而提高自己的效率。

页面

返回顶部