scss的使用

weixin_38335589

已于 2022-06-17 13:38:11 修改

阅读量144

点赞数

文章标签： scss 前端 css

于 2022-06-17 12:08:35 首次发布

本文链接：https://blog.csdn.net/weixin_38335589/article/details/125330379

版权

1、混合指令

@mixin定义 @include引入

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

2、函数指令

@function定义

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

3、：export导出将变量名导出，可以以Js的形式使用SCSS变量，通常写在一个variables.scss文件中，在需要的地方引入。

variables.scss

$red:#C03639;
$green: #30B08F;
$yellow:#FEC171;

:export {
  red: $red;
  green: $green;
  yellow: $yellow;
}

*******.js

import { red, green, yellow } from 'variables.scss'
console.log(red, green, yellow)

4、控制指令

4.1 判断 @if @else-if @else

4.2 循环 @for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

4.3@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译成

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

4.4 @while