scss基础

一、变量

1. 变量声明 $变量名

	$color1: #ff0000;

2. 变量引用 $变量名

	.box {
      background-color: $color1;
	}

3. 全局变量

$gColor: green !global;

4. 数据类型

  数字，1, 2, 13, 10px
  字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  布尔型，true, false
  空值，null
  数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial
  maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

二、嵌套

.page {
  width: 100px;
  height: 100px;
  .box {
  	width: 50px;
  	height: 50px;
	}
}

1. 父选择器的标识符 &

a {
  color: #000;
  &:hover {
  	color: #888;
  }
}

2. 作为选择器的第一个字符串跟随后缀生成复合选择器 &ClassName

// html
<div class="box">
	<div class="box-son">
	</div>
</div>
// scss
.box {
	width: 100px;
	height: 100px;
	// &-son表示box-son
	&-son {
      width: 100px;
      height: 100px;
	}
}

3. 子组合选择器 >

		// html
      <div class="box">
        <div class="s1">
          1
          <div class="s1">1-1</div>
        </div>
        <div class="s2">2</div>
      </div>
      // scss
      .box {
        color: #eee;
        // 选择.s1 .s2
        > div {
          color: #888;
        }
      }
      

4. 向邻居元素选择器 +

		// html
      <div class="box">
        <div class="s1">
          1
          <div class="s1">1-1</div>
        </div>
        <div class="s2">2</div>
      </div>
      // scss
      .box {
        color: #eee;
        // 选择.s1 下面的第一个div（s2）
        .s1 + div {
          color: #888;
        }
      }
      

5. 全体组合选择器 ~

		// html
      <div class="box">
        <div class="s1">
          1
          <div class="s1">1-1</div>
        </div>
        <div class="s2">2</div>
        <div class="s3">3</div>
      </div>
      // scss
      // 选择 s1同级的所有div元素 .s2 .s3
        .s1 ~ div {
          width: 100px;
          height: 100px;
          background-color: blue;
        }
      

6. 嵌套属性

 .box {
  width: 0px;
  height: 0px;
  // 设置边框
  border: 10px solid pink {
  	// 设置其他边框为透明
    top: 10px solid transparent;
    left: 10px solid transparent;
    right: 10px solid transparent;
  }
}

三、使用外部SCSS文件

// 导入外部Scss文件
@import '@/style/index';

1. 使用SCSS部分文件

// SCSS局部文件需以_开头(SCSS不会在编译时单独输入css，尔只是吧这个文件用作导入)
themes/def-scss.scss
// 导入局部文件变量
@import "themes/def-scss"

2. 默认变量值

// 当使用themes/def-scss.scss的def-width变量时，如果未重新赋值则默认值为400px;
$def-width: 400px !default;

3. 嵌套导入

// nest.scss
.nest {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}
// html
      <div class="box">
        <div class="nest"></div>
      </div>
// scss
.box {
  // 设置.nest样式
  @import '@/style/nest';
}

四. 静默注释

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

五.混合器

1. 定义使用混合器

// 定义混合器
@mixin box {
  width: 100px;
  height: 100px;
  background-color: #fff;
}
.box1 {
// 使用混合器
  @include box;
  background-color: red;
}
.box2 {
  @include box;
  background-color: blue;
}

2. 混合器中的css规则

// html
      <ul class="ul1">
        <li>可乐1</li>
        <li>可乐2</li>
        <li>可乐3</li>
        <li>可乐4</li>
      </ul>
      <ul class="ul2">
        <li>雪碧1</li>
        <li>雪碧2</li>
        <li>雪碧3</li>
        <li>雪碧4</li>
      </ul>

// scss
@mixin def-ul {
  width: 100px;
  height: 100px;
  background-color: palegreen;
  // 设置混合器下的li标签样式
  li {
    height: 18px;
    background-color: plum;
  }
}
.ul1 {
  color: #f1f100;
  @include def-ul;
}
.ul2 {
  color: #91f200;
  @include def-ul;
}

3. 混合器传参

// html
      <ul class="ul1">
        <li>可乐1</li>
        <li>可乐2</li>
        <li>可乐3</li>
        <li>可乐4</li>
      </ul>
      <ul class="ul2">
        <li>雪碧1</li>
        <li>雪碧2</li>
        <li>雪碧3</li>
        <li>雪碧4</li>
      </ul>

// scss
// $定义参数
@mixin link-colors($normal, $hover) {
	// 使用参数
  color: $normal;
  li {
    &:hover {
      color: $hover;
    }
  }
}
.ul1 {
	// 传入参数
  @include link-colors(#eee, blue);
}
.ul2 {
  @include link-colors(#eee, skyblue);
}

4. 设置混合器默认参数

// 当未传入参数时，默认参数为绿色
@mixin link-colors($normal, $hover: green) {
  color: $normal;
  li {
    &:hover {
      color: $hover;
    }
  }
}
.ul1 {
  @include link-colors(#eee, blue);
}
.ul2 {
  @include link-colors(#eee);
}

七、选择器继承

// html
      <button class="btn1">按钮1</button>
      <button class="btn2">按钮2</button>
// scss
.btn1 {
  display: inline-block;
  width: 80px;
  height: 30px;
  border-radius: 5px;
  background-color: blue;
}
.btn2 {
  @extend .btn1;
  background: green;
}

八、if语句

$btn1-bg: 1;
// 变量=1背景色为blue
  @if $btn1-bg == 1 {
    background-color: blue;
  } @else if $btn1-bg == 2 {
    background-color: hotpink;
  } @else {
    background-color: skyblue;
  }

九、循环语句

1. for 循环

// to 关键字1-3不包括3
@for $i from 1 to 3 {
// #{$1} 循环变量
  .btn#{$i} {
    border: #{$i}px solid red;
  }
}

// through 关键字1-3包括3
@for $i from 1 through 3 {
// #{$1} 循环变量
  .btn#{$i} {
    border: #{$i}px solid red;
  }
}

2. while 循环

.w1200 {
  $i: 3;
  @while $i > 0 {
    .btn#{$i} {
      border: #{$i}px solid blue;
    }
    $i: $i - 1;
  }
}

3. each循环

@each $color in 'pink', 'hotpink', 'red' {
    .#{$color} {
      background-color: #{$color};
    }
  }

十、自定义函数

.w1200 {
  @function double($n) {
    @return $n * 2;
  }
  .btn {
    font-size: double(30px);
  }
}