Sass快速学习掌握

Sass

学习Sass为的是要紧跟技术流行趋势，提高项目组织与维护。Sass中增加了规则、变量、继承等特性。大大的提高了css的可编辑性与维护性。

• 首先我们最需要用的就是使用变量

sass最重要的一个特性就是它为css引入了变量，你可以反复的使用css属性值
例如你的项目现在需要把主题色改一下，那么在没有sass的时候你只能一个颜色一个颜色的改，现在你只需要把共同的颜色提取出来设为变量，当要修改主题色时你就只需要改一个变量值就可以搞定了。

//我们来说下怎么使用sass变量
//sass使用$符号来标识变量
$subject-color: #F90;
header{
  color:$subject-color;//头部内颜色就是#F90
}

• Sass中嵌套css规则

css中总是有很多父级选择器，为了提高元素的优先级，但是这样确让我们写着一遍又一遍的重复ID和class。Sass很好的为我们解决了这一烦恼

//原css我们大概要这么写
#content .content-top .subnav p{color:#333}
#content .content-top .subnav ul{margin-top:10px}
#content .content-top .subnav ul li{width:100px}
#content .content-top h2{padding:10px 0}
//Sass嵌套规则
#content{
  .content-top{
    .subnav{
      p{color:#333}
      ul{
        margin-top:10px;
        li{
          width:100px;
        }
      }  
    }
    h2{padding:10px 0}
  }
}

注意：css中有伪类选择器，对于伪类选择器我们可以用&来实现

article a {
  color: blue;
  &:hover { color: red }
}
//转换成css
article a { color: blue }
article a:hover { color: red }

我们还经常会写一种多个选择去使用一套相同的属性样式。例如

.main h1, .main h2, .main h3 { margin-bottom: 10px }
.main1 a, .main2 a, .main3 a,{color:#333}
//用Sass实现如下
.main {
  h1, h2, h3 {margin-bottom: 10px }
}
.main, .main2, main3{
  a{color:#333}
}

还有子元素、相邻兄弟、父元素样式嵌套

article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
//使用Sass实现如下
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

Sass不仅可以嵌套元素还可以嵌套属性

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
//border中包含了很多属性，我们可以用Sass将属性嵌套
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

• 如何导入Sass文件

css有一个特别不常用的特性，即@import规则。它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
但是和Sass中的@import不同，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
当然sass兼容原生css也可以通过@import导入css文件。尽管这会造成浏览器解析css时的额外下载

@import "colors";//这条命令将把sidebar.scss文件中所有样式添加到当前样式表中

• 嵌套导入

sass允许@import命令写在css规则内

//这是a.sass
aside {
  background: blue;
  color: white;
}

//这是b.sass
.a-sass {@import "a"}
//等同如下
.a-sass {
  aside {
    background: blue;
    color: white;
  }
}

• 重点都在后面 混合器来了

前面说的都是和css相类似的，很多只是规则出现了不同，给编写上提高了速度。但是我们都知道做一个成熟的项目会有很多复杂的大量的样式来布局你的网站。
会有很多相似的样式大量的重用样式出现，独立的变量已经无法应付这种情况了。

混合器使用@mixin标识符定义，很想css中@media或者@font-face这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。（通过@include引用定义的混合器）

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//通过 @include 引用混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

合理的运用混合器你会发现你的代码会非常的易于维护，越写代码越简单。同时你需要更加注意的是混合器命名的语义和去判断该组属性是否应该组合成一个混合器

混合器中的css规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}
//生成的css是这样的
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

给混合器传参

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，参数其实就是可以赋值给css属性值的变量

@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; }

注意 有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序

//sass允许通过语法$name: value的形式指定每个参数的值
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

我们还可以加入默认参数值

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

a{
  @include link-colors(red)
}
//Sass最终生成的是：

a { color: red; }
a:hover { color: red; }
a:visited { color: red; }

• 选择器继承

sass的主要目的是为了让我们在写css的时候能更加的精简，有效，快速。选择器的继承是减少重复精简css的重要方法。基于Nicole Sullivan面向对象的css的理念。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码

//通过选择器继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//这个相当于

什么时候使用继承

混合器是解决样式的重用，而继承就属于是解决类名的重用，当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。

继承的高级用法

最常用的一种高级用法是继承一个html元素的样式。

//通过继承a这一超链接元素来实现
.disabled {
  color: gray;
  @extend a;
}

  

    
...
  



  

    
...
  



  
...