origin source from css-tricks

尽管名字听起来很有趣，魔力数是一个坏事情。他是一种老的“未命名数字常量”的学院派 处理方法。因此，一些可能是对样式至关重要的数字“扑通”沉进代码里，但是却对那些不怎么熟悉这部分代码的人来说，十分难去理解为什么去这么做。CSS 和未命名常量一起载入进来，但是他们通常和其他样式成对出现，而且有上下文关联，所以看来有点神秘。尽管我们一直能看到CSS中的魔力数，但是他们还是不好的。

CSS中的魔力数通常在某些特定的场景下生效，但是很脆弱，换了个场景他很就很容易失效。他们通常和字体在某种程度上有关。他们通常被一个只在自己的浏览器中，理想环境下测试的人创造。让我们看一些例子来让我们了解他们究竟是什么，并且希望能在未来避免他们。

看看这个tab的例子：

Sass将css几乎变成了一个编程语言，虽然平时几乎用不到它编程语言的特性。但是了解一下还是十分有趣的。

1 这个是类似命名空间 text:

1
2
3
4
5
6

.btn {
    text: {
       decoration: underline;
       transform :lowercase;
   }
}

这个scss会被编译成为

1
2
3
4

.btn{
   text-decoration: underline;
   text-transform :lowercase;
}

这是一本关于失败者的书，看完了好久都不知道该说些什么。

无一例外，书中论及的人物，他们要么晚节不保，家人遭难，要么郁郁寡欢，始终在纷争。

当朝皇上是万历皇帝。
皇帝只是一个牌位，这句话就足以说明了万历的尴尬。

如果你的日常开发工作也总在linux下的话，你肯定也惆怅过用什么输入法，windows总有些东西值得留恋，迅雷和输入法。如果说迅雷可以戒的话，那么输入法就是一种永远的痛了，不过还好，拯救世界的中州韵等了我们很久了。

项目地址在 这里
具体的介绍可以看 这个,这位仁兄已经写得够好了，就不再多费笔墨了。

如果你是ubuntu12.10以上的话，直接sudo apt-get install ibus-rime就可以了

如果是版本下的话，可以更新一下自己的源，或者按照项目介绍里面的方式对应升级，然后就可以得到超级快速而且智能，并且没有烦心广告的有节操的输入法。

按下ctrl+` （波浪符）就可以选择具体的输入设置，将繁体改成明月中文简体，享受吧。

当然windows下诨名是小狼豪，而mac下就是大名鼎鼎的鼠须管了，不过他们只是换了个马甲而已。

这年头肯为 linux 平台做输入法的我感觉都是好人。

前言：这是一个系列，前面还有
Bootstrap-sass研究—预备篇：css选择器
Bootstrap-sass研究—(1)变量

接下来要讲的是响应式设计，我们先跳过mixin，原因是里面的方法太多很难概括，有必要的时候分别再谈就好。
响应式设计大家可能也都有所耳闻，wikipedia上的解释是：

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

简而言之，就是通过设置使得网站在不同的终端上都拥有最佳的用户体验。

好了，了解了下概念，我们继续看代码。

首先要赞一下bootstrap-sass的结构，真的是非常非常的清晰，极其的友好。

1
2

/vendor/assets/stylesheets/bootstrap-responsive.scss
@import "bootstrap/responsive";

通过它的提示我们再找到

1
2
3
4
5
6
7
8

/vendor/assets/stylesheets/bootstrap/responsive.scss
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
@import "bootstrap/responsive-utilities";
@import "bootstrap/responsive-1200px-min";
@import "bootstrap/responsive-768px-979px";
@import "bootstrap/responsive-767px-max";
@import "bootstrap/responsive-navbar";

这里我删掉了一些注释，根据文件提示我们知道我们要做的事情与上面提到有紧密的联系，变量我们看过了，mixin我们先略过，那么接下去比较重要的就是
@import "bootstrap/responsive-utilities";这个文件。

让我们继续深入

之前有个预备篇，如果css选择器不是太了解的可以去看看。

先从github上clone下整个项目，方便研究。

首先打开stylesheets/bootstrap/_variable.scss这个文件，我们看看这个项目的基础 。

一开始是一组颜色的设置，是针对整个项目的全局变量，首先是一组常用的颜色，这个没什么特别的，但是我们注意到

1
2

$blue:                  #049cdb !default;  //!default代表什么呢？
$blueDark:              #0064cd !default;

我去查了文档，文档给出了很清晰的解释，!default让当前的变量拥有一个比较低的优先级，如果这个变量之前就定义过，那么就使用之前的定义。文档中还特别提醒，null也会被当成没有定义过。

周末在家研究了一下bootstrap-sass 的源代码，发现自己对于选择器还不是很明白。 做了一些笔记和大家分享。

1. ^ => start with

1
2
3

a[href^="http://"] {
    color: green;
}

a[href^="http://"]的意思就是：如果html中有a[href=… ]这样的元素，并且href后是以http为开头，匹配它，然后你就可以针对其写专门的css.