scss学习笔记

.scss的文件中带有中括号和分号；.sass的文件中不带有中括号和分号

导入

导入格式：@import 'index.scss'
导入时可忽略后缀名.scss；@import 'index'
一般以_下划线开头的文件（_mixin.scss），引入时可不写下划线 @import 'minxin.scss'

注释

分为两种 分别为：/* 注释内容 */ （多行注释） 以及 // 注释内容 （单行注释）

变量

必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值
如果想覆盖默认值，在默认变量之前重新声明下变量即可

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

特殊变量
一般我们定义的变量都是属性值，可直接使用，但当定义的变量是属性时，必须以#{$变量名}形式使用

$borderDirection: top !default;

.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}

多值变量
多值变量分为list和map两种类型：
list：list数据可通过空格，逗号或小括号分隔多个值，取值方式：nth($var,$index)
关于list数据操作还有很多其他函数如：length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])

$linkColor: #08c #333 ;// 一维数据
$pColor: (#08c #333),(#09c #444)  //二维数据
$spanColor: #08c #333, #09c #444
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

map : map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//编译效果
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

全局变量
在变量值后面加上!global即为全局变量，在scss中没有局部变量，选择器中定义的变量会覆盖同名全局变量。

scss的嵌套（常用选择器的嵌套）

定义：在一个选择器中嵌套另一个选择器来实现继承
在选择器嵌套中，可以使用&表示父元素选择器

#container{
  background:#333;
  li{
    line-height:40px;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;
    box-sizing:border-box;
    &:hover{
      color:#ddd;
    }
  }
}
//编译后
#container{
    background:#333;
}
#container li{
     line-height:40px;
}
#container a{
    display: block;
    padding: 0 10px;
    color: #fff;
    box-sizing:border-box;
}
#container a:hover{
    color:#ddd;
}

@at-root跳出选择器嵌套

默认选择器嵌套会继承所有上级选择器
@at-root(without:all/rule（默认，可不写）/media/support)

.parent {
  background:#f00;
  @at-root {  //多个选择器跳出时用中括号，单个选择器时可省略中括号
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

只能跳出选择器，不能跳出@media等，需要用@at-root(without:media)

mixin（混合）

使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin**通过@include来调用**。

@mixin 混合名(参数1,参数2,....){  //声明
    //混合内容
}
.demo{  //调用
    @include 混合名;
}

@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…。

@content

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

继承@extend

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}