SCSS 基本用法

背景

新入职一家公司，用的scss语法，自己以前一直使用的less,所以就官网学习了一波scss,并记录一点小笔记

SCSS 两种注释

单行注释编译后不会输出到源码里，多行注释编译后会输出到源

SCSS 变量详解

• Scss 变量定义规则

1. 变量以美元($)开头,后面跟变量名
2. 变量名不以数字开头可包含数字、下划线、横线、连接符
3. 写法通 css,即变量名和值之间用冒号分隔
4. 变量要先定义，后使用

• css 方式

:root {
  --color: #f00;
}
body {
  --border-color: #f2f2f2;
}
.header {
  --background-color: #fff;
}
p {
  color: var(--color);
  border-color: var(--border-color);
}

• scss 定义变量

$primary:green;
.btn{
  background-color:$primary
}

• scss 默认值 优先使用 #333;默认值不会覆盖前面样式

 $color:#333
 $color:#666 !default

SCSS 混合指令

• mixin 是可以重复使用的一组 css 声明
• mixin 有利于减少重复代码，只需声明一次，就可在文件中运用
• 混合指令可以包含所有 css 规则，绝大部分 sass 规则，甚至可以通过参数引入变量，输出多样化的样式
• 使用参数建议添加默认值

@mixin block-padding($top：0, $right：0, $bottom：0, $left：0) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

@mixin linear-gradient($direction, $gradients...) {
  background-color: nth($gridents, 1);
  background-image: linear-gradient($direction, $gradients);
}

.container {
  // 指定变量名传参;可以不按照顺序
  @include block-padding($top: 10px, $bottom: 20px, $right: 15px, $left: 15px);
  // 按照顺序填入
  @include block-padding(10px, 20px, 15px, 15px);
  @include linear-gradient(to right, #f00, red, yellow);
}

逻辑运算符

$width: 100;
$height: 200;
$last: false;
div {
  @if $width>50 and $height>100 {
    font-size: 16px;
  } @else {
    font-size: 14px;
  }
  @if not $last {
    border-color: red;
  } @else {
    border-color: #e43698;
  }
}

插值

可以用于：选择器、属性名、属性值、注释...

$class-name: danger;
$attr: color;
$color-value: yellow;

a.#{$class-name} {
  border-#{$attr}: #{$color-value};
}

常见函数运用

div {
  background-color: darken(#000000, 30%);
  color: lighten(#0ff, 50%);
  z-index: abs(-15);
  z-index: ceil(5.8);
  z-index: index(a, b, c, d, c); // 3
  z-index: length(120px 5px); // 2
}

流程控制指令

@mixin triangle($direction: top, $size: 30px, $border-color: black) {
  width: 0;
  height: 0;
  border-width: $size;
  border-#{$direction}-width: 0;
  @if ($direction == top) {
    border-color: transparent transparent $border-color transparent;
    border-style: dashed dashed solid dashed;
  } @else if ($direction == right) {
    border-color: transparent transparent transparent $border-color;
    border-style: dashed dashed dashed solid;
  } @else {
    border-color: transparent transparent transparent $border-color;
    border-style: dashed dashed dashed solid;
  }
}

$column: 12;

@while $column>0 {
  .col-sm-#{$column} {
    width: $column/12 * 100%;
  }
  $column: $column - 1;
}

@for $i from 1 to 4 {
  .p#{$i} {
    width: 10px;
  }
}