前端—scss

一、安装使用

ruby ==> sass

二、编译

vscode配置

三、变量

1、基础的变量

$base_color:#1269b5;
.box {
    color:$base_color;
}

2、在变量里面也可以引入其他的变量

$base_border:1px solid $base_color;

四、嵌套

正常嵌套

使用&符号会引用父选择器

伪类

&:hover

属性的嵌套

body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  font-weight: normal;
}
==>
body {
  font: {
    family: 'Courier New', Courier, monospace;
    size: 15px;
    weight: normal;
  }
}


.nav {
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}
==>
.nav {
  border: 1px solid #000 {
    left: 0;
    right: 0;
  }
}

五、函数mixin

1、基础使用

@mixin alert {
  color: red;
  background-color: lime;
  a {
    color: blue;
  }
}

.alert-test {
  @include alert;
}

==>
.alert-test {
  color: red;
  background-color: lime;
}

.alert-test a {
  color: blue;
}

2、带有参数的函数

定义函数 （传入两个变量 darken 是变深）

@mixin alert($text-color, $background) {
  color: $text-color;
  background-color: $background;
  a {
    color: darken($text-color, 10%);
  }
}

两种调用方式

// 调用
.alert-warning {
  @include alert(#8afdf1, #fcc689);
}
.alert-info {
  @include alert($background: #fcc689, $text-color: #8afdf1);
}

六、继承extend

1、继承 会把选择器自己的样式和后代的选择器及样式全部继承

.alert {
  padding: 15px;
}
.alert-info {
  @extend .alert;
  background-color: lime;
}

七、引入import 注意引入的如果是整体的一部分即partials，需要以下划线开头

// _base.scss
@import "base"

八、注释

如果希望在压缩后的min.css保留注释 就使用/*! */

九、内置函数

// 绝对值
abs()
// 四舍五入
round()
// 进位 退位
ceil() floor()
// 转化为百分号
percentage(650px / 1000px) ==> 65%
// 最大最小
max() min()

字符串函数

$greeting:'hello world'
to-upper-case($greeting)
to-lower-case($greeting)
str-length($greeting)
// 插入
str-insert($greeting,'.com',位置)

颜色函数

lighten 明度
darken	减小明度

十、控制指令

if

@if 条件 {
    ...
} @else if {
    ...
} @else {
    ...
}
@if $theme === dark {}

for(循环)

$columns: 4;
@for $i from 1 through $columns {
  .col-#{$i} {
    width: 100% / $columns * $i;
  }
}
// through  包括最后项 1234   to不包括 123
.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

each

@each $var in $list {
    ...
}

$icons: success error warning;
@each $var in $icons {
  .icon-#{$var} {
    background-image: url(../image/icons/#{$var}.png);
  }
}
==>
.icon-success {
  background-image: url(../image/icons/success.png);
}

.icon-error {
  background-image: url(../image/icons/error.png);
}

.icon-warning {
  background-image: url(../image/icons/warning.png);
}

while

@while