学习笔记——CSS预编译语言Less和Scss的使用

痛定思痛。 2022-10-17 00:35 130阅读 0赞

## 1.Less： ##

.box {  width: 100px; }
    // 单行注释
    /* 多行注释 */
    
    /* 变量 */
    @number: 123px;
    .box2 {  width: @number; }
    
    /* 插值 */
    @i: 3;
    @key: margin;
    .box@{ i} {  @{ key}: auto; }
    
    /* 作用域 */
    @num: 12px;
    .box4 { 
      width: @num;
      @num: 13px;
      height: @num;
    }
    
    /* 选择器嵌套 */
    ul { 
      list-style: none; li { 
        float: left; div {  margin: 10px; }
        p {  margin: 20px; }
      }
    }
    
    /* 伪类选择器 */
    .class { 
      .box {  color: blue; }
      &:hover {  color: red; }
    }
    
    /* 属性嵌套不可用,less无法属性嵌套 */
    // .attribute { 
    //   font-size: 20px; // font : { 
    //     size: 30px;
    //     weight: bold;
    //     family: 宋体;
    //   }
    // }
    
    /* 运算 */
    /* 当两个运算数单位不同时，以第一个数为准 */
    @numA: 100px;
    .box4 { 
      width: @numA + 3em;
      height: 3em + @numA;
      padding: 20px/1.5;
      margin: ~"20px / 1.5";
      color: #001122 * 2;
    }
    
    /* 函数 */
    /* 内置函数： round(): 约分 percentage(): 百分比 random(): 产生随机数 sqrt(): 开方 */
    .box5 { 
      width: round(3.5px);
      height: percentage(0.2);
      // margin: random(); less无random()
      padding: sqrt(25%);
    }
    
    /* 混入 */
    .show {  display: block; }
    .hide(@color) {  
      display: none;
      color: @color;
    }
    .box6 { 
      width: 100px;
      .show;
      .hide(blue);
    }
    
    /* 命名空间 */
    #nm() {  .show {  display: inline-block; } }
    .box7 {  #nm.show; }
    
    /* 继承 */
    .line {  display: inline; }
    .box9 {  &:extend(.line); }
    
    /* 合并 */
    .box10 { 
      background+: url(a.png);
      background+: url(b.png);
      transform+_: scale(2);
      transform+_: rotate(30deg);
    }
    
    /* 媒体查询(可以正常写) */
    .box11 { 
      width: 100px;
      @media all and(min-width: 768px) { 
        width: 600px;
      }
      @media all and(min-width: 1440px) { 
        width: 1200px;
      }
    }
    
    /* 条件 */
    @count: 5;
    .get(@cn) when (@cn > 4) { 
      width: 100px + @cn;
    }
    .get(@cn) when (@cn < 4) { 
      width: 10px + @cn;
    }
    .box12 { 
      .get(@count);
    }
    
    /* 循环 */
    @count2: 11;
    .get2(@cn) when (@cn < 18) { 
      .get2(@cn + 1);
      .box-@{ cn} {  width: 100px + @cn; }
    }
    
    .get2(@count2);
    
    /* 导入 */
    @import './reset.less';

**编译后：**

.box { 
      width: 100px;
    }
    /* 多行注释 */
    /* 变量 */
    .box2 { 
      width: 123px;
    }
    /* 插值 */
    .box3 { 
      margin: auto;
    }
    /* 作用域 */
    .box4 { 
      width: 13px;
      height: 13px;
    }
    /* 选择器嵌套 */
    ul { 
      list-style: none;
    }
    ul li { 
      float: left;
    }
    ul li div { 
      margin: 10px;
    }
    ul li p { 
      margin: 20px;
    }
    /* 伪类选择器 */
    .class .box { 
      color: blue;
    }
    .class:hover { 
      color: red;
    }
    /* 属性嵌套不可用,less无法属性嵌套 */
    /* 运算 */
    /* 当两个运算数单位不同时，以第一个数为准 */
    .box4 { 
      width: 103px;
      height: 103em;
      padding: 20px/1.5;
      margin: 20px / 1.5;
      color: #002244;
    }
    /* 函数 */
    /* 内置函数： round(): 约分 percentage(): 百分比 random(): 产生随机数 sqrt(): 开方 */
    .box5 { 
      width: 4px;
      height: 20%;
      padding: 5%;
    }
    /* 混入 */
    .show { 
      display: block;
    }
    .box6 { 
      width: 100px;
      display: block;
      display: none;
      color: blue;
    }
    /* 命名空间 */
    .box7 { 
      display: inline-block;
    }
    /* 继承 */
    .line, .box9 { 
      display: inline;
    }
    /* 合并 */
    .box10 { 
      background: url(a.png), url(b.png);
      transform: scale(2) rotate(30deg);
    }
    /* 媒体查询(可以正常写) */
    .box11 { 
      width: 100px;
    }
    @media all and (min-width: 768px) { 
      .box11 { 
        width: 600px;
      }
    }
    @media all and (min-width: 1440px) { 
      .box11 { 
        width: 1200px;
      }
    }
    /* 条件 */
    .box12 { 
      width: 105px;
    }
    /* 循环 */
    .box-17 { 
      width: 117px;
    }
    .box-16 { 
      width: 116px;
    }
    .box-15 { 
      width: 115px;
    }
    .box-14 { 
      width: 114px;
    }
    .box-13 { 
      width: 113px;
    }
    .box-12 { 
      width: 112px;
    }
    .box-11 { 
      width: 111px;
    }
    /* 导入 */
    * { 
      padding: 0;
      margin: 0;
    }

## 2.Scss： ##

.box {  width: 100px; }
    
    // 单行注释
    /* 多行注释 */
    /* 变量 */
    $number: 123px; .box2 {  width: $number; }
    
    /* 插值 */
    $i: 3;
    $key: margin; .box#{ $i} {  #{ $key}: auto; }
    
    /* 作用域：作用域有顺序 */
    $num: 12px; .box4 { 
      width: $num;
      $num: 13px;
      height: $num;
    }
    
    /* 选择器嵌套 */
    ul { 
      list-style: none; li { 
        float: left; div {  margin: 10px; }
        p {  margin: 20px; }
      }
    }
    
    /* 伪类选择器 */
    .class { 
      .box {  color: blue; }
      &:hover {  color: red; }
    }
    
    /* 属性嵌套 */
    .attribute { 
      font-size: 20px; font : { 
        size: 30px;
        weight: bold;
        family: 宋体;
      }
    }
    
    /* 运算 */
    /* 不同单位之间无法计算 */
    $numA: 100px; .box4 { 
      width: $numA + 3px;
      // 默认"/"是分割运算
      padding: (20px / 1.5);
      margin: 20px / 1.5;
      color: #001122 * 2;
    }
    
    /* 函数 */
    /* 内置函数： round(): 约分 percentage(): 百分比 random(): 产生随机数 sqrt(): 开方 */
    /* 自定义函数 */
    @function sum($n,$m) { 
      @return $n + $m;
    }
    .box5 { 
      width: round(3.5px);
      height: percentage(0.2);
      margin: random();
      // padding: sqrt(25%); sass无sqrt()
      font-size: sum(4px ,5px);
    }
    
    /* 混入 */
    @mixin show {  display: block; }
    @mixin hide($color) {  
      display: none;
      color: $color;
    }
    .box6 { 
      width: 100px;
      @include show;
      @include hide(blue);
    }
    
    /* 无命名空间 */
    
    /* 继承 */
    .line {  display: inline; }
    .box7 {  @extend .line; }
    /* 百分号占位 */
    %line1 {  display: inline; }
    .box7 {  @extend %line1; }
    
    /* 合并 */
    $background: (
      a: url(a.png),
      b: url(b.png)
    );
    $transform: (
      a: scale(2),
      b: rotate(30deg)
    ); .box8 { 
      background: map-values($background);
      transform: zip(map-values($transform)...);
    }
    
    /* 媒体查询(可以正常写) */
    .box11 { 
      width: 100px;
      @media all and(min-width: 768px) { 
        width: 600px;
      }
      @media all and(min-width: 1440px) { 
        width: 1200px;
      }
    }
    
    /* 条件 */
    $count: 4; .box12 { 
      @if($count > 4) {  width: 100px + $count; }
      @else {  width: 10px + $count; }
    }
    
    /* 循环 */
    @for $i from 0 through 3 { 
      .box-#{ $i} {  width: 100px + $i; }
    }
    
    /* 导入 */
    @import './reset.scss';

**编译后：**

@charset "UTF-8";
    .box { 
      width: 100px;
    }
    
    /* 多行注释 */
    /* 变量 */
    .box2 { 
      width: 123px;
    }
    
    /* 插值 */
    .box3 { 
      margin: auto;
    }
    
    /* 作用域：作用域有顺序 */
    .box4 { 
      width: 12px;
      height: 13px;
    }
    
    /* 选择器嵌套 */
    ul { 
      list-style: none;
    }
    
    ul li { 
      float: left;
    }
    
    ul li div { 
      margin: 10px;
    }
    
    ul li p { 
      margin: 20px;
    }
    
    /* 伪类选择器 */
    .class .box { 
      color: blue;
    }
    
    .class:hover { 
      color: red;
    }
    
    /* 属性嵌套 */
    .attribute { 
      font-size: 20px;
      font-size: 30px;
      font-weight: bold;
      font-family: 宋体;
    }
    
    /* 运算 */
    /* 不同单位之间无法计算 */
    .box4 { 
      width: 103px;
      padding: 13.33333px;
      margin: 20px / 1.5;
      color: #002244;
    }
    
    /* 函数 */
    /* 内置函数： round(): 约分 percentage(): 百分比 random(): 产生随机数 sqrt(): 开方 */
    /* 自定义函数 */
    .box5 { 
      width: 4px;
      height: 20%;
      margin: 0.46593;
      font-size: 9px;
    }
    
    /* 混入 */
    .box6 { 
      width: 100px;
      display: block;
      display: none;
      color: blue;
    }
    
    /* 无命名空间 */
    /* 继承 */
    .line, .box7 { 
      display: inline;
    }
    
    /* 百分号占位 */
    .box7 { 
      display: inline;
    }
    
    /* 合并 */
    .box8 { 
      background: url(a.png), url(b.png);
      transform: scale(2) rotate(30deg);
    }
    
    /* 媒体查询(可以正常写) */
    .box11 { 
      width: 100px;
    }
    
    @media all and (min-width: 768px) { 
      .box11 { 
        width: 600px;
      }
    }
    
    @media all and (min-width: 1440px) { 
      .box11 { 
        width: 1200px;
      }
    }
    
    /* 条件 */
    .box12 { 
      width: 14px;
    }
    
    /* 循环 */
    .box-0 { 
      width: 100px;
    }
    
    .box-1 { 
      width: 101px;
    }
    
    .box-2 { 
      width: 102px;
    }
    
    .box-3 { 
      width: 103px;
    }
    
    /* 导入 */
    * { 
      padding: 0;
      margin: 0;
    }