scss学习

1.变量声明

$heighlight-color:#f90

$basic-border:1px soild black

不过，sass并不想强迫任何人必定使用中划线或下划线，因此这两种用法相互兼容。用中划线声明的变量可使用下划线的方式引用，反之亦然。这意味着即便compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用：

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}复制代码

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}复制代码

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}复制代码

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}复制代码

2. 嵌套CSS 规则;

css中重复写选择器是很是恼人的。若是要写一大串指向页面中同一块的样式时，每每须要 一遍又一遍地写同一个ID：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }复制代码

像这种状况，sass可让你只写一遍，且使样式可读性更高。在Sass中，你能够像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}复制代码

/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }复制代码

大多数状况下这种简单的嵌套都没问题，可是有些场景下不行，好比你想要在嵌套的选择器 里边马上应用一个相似于：hover的伪类。为了解决这种以及其余状况，sass提供了一个特殊结 构&。

article a {
  color: blue;
  &:hover { color: red }
}复制代码

2-3. 子组合选择器和同层组合选择器：>、+和~;

上边这三个组合选择器必须和其余选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

article section { margin: 5px }
article > section { border: 1px solid #ccc }复制代码

你能够用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的全部命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

在下例中，你能够用同层相邻组合选择器+选择header元素后紧跟的p元素：

header + p { font-size: 1.1em }复制代码

你也能够用同层全体组合选择器~，选择全部跟在article后的同层article元素，无论它们之间隔了多少其余元素：

article ~ article { border-top: 1px dashed #ccc }复制代码

这些组合选择器能够绝不费力地应用到sass的规则嵌套中。能够把它们放在外层选择器后边，或里层选择器前边：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}复制代码

sass会如你所愿地将这些嵌套规则一一解开组合在一块儿：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }复制代码

在sass中，不只仅css规则能够嵌套，对属性进行嵌套也能够减小不少重复性的工做。

2-4. 嵌套属性;

在sass中，除了CSS选择器，属性也能够进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，可是要反复写border-styleborder-widthborder-color以及border-*等也是很是烦人的。在sass中，你只需敲写一遍border：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}复制代码

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套同样，sass会把你的子属性一一解开，把根属性和子属性部分经过中划线-链接起来，最后生成的效果与你手动一遍遍写的css样式同样：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}复制代码

对于属性的缩写形式，你甚至能够像下边这样来嵌套，指明例外规则：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}复制代码

这比下边这种同等样式的写法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}复制代码

属性和选择器嵌套是很是伟大的特性，由于它们不只大大减小了你的编写量，并且经过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

即使如此，随着你的样式表变得愈来愈大，这种写法也很难保持结构清晰。有时，处理这种大量样式的惟一方法就是把它们分拆到多个文件中。sass经过对css原有@import规则的改进直接支持了这一特性。

3. 导入SASS文件;

css有一个特别不经常使用的特性，即@import规则，它容许在一个css文件中导入其余css文件。然而，后果是只有执行到@import时，浏览器才会去下载其余css文件，这致使页面加载起来特别慢。

sass也有一个@import规则，但不一样的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着全部相关的样式被概括到了同一个css文件中，而无需发起额外的下载请求。另外，全部在被导入文件中定义的变量和混合器（参见2.5节）都可在导入文件中使用。

使用sass的@import规则并不须要指明被导入文件的全名。你能够省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你彻底能够随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。举例来讲，@import"sidebar";这条命令将把sidebar.scss文件中全部样式添加到当前样式表中。

本节将介绍如何使用sass的@import来处理多个sass文件。首先，咱们将学习编写那些被导入的sass文件，由于在一个大型sass项目中，这样的文件是你最常编写的那一类。接着，了解集中导入sass文件的方法，使你的样式可重用性更高，包括声明可自定义的变量值，以及在某一个选择器范围内导入sass文件。最后，介绍如何在sass中使用css原生的@import命令。

一般，有些sass文件用于导入，你并不但愿为每一个这样的文件单独地生成一个css文件。对此，sass用一个特殊的约定来解决。

当经过@import把sass样式分散到多个文件时，你一般只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不须要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名如下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用做导入。当你@import一个局部文件时，还能够不写文件的全名，即省略文件名开头的下划线。举例来讲，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

局部文件能够被多个不一样的文件引用。当一些样式须要在多个页面甚至多个项目中使用时，这很是有用。在这种状况下，有时须要在你的样式表中对导入的样式稍做修改，sass有一个功能恰好能够解决这个问题，即默认变量值。

3-2. 默认变量值;

通常状况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}复制代码

在上边的例子中，超连接的color会被设置为red。这可能并非你想要的结果，假如你写了一个可被他人经过@import导入的sass库文件，你可能但愿导入者能够定制修改sass库文件中的某些值。使用sass的!default标签能够实现这个目的。它很像css属性中!important标签的对立面，不一样的是!default用于变量，含义是：若是这个变量被声明赋值了，那就用它声明的值，不然就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}复制代码

在上例中，若是用户在导入你的sass局部文件以前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操做就无效。若是用户没有作这样的声明，则$fancybox-width将默认为400px。

接下来咱们将学习嵌套导入，它容许只在某一个选择器的范围内导入sass局部文件。

3-3. 嵌套导入;

跟原生的css不一样，sass容许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。举例说明，有一个名为_blue-theme.scss的局部文件，内容以下：

aside {
  background: blue;
  color: white;
}复制代码

而后把它导入到一个CSS规则内，以下所示：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容彻底同样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}复制代码

被导入的局部文件中定义的全部变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样咱们就能够经过嵌套导入只对站点中某一特定区域运用某种颜色主题或其余经过变量配置的样式。

有时，可用css原生的@import机制，在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。

3-4. 原生的CSS导入;

因为sass兼容原生的css，因此它也支持原生的CSS@import。尽管一般在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种状况下会生成原生的CSS@import，尽管这会形成浏览器解析css时的额外下载：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（好比http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

这就是说，你不能用sass的@import直接导入一个原始的css文件，由于sass会认为你想用css原生的@import。可是，由于sass的语法彻底兼容css，因此你能够把原始的css文件更名为.scss后缀，便可直接导入了。

文件导入是保证sass的代码可维护性和可读性的重要一环。次之但亦很是重要的就是注释了。注释能够帮助样式做者记录写sass的过程当中的想法。在原生的css中，注释对于其余人是直接可见的，但sass提供了一种方式可在生成的css文件中按需抹掉相应的注释。

5. 混合器;

若是你的整个网站中有几处小小的样式相似（例如一致的颜色和字体），那么使用变量来统一处理这种状况是很是不错的选择。可是当你的样式变得愈来愈复杂，你须要大段大段的重用样式的代码，独立的变量就没办法应付这种状况了。你能够经过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其余的CSS @标识符，好比说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就能够轻易地经过引用这个名字重用这段样式。下边的这段sass代码，定义了一个很是简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}复制代码

而后就能够在你的样式表中经过@include来使用这个混合器，放在你但愿的任何地方。@include调用会把混合器中的全部样式提取出来放在@include被调用的地方。若是像下边这样写：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：复制代码

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}复制代码

在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius所有来自rounded-corners这个混合器。这一节将介绍使用混合器来避免重复。经过使用参数，你可使用混合器把你样式中的通用样式抽离出来，而后轻松地在其余地方重用。实际上，混合器太好用了，一不当心你可能会过分使用。大量的重用可能会致使生成的样式表过大，致使加载缓慢。因此，首先咱们将讨论混合器的使用场景，避免滥用。

5-2. 混合器中的CSS规则;

混合器中不只能够包含属性，也能够包含css规则，包含选择器和选择器中的属性，以下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}复制代码

当一个包含css规则的混合器经过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}复制代码

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子以下代码:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}复制代码

混合器中的规则甚至可使用sass的父选择器标识符&。使用起来跟不用混合器时同样，sass解开嵌套规则时，用父规则中的选择器替代&。

若是一个混合器只包含css规则，不包含属性，那么这个混合器就能够在文档的顶部调用，写在全部的css规则以外。若是你只是为本身写一些混合器，这并无什么大的用途，可是当你使用一个相似于Compass的库时，你会发现，这是提供样式的好方法，缘由在于你能够选择是否使用这些样式。

接下来你将学习如何经过给混合器传参数来让混合器变得更加灵活和可重用。

5-3. 给混合器传参;

混合器并不必定总得生成相同的样式。能够经过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是能够赋值给css属性值的变量。若是你写过JavaScript，这种方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}复制代码

当混合器被@include时，你能够把它看成一个css函数来传参。若是你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }复制代码

当你@include混合器时，有时候可能会很难区分每一个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass容许经过语法$name: value的形式指定每一个参数的值。这种形式的传参，参数顺序就没必要再在意了，只须要保证没有漏掉参数便可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}复制代码

尽管给混合器加参数来实现定制很好，可是有时有些参数咱们没有定制的须要，这时候也须要赋值一个变量就变成很痛苦的事情了。因此sass容许混合器声明时给参数赋默认值。

5-4. 默认参数值;

为了在@include混合器时没必要传入全部的参数，咱们能够给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值能够是任何有效的css属性值，甚至是其余参数的引用，以下代码：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}复制代码

若是像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

混合器只是sass样式重用特性中的一个。咱们已经了解到混合器主要用于样式展现层的重用，若是你想重用语义化的类呢？这就涉及sass的另外一个重要的重用特性：选择器继承。

6. 使用选择器继承来精简CSS;

使用sass的时候，最后一个减小重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器能够继承为另外一个选择器定义的全部样式。这个经过@extend语法实现，以下代码:

//经过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}复制代码

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的全部样式。以class="seriousError" 修饰的html元素最终的展现效果就好像是class="seriousError error"。相关元素不只会拥有一个3px宽的边框，并且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，由于这些都是在.error里边定义的样式。

.seriousError不只会继承.error自身的全部样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，以下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}复制代码

如上所示，在class="seriousError"的html元素内的超连接也会变成红色和粗体。

本节将介绍与混合器相比，哪一种状况下更适合用继承。接下来在探索继承的工做细节以前，咱们先了解一下继承的高级用法。最后，咱们将看看使用继承可