Less 预处理

引入

复制@import "reset.css"; /* 导入css */
less

变量

复制@w:1190px;/* 变量 */
less

使用

复制height:calc(@w - 1000px);
border-@{side}:10px solid @color + 200;
less

混入

复制@arguments
.boxShadow(@x,@y,@blur,@spreed,@color){
  box-shadow: @arguments ;
}
.box1{
  .public;
  .boxShadow(0px, 0px,30px ,50px , @color)
}
less

继承

复制:extend
.box3{
  &:extend(.public);
  margin:auto;
}
// 等同于
.box4:extend(.public){
  margin: 50px auto;
  background: green;
}
less

运算

复制.bottom{
  width:(200px-20)*2;
}
less

编译为原始 css calc 计算

复制:root{
  --width: 1rem;
}
.box{
  width: calc(100% - var(--width)); // 这样写会编译成 width: 计算后的结果;
  width: calc(~"100% - var(--width)"); // 应该这样写

  @w=90%;
  width: calc(~"@{w} - var(--width)"); // 使用 less 变量

}
less

Scss/Sass 预处理

引入

复制@import "./sc/base";
scss

变量

复制$yyy : 200px !default;// 默认变量 只要有新值就会覆盖
$yyy : 300px ;
scss

使用

复制#dix1{
  $color : #ccc;// 局部变量
  $color : #ccc !global;// 全局变量
}
#div2 {// 特殊变量 #{表达式/变量}
  border-#{$zzz} : 1px solid black;
}
scss

混入

复制@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
scss

继承

复制@extend
#div {
  @extend .btn;// 继承了.btn 与 .btn 下的属性
}
scss

判断

复制$theme : dark;
body {
  @if $theme == darl {
    background-color: black;
  }@else if $theme == light {
    background-color: white;
  }
}
scss

循环

复制$round : 12;
// 开始值           结束值
@for $i from 1 through $round{
  .col-#{$i}{
    width: 100% / $round * $i;
  }
}

$num : 5;
@while $num > 0 {
  .item#{$num}{
    width : $num * 2em;
  }
  $num : $num - 1;
}

$icons : success error waring;
@each $list in $icons {
.box-list{
  background: url("#{$list}.png");
}
scss