现代 CSS

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转换。用来解决这个头痛而又麻烦的事情。

《献给你,我深爱的ECMAScript》结束篇

结束篇该说点什么呢?

终于第一版的beta结束啦。。。。 也许还是那份热情 & 冲动让我完成了这个系列。

感谢每一个来看过这个《献给你,我深爱的ECMAScript》系列的同学。

最想感谢w3cplus的所有人,还有大漠,没有w3cplus这个平台,很多人可能只能从我的博客里面看到一些零散的东西。

最近看电视剧,有一个很有意思的话题:10年后你在干什么,会怎样

《献给你,我深爱的ECMAScript》之Array篇

本文主要说说ECMAScript的Array相关

《献给你,我深爱的ECMAScript》之String篇

本文主要说说ECMAScript6中新引入的String的api

第一个:startsWith

从语义化上不难知道:是判定某个指定的字符串是否从某个子字符开始的。

语法:

  var startsWith = str.startsWith(searchString [,position]);  

示例:

《献给你,我深爱的ECMAScript》之Number篇

本文主要说说ECMAScript6 Number中新引入的几个api:

先来一个「题外问题」:请简短地说说你认识的NaN?

 

思考了片刻,我先来说一下我的一些认知:

   1. ECMAScript 1引入的

   2. 全局对象的属性

   3. 在高级浏览器是只读属性

   4. 与任何值都不相等,包括自己

那如何判定参数是否是NaN?

《献给你,我深爱的ECMAScript》之集合篇

本文主要说说ECMAScript6 集合中新引入的Map和Set

以往我们用的比较多的就是Array或者Object来存取一些值

那什么是Map?

先看一段代码示例:

页面

返回顶部