Sass学习总结

Sass做为CSS的一种延伸，我知道以后心里一直十分喜悦。

Sass能够作运算，能够配置，能够嵌套，很是灵活。

写在前面！

compass是基于SASS二次开发的工具。

一、SASS最后是生成CSS！！！

二、SASS自3.0之后就使用*.scss为后缀，而再也不使用*.sass(空格敏感)

三、问题是bootstrapV4 须要写或生成sass吗？

四、尴尬的是学完以后，发现若是只是使用Bootstrap，则并会用到SASS的知识。由于Bootstrap已经封装好啦。

如今开始！

一、使用变量

    1.一、声明变量

    老版本用"!",新版用"$" ,理解为相似 JS 的 var 之类的

$highlight-color: #F90;

    1.二、声明引用

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

    PS：SASS中不分下划线_和短横线-

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

二、嵌套CSS规则

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

    2.一、父选择器的标识符&

        若是未加入&符号，则article全部的子元素都会被hover时变成红色。

        加入后则，只有父类自己变色。

article a {  color: blue;
  :hover { color: red }
}

    2.二、群组选择器的嵌套

        全部.container的 h一、h二、h3同时嵌套，不用再重复书写。

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

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

        > : 子组合选择器 : 表明直接紧跟的子元素

article section { margin: 5px }
article  section { border: 1px solid #ccc }

        上例中，第一个选择器会选择article下的全部命中section选择器的元素。

        第二个选择器只会选 着的子元素中命中section选择器的元素。

        + ： 同层相邻组合选择器 表明只关联同层且相邻的元素。

header  p { font-size: 1.1em }

        ~ : 同层全体组合选择器:表明只要是同层，无论在是否相邻都能关联。

article ~ article { border-top: 1px dashed #ccc }

    组合拳：

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 }

    2.四、嵌套属性

        只须要输入一个border~~~ 效率就是生产力！！！

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

三、导入SASS文件

    3.一、使用SASS部分文件

        你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";

    引入sass能够重复利用。便于编程。

    3.二、默认变量值 !default

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

$fancybox-width: 400px !default;
.fancybox {
    width: $fancybox-width;
}

        含义是：若是这个变量被声明赋值了，那就用它声明的值，不然就用这个默认值。

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

    3.三、嵌套导入

        有一个文件 _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;
  }
}

    3.四、原生的CSS导入;

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

• 被导入文件的名字以.css结尾；

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

• 被导入文件的名字是CSS的url()值。

         由于sass的语法彻底兼容css，因此你能够把原始的css文件更名为.scss后缀导入进来。

四、静默注释

        SASS生成CSS时，将会删掉注释。

body {
  color: #333; // 这种注释内容不会出如今生成的css文件中
  padding: 0; /* 这种注释内容会出如今生成的css文件中 */
  }

五、混合器 @mixin

        混合器使用@mixin标识符定义。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

   我理解为它不带参数时，是一种嵌套。但在使用上，会更加灵活！另外，@mixin支持带参数，更加灵活。

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

    5.一、什么时候使用混合器

        略。

    5.二、混合器中的CSS规则

        这是不带参数的混合器，而且说明，混合器内支持css嵌套。

        设置一个混合器：

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

        在sass中使用这个混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}

        生成的样式以下：

ul.plain {
  color: #444;
  list-style: none;
}

ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

   5.三、给混合器传参

        设置一个混合器：

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

    5.四、默认参数值

        为了在@include混合器时没必要传入全部的参数，咱们能够给参数指定一个默认值。

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

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

六、使用选择器继承来精简CSS @extend

        选择器继承是说一个选择器能够继承为另外一个选择器定义的全部样式。

    6.一、什么时候使用继承

         其中一个类，是另一个类的细化时。

        好比，.error是基础 ；.seriousError是细化

    6.二、默认参数值

.error{
    color:red;
}
.seriousError{
    @extend .error;
    border:1px solid red;
}

    6.三、继承的工做细节

        关于@extend有两个要点你应该知道。

• 跟混合器相比，继承生成的css代码相对更少。由于继承仅仅是重复选择器，而不会重复属性，因此使用继承每每比混合器生成的css体积更小。若是你很是关心你站点的速度，请牢记这一点。

• 继承听从css层叠的规则。当两个不一样的css规则应用到同一个html元素上时，而且这两个不一样的css规则对同一属性的修饰存在不一样的值，css层叠规则会决定应用哪一个样式。至关直观：一般权重更高的选择器胜出，若是权重相同，定义在后边的规则胜出。

    PS : @extend 不能用嵌套多种选择器。

七、小结

    SASS文件是基于Ruby的，若是要使用，请安装Ruby。

    SASS是CSS的高级编辑器，最后会生成CSS文件。

    SASS自3.0开始，使用的是*.scss后缀。切全部*.scss文件放在同一目录下。

    @mixin 混合器！

    @include 加载混合器！

    @extend 继承，各类继承。