重新定义Css在编程界地位的它--sass_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 08:57:34
原創
987 人瀏覽過

CSS编写是前端很基础也很重要同时也是很大一部分的工作,作为前端三技术之一的CSS在前端乃至web中占据了举足轻重的地位。自从产生了div+css布局之后,CSS所扮演的角色就变得越来越重要了,当CSS3.0登上历史舞台之后,CSS似乎就变得异常火爆了,受到了前所未有的关注。

但是,CSS并不算编程语言,仅仅是一种描述型语言而已,由于编写简单,无需任何逻辑思维能力,甚至可以完全不需要编程基础就可以编写CSS代码,所以CSS从业者几乎从未收到过重视,在一个研发团队中也几乎处于最低的地位,理由很简单:它没有技术含量。

在今天,web应用司空见惯,CSS的身影更是随处可见。面对越来越普遍和越来越复杂的web应用,CSS仅仅局限于表现型语言似乎已经无法满足我们开发的需求了,越来越多的场景不仅仅需要CSS来修饰网页,更希望它能拥有计算和逻辑的能力。所以,聪明的同行们经过不断的努力,创造了一种新的表现型语言--sass。它是一种拥有js一样可以定义函数和声明变量的CSS语言,拥有CSS一样的超级简单的语法,只要写过CSS的人,几乎可以不费吹灰之力的学会sass这门牛逼的语言。sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

sass可以跟css完全一样的写法,只是文件后缀将变成.sass或者.scss。只是浏览器默认不识别sass的代码,所以需要编译成css文件之后才能供浏览器识别。既然无法识别,那就自然需要我们将其编译成css文件。下面我为大家介绍一下sass的几大特点和如何将其编译成CSS文件。

1.sass中可以定义变量,方便统一修改和维护

2.比如:

$color:#333;

body{

color:$color

}

这样写有一个好处,就是可以批量修改某一个统一的配置。

3.sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

比如:

html{

font-size:12px;

body{

height:auto;

div{

color:#ccc;

}

}

}

4.sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import

5.sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

6.sass可通过@extend来实现代码组合声明,使代码更加优越简洁。

7.sass可进行简单的加减乘除运算等。

8.sass中集成了大量的颜色函数,让变换颜色更加简单。

那么如何编译成css文件呢?

目前基本有两种方案:

第一种:

1.在本机安装sass,SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

2.如果已经安装好了ruby,只需要在终端执行gem install sass,如果你用的是Mac,可以省略这一步,因为Mac本身就自带ruby和sass等。

3.执行sass test.sass test.css

这句命令的意思是将test.sass文件编译成test.css文件。

第二种:

借助自动化工具,比如grunt和gulp。gulp这个方式我在微信公众号前面的课程中已经有讲过,此处不再讲解。

如果大家对sass有兴趣,可以加我微信私信我,如果人数超过20人,我将以视频演示的方式专门对感兴趣的人进行讲解。

如果想加我微信,可以在公众号回复关键字“私聊”获取我的微信号。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板