会员专栏

SASS基础——十个常见的Mixins

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

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

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

sass揭秘之@if,@for,@each

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

经过上两篇揭秘,大家心里对sass应该有了很好的认知感了,这篇文章基于前面两篇为基础,请确保你先浏览了前面的两篇文章,不然可能给你带来疑惑感觉。

  1. sass揭秘之变量
  2. sass揭秘之@mixin,%,@function

这篇文章关键是对sass判断或循环的语法熟悉下,至于逻辑这东西,和其他的语言如js,php什么的是一样一样的,没什么说头。经过前两篇的积累,也就不需要那么啰嗦了,所以只写scss代码。现在你就可以想想css如果用上这些东西会是什么样子的呢?

sass揭秘之@mixin,%,@function

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你带来疑惑的感觉。

其实很多人之所以对sass或less感兴趣,就是因为他们能使用变量和这个@mixin功能,而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑力的,没办法,广告做得好啊,大明星。这里之所以把%和@function和@mixin放在一起,当然并非无缘无故,一看@mixin和@function就是兄弟,长得那么像,而%这个后起之秀,更是在一定程度上抢了@mixin的不少风头。

sass揭秘之变量

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

变量对于一个程序员来说非常的熟悉,但对于样式这一块还是很新的一个概念。我们所知道的变量有全局变量,局部变量。但在SASS中这个概念对于刚开始sass的人,也许其最大的抱怨就是sass的变量了,尤其是那些了解less变量的,更是会说sass的变量做得不如less的变量好,less中有明显的全局变量和局部变量之分,但是到sass这边来,好像有点乱了,分不清了。其实不管sass的变量还是less变量都是有其设计的原理的,有着不一样的科学性,下面我们简单来了解下。

 

理解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。

Alexwolfe的Button库使用

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

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

再说CSS3渐变——径向渐变

上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用。以及在本文结束尾处一起探讨了一下如何让低版本兼容CSS3的渐变,以及一些兼容方案。不过在下更愿意希望大家放弃兼容性,大敢的去尝试使用,学习使用。如果实在需要使用到项目中,如果用户实在需要兼容性一致,可以在换思路,但对于学习来说,无需顾虑是否兼容。

页面

返回顶部