15个你不得不知道的Chorme dev tools的小技巧
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个很酷的技巧,让你能够更好的改进工作流程。
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个很酷的技巧,让你能够更好的改进工作流程。
Sass是一种CSS预处理语言,当你使用Sass这门语言时,你使用编译程序来转换Sass文件,通常以SCSS文件格式书写然后转换成CSS文件。Sass通过添加方便的函数,变量以及其他类似脚本的助手使CSS能更加快速得书写和更加简单的控制。
起初我躲避Sass是因为它好像是针对程序员的(它的文档到处充斥着程序的专业术语),但是在我学习Sass一段时间后,我发现它不是那么的复杂。它方便的运算和函数会令程序员非常满意,以及它也加入了一些很酷的东西使我们能更快的书写CSS,这使我们的工作变得更高效。
Flexbox让我们对过去无法真正达到的对布局的掌控更进了一层,过去我们浮动、清除浮动,与inline-block
间的空格斗争,强制display:table
,甚至用position:absolute
来撑开内容。现在我们不需要依赖这些解决方案使得内容在不支持伸缩特性的浏览器可见。Flex的特性给我们所以构建的内容增加了一系列重要工具,但不是替代之前存在的东西,而是改进我们如今的构建方式。
虽然语法可能比较混杂,但 Flexbox 还是名不虚传的。它创造的是可伸缩的、有弹性的、可改变视觉顺序的智能盒子。它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置。使用盒模型来工作是非常通用的。
我最近听了JEN Simmons在 Boagworld播客的关于CSS Shapes的采访,虽然我之前已经听说过CSS Shapes好久了,但是我还没有亲自尝试过。因为某些原因,这个采访强迫我坐下来好好看一下CSS Shapes的出色之处(好吧,很大一部分原因是我认为Jen Simmons太帅了,我已经收听她的The Web Ahead一年多了,真的太精彩了)。
有时候,你最意想不到的东西,却能获得最多的关注,正如我发表在CodePen上的多边形狮子的样例。我没有做任何超级棒的代码效果,因为我认为简单的动画效果是很容易理解的,但是最后的结果却是很棒的。在这里,我想要和你们所有人分享这个动画如何以及为什么做出来的。
每次我讲到图像的时候,我都会提到,在可能的情况下,对于位图来说,可缩放矢量图形(SVG)都是最好的选择。上次我给别人提建议的时候,我意识到我没有自己想象中的那么了解SVG。我之前写过一两篇关于SVG的文章,但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章,接下来的几个星期我会介绍一些SVG的基础知识,还会在年尾的时候增加额外的主题来重温这一年讲解的SVG。
CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;
)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过高就会相距甚远,这两种情况都会降低可读性。不过你可能已经知道了这一点。
你也许能够熟练的使用PS对文本进行图像掩埋;一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像,你就可以在你的网站上使用;但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗?好消息是,确实可以!CSS介绍了background-clip
和 mask-image
的属性,或许你可以使用他们来创造相似的效果,就像你用PS创造出来的那样。最重要的是,你也可以使用SVG来进行文本图像剪辑。
在这篇文章中我们将一起深入探讨Sass的变量和变量作用域。变量作用域的描述是根据上下来定义和在哪使用变量。首先,我们将介绍Sass作用域范围。然后,将解释两个用在变量值中标签,这两个标签非常有用。最后将简单介绍可用的函数,用来检查是否存在一个变量。