拥抱sass,抛弃compass

为什么要用sass

在选择sass之前,我们先说下为什么要使用CSS Preprocessor。

大概两年前,CSS Preprocessor其实没有这么热,而了解sass,less,stylus的人也还没那么多(当时三者占比less还是拥有绝对优势的),但很多时候就是那么duang的一下,然后改变就发生了,就如html5&css3,仿佛一夜之间就遍地开花。当然这其中质变肯定是有道理值得去说道说道的。下面我们一起来对比下css和CSS Preprocessor(以sass为例),了解下其中的优劣。

CSS无层级嵌套机制

因为css无嵌套机制,所以造成层级方面的阅读及折叠方面极为不便,如下代码,使用scss就能更好的管理代码层级关系

// css
.parent{}
.parent .child{}

// scss
.parent{
    .child{}
}

css本身缺少变量机制

举个最简单的例子,每个站点都有个主色,如果没有变量的话,我们只能每次使用都拷贝颜色,当然也有神人是可以把颜色的六位数记住,但多数肯定是记不住。下面以文本色及链接色为例:

// css
body{
    color:#333;
}
a{
    color: #188eee;
}
.dark a{
    color: #333;
}
.dark a:hover{
    color: #188eee;
}

有了变量呢,那就简单了,直接定义一个变量,然后需要的时候调用变量即可:

// scss
$textColor: #333 !default;
$lickColor: #188eee !default;

body{
    color:$textColor;
}
a{
    color: $lick-color;
}
.dark a{
    color: $textColor;
}
.dark a:hover{
    color: $lickColor;
}

注:css变量已经正在开发中,现在的火狐其实已经支持最新的css变量了,而且比所有的CSS Preprocessor都好用,感兴趣的同学可以去尝个鲜。

@import不是我们所期望的功能

随着业务功能增加及复杂性增强,多人员合作及组件开发模式是必然的。而现有的CSS的[@import](/user/import)与我们所要的[@import](/user/import)不是一个概念。为了表示两者的区别,我们直接在page.scss中导入一个css文件和一个scss文件:

page.scss

[@import](/user/import) "reset.css";
[@import](/user/import) "mod-a";
p{
  background: #0982c1;
} 

_mod-a.scss

//_mod-a.scss
//-------------------------------
.hello {
  color: #eee;
}

最终编译出来的page.css文件:

[@import](/user/import) "reset.css";
.hello {
  color: #eee;
}
p{
  background: #0982c1;
}

可以看到,[@import](/user/import) "reset.css"没有发生改变,而moda-a的scss文件则被合进了page.css,这才是我们需要的结果,需要的时候调用想用的scss文件,然后最终合并到一个css文件中。

对可重用的代码缺少重复使用机制

css对于相同或相似的代码,除了一遍遍的拷贝复制或组合申明之外,不可以定义一些规则或函数,去简单重复使用,如下:

// 组合申明
.center-block,
.container{
    margin-left: auto;
    margin-right: auto;
}
.container{
    margin-bottom: 20px;
    width: 1200px;
}

// 拷贝使用
.fixed-top{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
.fixed-bottom{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

而使用scss之后则如下:

// %,解析后组合申明样式
%center-block{
    margin-left: auto;
    margin-right: auto;
}

.center-block{
    [@extend](/user/extend) %center-block;
}
.container{
    [@extend](/user/extend) %center-block;        
    margin-bottom: 20px;
    width: 1200px;
}

// [@mixin](/user/mixin), 解析后拷贝样式 
[@mixin](/user/mixin) fixed($pos: 0) {
    position: fixed;
    left: 0;
    right: 0;
    [@if](/user/if) $pos == bottom {
        bottom: 0;
    }
    [@else](/user/else) {
        top: $pos;
    }
}
.fixed-top{
    [@include](/user/include) fixed;
}
.fixed-bottom{
    [@include](/user/include) fixed(bottom);
}

除此之外,CSS Preprocessor还有条件判断,循环等高大上的东西,这些都是css目前不具备的,当然CSS也正在一步步变化,为更好而革新,相信在不久的将来,CSS也会duang的一下,给你眼前一亮。

说完为什么要选择CSS Preprocessor,接下来我们说下为什么选择sass吧。

其实几个CSS Preprocessor的基本功能都差不多,都能胜任日常的开发,但如果是做基础的css框架及组件开发的话还是sass略强点。

  1. sass的语法不容易混淆,@mixin,%,@function定义各种用途,很清楚明白
  2. 原先被人诟病的sass的变量机制也完善了,!default变量和!global变量双剑合璧,解决一切所需。
  3. 自从map类型数据出现后,sass处理数据方面更加突出。
  4. sass的函数多多,应有尽有,各种选择器函数,颜色函数,判断条件,循环函数等,是你构建基础框架的得力助手

总之,就目前来说sass是个很好的选择。当然也许有一天less或其他的会超越它,或者直接到了某一天css本身就有了这些功能,根本不需要这些CSS Preprocessor。而所有这些都是有极可能的。

为什么要抛弃compass

用雕爷的一个字评价compass就是——学习成本比较高,更新太慢,东西太多,实用的却很少。

作为以sass为基础构建的css框架,compass还是非常优秀的,其思想及设计都值得借鉴。但是鉴于它的更新频率及里面的css代码,还是不得不吐槽下:

跟不上sass的更新节奏

sass之所以能够在2年内反超less,成为现在的首选,就是因为从版本3.2.0之后,不断更新,开发并优化更好的功能,吸引更多的关注。而compass却迟迟跟不上sass的脚步,严重影响sass的体验。

跟不上css的脚步

看下compass的重置,html5的几乎没有,现在框架几乎都是normalize+reset的天下了;再看下其inline-block的mixin居然还有display: -moz-inline-stack;,虽然穿着的是sass前沿的华衣,走的却是怀旧风格,怎么着都有点诡异。

CSS3 mixin

相信很多人用compass是奔着这烦人的css3前缀来的,可是弱弱的说句,它也过时了,现在都是基于can i use的数据来自动生成前缀或兼容了,各大自动化工具如grunt/gulp都有其相应的插件autoprefixer,就算是不用这些自动的前缀,也有很多专门针对css3前缀的scss文件供调用,如css3-scss

sprite自动生成雪碧图

当然还有更大部分使用者是朝着这个功能来的,如果你仅是为了使用这个功能呢,替代的工具同样有的是,同样配置下自动化工具生成sprite分分钟搞定。

所以你为什么还在坚持使用compass?

最后问题来了,如果选择了sass,抛弃了compass,用哪个做基础的框架比较合适?

请听下回分解。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏

消失的魔术:隐藏在js引用和原型链背后的超级能力

js这门语言有很多诟病,然而很多被无视的点,构成了js最为美妙的语言特性。这篇文章将带你走进魔术般的引用型数据类型和原型链背后,寻找那些被遗忘的超能力。并且,基...

862
来自专栏申龙斌的程序人生

零基础学编程021:获取股票实时行情数据

春节期间重写了“笑来投资演练程序1.0版”这个程序,可以每个月自动更新几支股票的行情数据。程序的功能不复杂,但是编程新手想实现它仍有相当的困难。为了短时间内完成...

40912
来自专栏怀英的自我修炼

怀英漫谈3-百度Echarts中日期控件的使用总结

你好, 今天下午在用百度的Echarts做一个日历图的效果,其中跌跌碰碰遇到了几个问题,好在最终都解决了,今天想跟你聊聊这几个问题。 本篇偏编程,可以跳至最后看...

3639
来自专栏java一日一条

关于 Unicode 每个程序员应该知道的 5 件事

上周末,曝出了山寨WhatsApp Android应用程序的新闻,看似由相同的开发者提供作为了官方应用程序。欺诈分子通过在开发者名字中包含unicode非输出空...

652
来自专栏极乐技术社区

微信小游戏初体验

前言 上周【跳一跳】小游戏刷遍了朋友圈,也代表了微信小程序拥有了搭载游戏的功能(早该往这方面发展了,这才是应该有的形态嘛)。作为一个前端er,我的大刀早已经饥渴...

9447
来自专栏HelloCode开发者学习平台

iOS开发-KVC从使用到原理详解(1)

相比往年的iOS招聘,相比之前波涛汹涌,这会已经是相对风平浪静.但是实际上这样的风平浪静只不过是由于无法坚守的iOS 开发者相继退出而已.但是该有的竞争...

633
来自专栏前端儿

做网站,乱码?应该选用什么编码?GB2312 ? UTF-8 ?

================================================起===============================...

1852
来自专栏阮一峰的网络日志

Javascript诞生记

1. 二周前,我谈了一点Javascript的历史。 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的。 只有了解这段历史,才能明白...

3228
来自专栏IT大咖说

关于 Unicode 每个程序员应该知道的 5 件事

摘要 Unicode是一个令人难以置信的有用标准,它能使全世界的计算机、智能手机和智能手表以同样的方式显示相同的信息。不幸的是,它的复杂性使它成为了欺诈分子和恶...

2677
来自专栏tkokof 的技术,小趣及杂念

Flash小品之颜色解析

    Flash小品之颜色解析       不知不觉已经用了一阵子的AS3,渐渐的对Flash有了不少好感,从一个游戏爱好者的角度出发,我个人更喜欢将F...

851

扫码关注云+社区