scss使用方法以及相关内容

我们平时都称之为 Sass，其实可分成sass和scss，其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西

sass嵌套

选择器嵌套

<header>

　　<nav> <a href="#">home</a> <a href="#">page</a> </nav> </header> nav a { color:red; } header nav a { color:green; } nav { a { color: red; header & { color:green; } } }

属性嵌套(有相同的属性前缀

如 font, background等，也有可能是 -webkit-

.box { font-size: 12px; font-weight: bold; } .box { font: { size: 12px; weight: bold; } }

伪类嵌套

同上选择器嵌套一样使用 & 关键字

.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }

占位符：

- 语法：%placeholder，
- 用法：占位符不被 @extend 调用不产生任何代码

%bg {

  background-color: #FF0;

}

%w {

  width: 100px;

}

.box {

  @extend %w;

  height: 100px;

  @extend %bg;

}

sass 语法

允许使用变量以 $ 开头

$test: #ff9500

div{

       color: $test;

}

也可以字符串拼接

$side : left;

.rounded {

        border-#{$side}-radius: 5px;

 }

sass分享：

内容：全局、默认、局部变量
使用：默认变量在局部中无效，覆盖默认变量不分上下顺序

<div class="box1">

  <div class="box2">box2</div>

</div>

$backgroundColor: #FF0;                  // 全局变量

$backgroundColor: #000 !default;      // 默认变量

$color: #F0F;

.box1 {

  $color: #CCC;                                   // 局部变量

  width: 100px;

  height: 100px;

  background-color: $backgroundColor; // #FF0

  .box2 {

    color: $color;                                      // #CCC

  }

}

sass 的 @if 控制指令

单独使用@if：

当@if 的表达式不是false或者null时，条件成立，输出{} 内的代码

.demo{

  $fx: bottom;

  @if ($fx == top) {

    border-color: transparent transparent pink transparent;

    border-style: dashed dashed solid dashed;

  }

  @else if($fx == right){

    border-color: transparent transparent transparent pink;

    border-style: dashed dashed dashed solid;

  }

  @else if($fx == bottom){

    border-color: pink transparent transparent transparent;

    border-style: solid dashed dashed dashed;

  }

  @else if($fx == left){

    border-color: transparent pink transparent transparent;

    border-style: dashed solid dashed dashed;

  }

  width: 0px;

  height: 0px;

  overflow: hidden;

  border-width: 60px;

}

混合指令 + @if 指令

// 画三角形@mixin声明

@mixin sj($fx:top,$size:100px,$color:red){

  @if ($fx == top) {

    border-color: transparent transparent $color transparent;

    border-style: dashed dashed solid dashed;

  }

  @else if($fx == right){

    border-color: transparent transparent transparent $color;

    border-style: dashed dashed dashed solid;

  }

  @else if($fx == bottom){

    border-color: $color transparent transparent transparent;

    border-style: solid dashed dashed dashed;

  }

  @else if($fx == left){

    border-color: transparent $color transparent transparent;

    border-style: dashed solid dashed dashed;

  }

  width: 0px;

  height: 0px;

  overflow: hidden;

  border-width: $size;

}

//mixin的调用

.demo{

  @include sj(left, 66px, pink);

}

less 与sass有个很明显的区别
变量
咱们sass 变量用 $ 开头
less 是以 @ 开头的

sass语法 @for 控制指令

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动；

这个指令包含两种格式：
@for $var from through ，
或者
@for $var from to

<ul>

  <li class="item-1">至尊魔法师</li>

  <li class="item-2">王</li>

  <li class="item-3">奇异博士</li>

  <li class="item-4">莫度男爵</li>

  <li class="item-5">哈姆雷特</li>

  <li class="item-6">蜘蛛侠</li>

  <li class="item-7">非人哉</li>

</ul>

rom ... through

// 当使用 through 时，条件范围包含与的值

// 个人分析：可以将一个页面，不同div中嵌套的元素设置样式，只要命名符合一定的规律

@for $i from 1 through 7 {

  .item-#{$i} {

    width: 6em * $i;

    background: pink;

    margin: 6px 0;

  }

}

巴特西