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的情况:

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

并且给出了一个例子

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

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

参考资料:

  1. stackoverflow => !default means?
  2. stackoverflow => what does background: transparent url(); do?
  3. sass-documentation
  4. sitepoint

你可能感兴趣的:(bootstrap-sass研究---(1)变量)