现代 CSS

Sass

理解Sass的list

Sass中的List是一个让人可爱又可恨的东西。主要是他的语法太宽松,你几乎可以做任何你想做的事情。如果要想更好的使用好Sass语言中的List功能,我们就必须的深入了解他。Hugo写了几篇教程,其深入的培析了Sass的List功能,以及其使用方法。而在Sass的社区中对List的功能讨论也是相当的激烈。这些天我也一直在阅读这几篇文章,想让自己能更好的理解Sass中的List功能。今天根据这几篇文章,对List功能的介绍做了一些翻译与整理。

IcoMoon+@font-face+Sass制作Icons

自从CSS3的@font-face属性的出现,使用@font-face制作ICON变得越来越流行,使用的频率也越来越高,在很多网站上都能见到他们的影子。随着IcoMoon的在线生成工具的出现,可以使用IcoMoon制作自己你自己的ICON。今天阅读了jaydenseric写的《FUN WITH SASS & FONT ICONS》教程,介绍了如何使用Sass和结合制作字体图标。实在是强大而又有意思,自己动手操作了一回,准备向大家介绍一下,我自己是如何使用IcoMoon@font-faceSass三者结合在一起,制作出自己需要的字体图标。

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三个基础实现一个全新的,在这个集合了众家之处。仅从代码层看,变得复杂化,但在实际使用上和生成三角的代码都无太多差异化。使用这个可以实现和等效果。

 

页面

返回顶部