bootstrap-sass研究---(1)变量

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

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

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

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

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

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

顺便一提!important,千万别混起来哦（不过我很少见到）。

$headingsFontFamily:  inherit !default; // empty to use BS default, $baseFontFamily

使用浏览器默认的样式，之前在想是不是inherit多此一举？因为css中父元素的样式在大多数情况下是会自动覆盖下来的，但是考虑到总有一些奇怪的情况，这是一个增加它比重(weight,不知道叫比重是不是合适？) 的一个很好的方式。当然inherit也不是能继承每个样式的，想了解的去查下文档。

$tableBackground:       transparent !default; // overall background-color

transparent是初始值，何必再去定义一下 ? 下面的参考资料里2号来自stackoverflow，提到了这个属性make-sense的情况：

不使用缩写方式，直接定义background-color属性
使用它来覆盖其他的样式

并且给出了一个例子

body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }

当然还有可读性，防止浏览器bug等原因，作者究竟是基于哪种考虑，我还不知道啊。

当然我们也一定要熟悉sass所内建的一些方法

$btnBackgroundHighlight:            darken($white, 10%) !default;
$btnWarningBackground:              lighten($orange, 15%) !default;

这两个是一伙的，加深和变浅。它们是用ruby实现的。

def darken(color, amount)
  _adjust(color, amount, :lightness, 0..100, :-, "%")
end

大家感兴趣可以继续挖掘。

$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 20%) !default;

还有这个，文档中的解释是

Changes the hue of a color while retaining the lightness and saturation. Takes a color and a number of degrees (usually between -360deg and 360deg), and returns a color with the hue rotated by that value.

在维持饱和度和亮度的情况下改变一个颜色的色调（有点绕是吧？google一下会感觉好点）。你可以设定的值是-360~360度之间。这个例子里面用的是百分比。

还有percentage方法，是将数字转换成百分比
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;

它的源代码也挺易懂的

# File '/var/www/sass-pages/.sass/lib/sass/script/functions.rb', line 1158
def percentage(value)
  unless value.is_a?(Sass::Script::Number) && value.unitless?
    raise ArgumentError.new("#{value.inspect} is not a unitless number")
  end
  Sass::Script::Number.new(value.value * 100, ['%'])
end

差不多把基础打好了，我们休息一下继续研究吧！

Bootstrap-sass研究---(1)变量

参考资料:

Comments

黄彬彬