SCSS

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揭秘之@if,@for,@each

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

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

  1. sass揭秘之变量
  2. sass揭秘之@mixin,%,@function

这篇文章关键是对sass判断或循环的语法熟悉下,至于逻辑这东西,和其他的语言如js,php什么的是一样一样的,没什么说头。经过前两篇的积累,也就不需要那么啰嗦了,所以只写scss代码。现在你就可以想想css如果用上这些东西会是什么样子的呢?

sass揭秘之@mixin,%,@function

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你带来疑惑的感觉。

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

sass揭秘之变量

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

变量对于一个程序员来说非常的熟悉,但对于样式这一块还是很新的一个概念。我们所知道的变量有全局变量,局部变量。但在SASS中这个概念对于刚开始sass的人,也许其最大的抱怨就是sass的变量了,尤其是那些了解less变量的,更是会说sass的变量做得不如less的变量好,less中有明显的全局变量和局部变量之分,但是到sass这边来,好像有点乱了,分不清了。其实不管sass的变量还是less变量都是有其设计的原理的,有着不一样的科学性,下面我们简单来了解下。

 

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

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

 

SASS基础教程——SASS基本语法与特性

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

当你想真正走入SASS的时候,个人建议您能按照前面几篇文章,在你的电脑中构建好SASS的环境,包括如何安装环境、安装SASS、调试SASS以及编译SASS。或许正因为前期有这么多事情要做,很多同学不敢轻意的踏入,其实没有大家想得那么复杂,不管是在Window下还是在Mac OS X下,这些都是非常简单的。

SASS编译

SASS的出现让CSS变得更加有意思。至于SASS是什么?就不在做更多的阐述,因为她并不是一个新鲜的产物,现在在互联网上可谓是铺天盖地。如果你实在想知道SASS是什么?那你只要简单得知道他是CSS预处理器语言的一种。

SASS在CSS的基础上做了一些扩展,使用SASS你可以使用一些简单的编程思想进来编写CSS。比如,SASS中可以定义变量、混合、嵌套以及函数等功能。只不过SASS不像CSS,可以直接运用到项目中,如果你需要将样式运用到项目中,有一个步骤是必须经过的——SASS转译成CSS。

页面

返回顶部