sass总结

sass是css的辅助工具，它是在css的基础上新增了变量，嵌套，导入，混合，继承，运算，函数等功能，sass补缺了css在编程上的很多缺陷。

1.变量$

//声明变量
$value:12px;
html {
  font-size: $value;
}

编译后：
html {
  font-size: 12px;
}

2. 嵌套

（1）普通的嵌套

.wrapper {
   width: 100px;
   background: red;
   .inner {
      width: 50px;
      background: yellow;
   }
}

编译后：
.wrapper {
  width: 100px;
  background: red;
}
.wrapper .inner {
  width: 50px;
  background: yellow;
} 

（2）属性嵌套

a {
  font: {
    size: 12px;
    weight: 11;
  }
  color: yellow;
}

编译后

a {
  font-size: 12px;
  font-weight: 11;
  color: yellow;
}

3. 继承

（1）父选择器继承&

.wrapper {
  color: green;
  &:hover {
     color: red;
  }
}

编译后

.wrapper {
  color: green;
}
.wrapper:hover {
  color: red;
}

（2）继承其他选择器属性@extend

继承按照选择器划分可分为：简单继承、复杂继承、多重继承、连续继承、选择器列继承、占位符继承。

注意：继承找不到继承的选择器会报错，可在选择器后面加!optional；@media内部不能继承外部选择器的属性。

// 简单继承
.parent {
  width: 100px;
  height: 20px;
  color: yellow;
}
.child {
  @extend .parent
}

编译后
.parent, .child {
  width: 100px;
  height: 20px;
  color: yellow;
}

//复杂选择器继承
.link {
  @extend a:hover;
}
.wrapper a.inner:hover {
  color: green;
}

编译后
.wrapper .link.inner, .wrapper a.inner:hover {
  color: green;
}

//多重继承
.inner {
  width: 12px;
  height: 20px;
  color: red;
}
.content {
  font-size: 12px;
  color: yellow;
}
.wrapper {
  @extend .inner;
  @extend .content;
  color: yellow;
}

编译后
.inner, .wrapper {
  width: 12px;
  height: 20px;
  color: red;
}
.content, .wrapper {
  font-size: 12px;
  color: yellow;
}
.wrapper {
  color: yellow;
}

//连续继承
 .inner1 {
　 width: 12px;
}
.inner2 {
  @extend .inner1;
  height: 100px;
}
.inner3 {
 @extend .inner2;
 color: green;
}

编译后
.inner1, .inner2, .inner3 {
  width: 12px;
}
.inner2, .inner3 {
  height: 100px;
}
.inner3 {
  color: green;
}

// 选择器列继承
.wrapper .inner {
　@extend .child;
}
.child {
 color: blue;
 &:hover {
  font-size: 12px;
 }
}

编译后
.child, .wrapper .inner {
  color: blue;
}
.child:hover, .wrapper .inner {
  font-size: 12px;
}

//占位符继承%(模板)
.wrapper a%placeholder {
　width: 100px;
  color: yellow;
}
.child {
  @extend %placeholder;
}

编译后
.wrapper a.child {
  width: 100px;
  color: yellow;
}

3.导入与媒体查询

（1）导入@import

sass引入三种形式：含有scss或sass; 没有文件后缀；引入多文件；文件名加_前缀，便不会编译该文件；@import可以在css模块中引进，但是不能在混合指令或者控制指令中引入@import。

//第一种
@import "foo.scss"或@import "foo.sass";
===========
//第二种
@import "foo";
===========
//第三种
@import "foo","info";
===========
//第四种
@import "_colors.scss";
//第五种
#main {
  @import ‘colors.scss‘;
}
##colors.scss
.examlp {
  color: red;
}

编译后
#main .examlp {
  color: red;
}

当引入以下四种形式时，@import仅作为普通的css语句。

• 文件扩展名.css
• 文件名以http开头
• 文件名是url()
• 文件名是media query

@import ‘foo.css‘;
@import ‘http://github.com/lidaylin/foo.scss‘;
@impore ‘foo‘ screen;
@import url()

编译后
@import ‘foo.css‘;
@import ‘http://github.com/lidaylin/foo.scss‘;
@impore ‘foo‘ screen;
@import url()

（2）媒体查询@media

@media用法基本与css一致，sass增加了嵌套的功能。大致有两种，一种是嵌套在选择器内部，编译后会包含嵌套的父选择器；另外一种是嵌套自身，@media会进行合并。

//被父选择器嵌套
.sider {
  width: 100px;
  @media screen and (orientation=portrait) {
    font-size: 12px;
  }
}

编译后
.sider {
  width: 100px;
}
@media screen and (orientation=portrait) {
  .sider {
    font-size: 12px;
  }
}

//嵌套自身
@media screen {
  @media (orientation=portait) {
    .sider {
      font-size: 18px;
    }
  }
}

编译后
@media screen and (orientation=portait) {
  .sider {
    font-size: 18px;
  }
}

4.混合

@mixin text {
  font: {
    family: arial;
    weight: bold;
    size: 12px;
  }
  color: #333;
}
.large-text {
  @include text;
  background: yellow;
}

编译后
.large-text {
  font-size: 12px;
  font-family: arial;
  font-weight: bold;
  color: #333;
}

以上是混合的常规定义（@mixin）和调用（@include），还可以用参数和向混合样式中导入内容。

$color: yellow;
$status: solid !default;
@mixin border-style1($color, $status){
　 border-radius: 1px $status $color;
  -webkit-border-radius: 1px $status $color;
  -moz-border-radius: 1px $status $color;
  -ms-border-radius: 1px $status $color;
}

//关键词混合
@mixin border-style2($color, $status:dash){
  border-radius: 1px $status $color;
  -webkit-border-radius: 1px $status $color;
  -moz-border-radius: 1px $status $color;
  -ms-border-radius: 1px $status $color;
}
.edging1 {
  width: 120px;
  height: 20px;
  @include border-style2($color);
}
.edging2 {
  width: 120px;
  height: 20px;
  @include border-style1($color, $status);
}
编译后
.edging2 {
  width: 120px;
  height: 20px;
  border-radius: 1px solid yellow;
  -webkit-border-radius: 1px solid yellow;
  -moz-border-radius: 1px solid yellow;
  -ms-border-radius: 1px solid yellow;
}
.edging1 {
  width: 120px;
  height: 20px;
  border-radius: 1px dash yellow;
  -webkit-border-radius: 1px dash yellow;
  -moz-border-radius: 1px dash yellow;
  -ms-border-radius: 1px dash yellow;
}

//变量参数
$shadow: 10px 10px 5px #333;
$value: #333 #e1e1e1;
@mixin box-shadow($shadow...) {
  width: 100px;
  height: 50px;
  background: yellow;
  box-shadow: $shadow;
}
@mixin colors($textColor, $background) {
  color: $textColor;
  background: $background;
}
.show {
  @include box-shadow($shadow...);
}
.text {
 @include colors($value...);
}

编译后
.show {
  width: 100px;
  height: 50px;
  background: yellow;
  box-shadow: 10px 10px 5px #333;
}
.text {
  color: #333;
  backgrond: #e1e1e1;
}

//向混合样式中导入内容
////导入整块内容
@mixin wrapper {
  html {
   @content
  }
}
@include wrapper {
  .inner {
    margin: 0 auto;
  }
}

编译后
html .inner {
  margin: 0 auto;
}

////导入属性
@mixin wrapper($color: blue) {
  @content;
  color: $color;
}
.text {
  @include wrapper {margin: 0 auto;}
}

编译后
.text {
  margin: 0 auto;
  color: blue;
}

5. 控制指令

（1）条件判断语句 @if与@else

.text {
  @if 1+1 == 2 {
    border: 2px;
  } @else {
    border: 4px;
  }
}

(2) 循环语句（@for、@each、@while）

@for的取值范围两种表达方式，其一a though b，范围是a到b；其二a to b，范围是a到b-1。

@for $var in 1 though 3 {
  .item-#{$var} {
    font-size: 12px * $var;
  }
}
@for $var in 4 to 6 {
  .item-#{$var} {
    font-size: 6px * $var;
  }
}

编译后
.item-1 {
  font-size: 12px;
}
.itme-2 {
  font-size: 24px;
}
.itme-3 {
  font-size: 36px;
}
.itme-4 {
  font-size: 24px;
}
.item-5 {
  font-size: 30px;
}
*****没有6了*****

@each 取值范围的三种形式，散列、散列对象、键值对。

//散列
@each $var in safari, chrome, fix {
  .#{$var}-icon {
    background: url(‘./images/#{$var}.png‘);
  }
}

编译后
.safari-icon {
  background: url(‘./images/safari.png‘);
}
.chrome-icon {
  background: url(‘./images/chrome.png‘);
}
.fix-icon {
  background: url(‘./images/fix.png‘);
}

//散列对象
@each $color, $width, $height in (blue, 12px, 18px)
                                 (yellow, 20px, 32px)
{
  #{$color}-color {
    color: $color;
    width: $width;
    height: $height;
  }
}
编译后
blue-color {
  color: blue;
  width: 12px;
  height: 18px;
}
yellow-color {
  color: yellow;
  width: 20px;
  height: 32px;
}

//键值对
@each $key, $value in {w1: 12px, w2: 24px, w3: 36} {
  .#{$key} {
    width: $value;
  }
}

编译后
.w1 {
  width: 12px;
}
.w2 {
  width: 24px;
}
.w3 {
  width: 36px;
}

6. 函数

$height: 20px;
@function swicth-width($n) {
  @return $n * $height;
}
.wrapper {
  color: yellow;
  width: switch-width(2);
}

编译后
.wrapper {
  color: yellow;
  width: 40px
}

7. 运算

数字的加减乘除和颜色的计算。

//加减乘除.wrapper {  $width: 100px;  height: $width/2;  border: 1px+1px solid yellow;  margin-left: $width * 2;  padding-right: $width - 10px;}

编译后.wrapper {  height: 50px;  border: 2px solid yellow;  margin-left: 200ps;  padding-right: 90px;}

//颜色值计算$color: rgba(255, 0, 0, 0.5).p1 {  color: #010203 + #030201;}.p2 {  color: #010203 * 2;}.p3 {  color: opacity($color, 0.3);  background: transparentize($color, 0.25)}.p4 {  color: rgba(0, 255, 0, 0.75) + rgba(255, 0, 0, 0.75);}

编译后.p1 {  color: #040404;}.p2 {  color: #020406;}.p3 {  color: rgba(255, 0, 0, 0.8);  background: rgba(255, 0, 0, 0.25);}.p4 {  color: rgba(255, 255, 0, 0.75)}

原文地址：https://www.cnblogs.com/lidaylin/p/8569302.html