本篇文章主要介绍了"[FungLeo原创]CSS预编译技术之SASS学习经验小结"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
[FungLeo原创]CSS预编译技术之SASS学习经验小结前言接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是...
[FungLeo原创]CSS预编译技术之SASS学习经验小结
前言
接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些.
虽然现在已经发展到了html5+css3了.CSS也比以前强大太多了.但是这个语言却并没有什么本质性的改变,甚至,都不能算是一门编程语言.
这两年前端行业发展日新月异,大批后端工程师转前端,发现,我擦,这玩意儿真心不好用啊,于是,大量的CSS预编译技术出现了.比较知名的是less和sass.
我是先接触的less,用了一年多,感觉还好.一直没有研究得多深,但是写起来也确实方便.直到去年,来到目前这家公司,要求,全面转入sass.当我正是用sass书写css一个星期之后,我决定,忘记less,因为,实在是太强大了.
sass学习有一个网站很好 sass入门 - sassjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 这个网站全面的提供了sass的各种基础语法.如果想要学习和理解这些语法,去这个网站学习一下即可.
我的这篇博文不是重复上面的网站.那没有任何意义.我要写的,是那个网站没有,但是对你可能有莫大用处的,或者少让你走弯路的内容.感兴趣,那就往下看吧.
sublime text 配置sass环境后,为什么不自动输出一个分号?
我的开发工具是 sublime text 我向大量前端都是使用的这个工具.所以就以这个工具来说.使用 sublime 安装好 sass 插件之后,你会发现,在输入一个属性之后,没有自动输出分号.
默认已经安装了emmet插件了哈
举例:
/* 我输入下面的代码 */tac/* 我期望输出的代码是 */text-align: center;
/* 但是,编辑器输出的是 */text-align: center
这让我很郁闷,以至于我都想要放弃SASS,因为每次都输入一个分号会让我崩溃的.后来我明白到底是为什么了.
因为sass分为两个版本,一个是sass,其特点是使用严格的缩进来控制,省略掉了分号和花括号(肯定是Python程序员的主意-_-);
另一个版本是scss,这个版本,是使用花括号和分号的,更接近我们这些本来就是前端工程师的人的使用习惯.
两种版本是以后缀名来区别的.如 style.sass 和 style.scss
我的建议是,放弃sass格式,全面使用scss格式.于是,你的sublime配置插件,就不能配置 sass插件了,而应该去找 scss 插件.
装上这个插件之后,就一切整好了.
@extend 清除浮动代码
清除浮动代码是在前段工作中需要大量使用的代码.其混入代码的编写如下:
/* 清理浮动代码 */.cf{
zoom:1;
&.cf:before, &.cf:after {content:"";display:table;}
&.cf:after{clear:both;}
}
/* 调用 */.nav{
@extend .cf;
}
通过这样的代码,在需要清理浮动的地方写一下即可.
