Hexi Flexi Grid Layout Grid布局

前端技术 - Sass

悦读人生2018-2-3 19:46:22

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中,我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局,但这些在实际的布局中使用场景并不常见。最近@vmcreativeHexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

理解Sass的list

前端技术 - Sass

老土2017-9-26 17:19:23

Sass中的List是一个让人可爱又可恨的东西。主要是他的语法太宽松,你几乎可以做任何你想做的事情。如果要想更好的使用好Sass语言中的List功能,我们就必须的深入了解他。Hugo写了几篇教程,其深入的培析了Sass的List功能,以及其使用方法。

SASS基础: SASS Triangle Mixin

前端技术 - Sass

一帘幽梦2017-9-26 15:35:43

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

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

前端技术 - Sass

一帘幽梦2017-9-26 15:08:24

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

Sass揭秘之@mixin, %, @function

前端技术 - Sass

一帘幽梦2017-9-26 15:00:26

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

Sass变量

前端技术 - Sass

一帘幽梦2017-9-26 14:53:07

刚开始sass的人,也许其最大的抱怨就是sass的变量了,尤其是那些了解less变量的,更是会说sass的变量做得不如less的变量好,less中有明显的全局变量和局部变量之分,但是到sass这边来,好像有点乱了,分不清了。其实不管sass的变量还是less变量都是有其设计的原理的,有着不一样的科学性,下面我们简单来了解下。

理解SASS的嵌套, @extend, %Placeholders 和 Mixins

前端技术 - Sass

一帘幽梦2017-9-26 14:33:29

在《SASS基础教程——SASS基本语法与特性》文中主要介绍了SASS的基本语法和特性。简单的知道SASS具有四个基本特性:变量Variables嵌套Nesting混合Mixins继承Selector Inheritance。其实这四种特性中的嵌套、混合和继承是有一种千丝万缕的关系,甚至会让初学者理不清,这也从侧面也说明了这三者在SASS的重要性。那么今天这篇教程,我们将主要介绍和探讨嵌套混合继承三者之间的关系,以及各自的优缺点。

Sass基本语法与特性

前端技术 - Sass

一帘幽梦2017-9-26 14:28:38

前一段时间,一直在聊SASS的环境、安装、调试以及转译等相关问题。但一直未真正的切入SASS是如何使用的。我在想,更多的同学其关注点还是如何使用SASS?如何在项目中运用SASS?那么从这篇文章开始,我们一起来走进SASS。

Sass调试

前端技术 - Sass

一帘幽梦2017-9-26 14:24:34

大家都知道几大主流浏览器对CSS的调试都非常方便,特别是通过Firebug这样的浏览器插件,更是让大家爱得没法说了。那么我们玩SASS能不能像玩CSS一样,通过浏览器的开发者工具,直接调试SASS呢?

Sass编译

前端技术 - Sass

一帘幽梦2017-9-26 14:20:31

本文主要介绍了SASS在实际使用中如何配置SASS环境以及SASS文件的转译方式。完成了使用SASS编译项目的第一步。具备这些基础知识之后,我们就可以深入学习SASS的基本知识。并且深入的学习SASS和使用SASS来制作自己喜欢的项目。希望这篇文章对大家学习和运用SASS有所帮助。

Sass新手指南

前端技术 - Sass

一帘幽梦2017-9-26 14:12:57

本文根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass,以及作者相关信息。

返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验