现代 CSS

Sass

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下,这些都是非常简单的。

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。

页面

返回顶部