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/

时间: 2024-10-18 04:49:03

Campass + Scss ,让我们更优雅的编写CSS的相关文章

使用 Promises 编写更优雅的 JavaScript 代码

你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它们写出更优雅的 JavaScript 代码. 您可能感兴趣的相关文章 开发中可能会用到的几个 jQuery 提示和技巧 精心挑选的优秀jQuery Ajax分页插件和教程 推荐几款很好用的 JavaScript 文件上传插件 精心挑选的优秀 jQuery 文本特效插件和教程 精心挑选12款优秀 jQ

【译】《C# 小技巧 -- 编写更优雅的 C#》原书名《C# Tips -- Write Better C#》

[译]<C# 小技巧 -- 编写更优雅的 C#>原书名<C# Tips -- Write Better C#> 目录 介绍(Introduction) 第一部分:各种小技巧(Part 1: Assorted Tips) 使用 LINQ 合并 IEnumerable 序列(Merging IEnumerable Sequences with LINQ) 备注 本书封面 本书的翻译未经作者授权,仅作学习用途,转载务必保留原书及作者信息.http://dontcodetired.com/

少年,是时候换种更优雅的方式部署你的php代码了

让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 6. 一台服务器发布成功 7. 登录每一台执行一遍发布操作 8. 加班搞定 9. 老板发飙 ... 尤其现在的互联网行业,讲究快速迭代,小步快跑.像bug修复或者小功能的修改几乎每天都发版本,大功能的版本迭代每周也差不多会有一次.相信不少同行们像我上面说的这样发布自己的代码吧.或者可能先进一点,直接

CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立即免费体验容器集群吧!cloud.tencent.com 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chro

怎么让你的Python代码更优雅!

3 个可以使你的 Python 代码更优雅.可读.直观和易于维护的工具. Python 提供了一组独特的工具和语言特性来使你的代码更加优雅.可读和直观.为正确的问题选择合适的工具,你的代码将更易于维护.在本文中,我们将研究其中的三个工具:魔术方法.迭代器和生成器,以及方法魔术. 加vx:tanzhouyiwan 免费领取Python学习资料 魔术方法 魔术方法可以看作是 Python 的管道.它们被称为"底层"方法,用于某些内置的方法.符号和操作.你可能熟悉的常见魔术方法是 __ini

JavaScript 复杂判断的更优雅写法

转发一篇文章,总结的很好: 前提 我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下. 举个例子 先看一段代码 /** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */ const o

【重构.改善既有代码的设计】11、处理概括关系【更优雅的继承】

11.处理概括关系[更优雅的继承] Pull Up Field(值域上移) 两个subclasses 拥有相同的值域.将此一值域移至superclass. Pull Up Method(函数上移) 有些函数,在各个subclass 中产生完全相同的结果.将该函数移至superclass. Pull Up Constructor Body(构造函数本体上移) 你在各个subclass 中拥有一些构造函数,它们的本体(代码)几乎完全一致. 在superclass 中新建一个构造函数,并在subcla

框架基础:ajax设计方案(五)--- 集成promise规范,更优雅的书写代码

距离上一篇博客书写,又过去了大概几个月了,这段时间暂时离开了这个行业,让大脑休息一下.一个人旅行,一个人休息,正好也去完成一个目标 --- 拥有自己的驾照.当然,也把自己晒的黑漆马虎的.不过这一段时间虽然在技术上没有学太多东西,但是在心态上给了自己一个沉淀的机会,感觉自己变得更加沉稳和成熟,感觉这就是自己需要找到的自己,回归自我.好了,废话不多说了,虽然技术上没有学一些新的东西,但是欠的东西还是要补回来的.正如这篇博客,前端Promise规范的实现与ajax技术的集成,当时github上一个用户

C#中的快捷键,可以更方便的编写代码 (转载)

C#中的快捷键,可以更方便的编写代码 CTRL + SHIFT + B 生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL + SHIFT + O 打开项目 CTRL + SHIFT + C 显示类视图窗口 F4 显示属性窗口 SHIFT + F4 显示项目属性窗口 CTRL + SHIFT + E 显示资源视图 F12 转到定义 CTRL + F12 转到声明 CTRL + ALT + J 对象浏览 CTRL + ALT + F1 帮助目录 CTRL + F1 动