Campass + Scss ,让我们更优雅的编写CSS
如果你经常写CSS,你应该会发现传统的CSS编写方式或多或少有些枯燥,不智能? 不优雅? 至少我是这么认为的。
缺陷举例
1. 假设页面中有大部分HTML元素的背景颜色值是一样的, 我们就需要为各个元素加上 background-color:#fff 这样重复的CSS代码,当然,你也可以通过单独定义一个class, 为这个class设定 background-color:#fff, 然后把class应用到你想要到的HTML元素上,如果运用的合理,还算说的过去,否则结果就是你的HTML元素上面可能有很多个class, 在我看来这个很丑陋.
2. 假设你的HTML元素有好多层, 你需要为每层编写一些CSS, 结果可能会是
.div1{ width: 800px;}
.div1 .div1-1{width: 600px;}
.div1 .div1-1 .div1-1-1{width:400px;}
.div1 .div1-1 .div1-1-1 .div1-1-1-1{ width: 200px; }
写到第四层, 我就已经感到有点枯燥了,因为我要重复的去把父元素包含进去, 而且后期也很不好维护
正因为现在的传统方式有种种的缺陷,所以诞生了scss, 参照官网 http://sass-lang.com/ 查看详细的介绍,简单的说,这个就是个编写CSS的框架,通过约定的语法来更智能的编写CSS
使用
1. 因为要依赖于ruby环境,所以如果你用的是Windows系统, 首先请下载 RubyInstaller,, http://www.rubyinstaller.org/
2. 安装完后, 如果你是win 8系统,请通过搜索并运行 ‘command prompt with Ruby‘
3. 命令输入 gem install compass , 表示要安装 compass 框架, compass是个很方便的编写CSS的框架, 稍后再介绍,有兴趣请参见官网 http://compass-style.org/
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。