现代 CSS

SCSS

Sass的新特性

Sass是CSS的预处理器,这也是现在最常见讨论的一个话题。Sass最早是2007年由Hampton Catlin提出。Sass到现在已经走了很长的路了,到现在也是最常见的CSS预处理程序。如果您还不知道什么是Sass,我强烈推荐您阅读一下David Walsh写的这文章和Chris Coyier写的文章。不管什么情况之下,我将假定您基本都了解Sass,你们当中有一些人甚至是Sass的铁杆粉丝!这些都不先考虑,如果有一篇博客介绍Sass的未来特性,那多好。今天根据的《Looking Into the Future of Sass》所译,与大家分享Sass的一些新特性与功能。

Sass两个先进特性与局限性

Sass是一门优秀的CSS预处理器语言,他有很多自己独特的特性,但具有这些独特的特性基础上,他有很多功能又有所限制。今天根据的《Two handy and advanced SASS features and their limitations》一篇文章进行翻译,给大家介绍了Sass中插值和列表两个特性,以及这两个特性的极限性。在文中分享了他在使用Sass的插值和列表的一些发现,同时也想知道你是否碰到在文章所介绍的Sass限制性,以及您又是如何绕过他们的。

Sass中半透明颜色的Mixins

The Sass Way上看到一篇John W. Long写的《Mixins for Semi-Transparent Colors》文章。文章中详细的介绍了如何使用Sass来定义一个半透明颜色的mixins,觉得很有意思,认真学习之后,结合CSS中的半透明,以及Sass中的半透明做了一点总结,与大家分享。

Sass基础——Sass函数

在Sass中除了可以定义变量,具有@extend,%placeholders和Mixins等特性之外,还自备了一系列的函数功能。前面在《Sass基础——颜色函数》一文中主要向大家介绍了Sass函数中有关于颜色函数的功能以及使用。其实在Sass的函数功能中除了颜色函数之外,还具有字符串函数数字函数列表函数Introspection函数以及三元函数等,当然大家还可以根据需求自定义函数

在这篇文章中,我们主要对Sass函数中的字符串函数数字函数列表函数Introspection函数以及三元函数的功能能使用做一些简单的介绍,希望对初学Sass的同学略有帮助。

Sass基础——颜色函数

色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是,色彩能帮你表达某些特定的情感,把用户视线带到特点的地方或者帮助你传达信息。在Web设计中,主要依靠颜色来表达你的色彩。

如果你只是直接丢一堆颜色给用户,他们也不会集中注意力在你的设计上的。色彩很微妙,所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样,色彩也要好好利用才能发挥它的魔力。

但实际中,仅依靠CSS常用的颜色功能并不能迅速帮我们锁定需要的颜色。特别在很多时候,设计师在设计图中并没有明显标注某个控件其他状态颜色值时,我们不得不依靠设计工具,获取相近色。可这种方法并不是理想方法,很多时候让你的颜色(特别对颜色不感冒的同学)偏离你的产品,直接让你无法抓住你的客户。

Sass基础——Rem与Px的转换

remCSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素htmlfont-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。在《Sass基础——PX to EM Mixin和@function》一文中介绍了通过Sass的mixin和function实现px与em如何进行转换计算,今天在这篇文章向大家介绍Sass中px与rem单位互转的实现方法

Sass基础——PX to EM Mixin和@function

CSS单位是一个很意思的东西,到目前为止,CSS的单位不仅仅局限于em,px,pt,com,in...,还出现了新的单位,比如remvwvhvminvmax等等。在CSS-trick有对这些单位进行描述(可以点击这里阅读中文)。在这么多的单位中,其中pxem两者的互转是最令同学们头痛的。简值是一言难尽,理不清呀!今天我们一起来动手探讨如何使用Sass的mixin和function来实现px向em转换。用来解决这个头痛而又麻烦的事情。

SASS基础——SASS Triangle Mixin

SASS基础——十个常见的Mixins》一文中介绍了SASS中常见的十个,当然这些其实对应的就是CSS中常用到的公共样式,例如:设置行内块,水平居中,浮动,以及重置浮动,清除浮动以及图片替换文本和隐藏元素等等。事实上,SASS的不仅仅只做这些简单的工作,只要你原意去想,你会发现,你可以定制很多你熟悉的功能,甚至可以将某些在线样式生成器,定义成一个,实现所需效果。

由在线生成三角工具出发做为思考,结合不同的Sass实现的。最终在BourbonsassCoreMigue Lmota三个基础实现一个全新的,在这个集合了众家之处。仅从代码层看,变得复杂化,但在实际使用上和生成三角的代码都无太多差异化。使用这个可以实现和等效果。

 

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的重要性。那么今天这篇教程,我们将主要介绍和探讨嵌套混合继承三者之间的关系,以及各自的优缺点。

 

页面

返回顶部