Less/Sass

Less/Sass

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

• 变量

  • Less-@ @borderWidth: 2px;
  • Sass-$ $borderWidth: 2px;

• 混合

  • Less

      // 类混合
      // 类也会生效输入样式
      .a, #b {
        color: red;
      }
      .mixin-class {
        .a();
      }
      .mixin-id {
        #b();
      }
      // 函数混合
      // 函数不会输出生成样式
      .my-hover-mixin() {
        &:hover {
          border: 1px solid red;
        }
      }
      button {
        .my-hover-mixin();
      }
      // 带参数函数
      .mixin(@color) {
        color-1: @color;
      }
      // 带参数默认值
      .mixin(@color; @padding: 2) {
        color-2: @color;
        padding-2: @padding;
      }
      // 带参数默认值
      .mixin(@color; @padding; @margin: 2) {
        color-3: @color;
        padding-3: @padding;
        margin: @margin @margin @margin @margin;
      }
      .some .selector div {
        .mixin(#008000);
      }
      // @arguments 包含调用mixin时传递的所有参数
      .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
        -webkit-box-shadow: @arguments;
          -moz-box-shadow: @arguments;
                box-shadow: @arguments;
      }
      .big-block {
        .box-shadow(2px; 5px);
      }
      // 高级参数（...）和@rest变量，接受可变数量的参数
      .mixin(...) {        // matches 0-N arguments
      .mixin() {           // matches exactly 0 arguments
      .mixin(@a: 1) {      // matches 0-1 arguments
      .mixin(@a: 1; ...) { // matches 0-N arguments
      .mixin(@a; ...) {    // matches 1-N arguments
      // 模式匹配
      .mixin(dark; @color) {
        color: darken(@color, 10%);
      }
      .mixin(light; @color) {
        color: lighten(@color, 10%);
      }
      .mixin(@_; @color) {
        display: block;
      }
      // 通过switch 进行选择
      @switch: light;
      .class {
        .mixin(@switch; #888);
      }
    

  • Sass @mixin/@include

      /* 定义混合 */
      @mixin no-bullets {
        list-style: none;
        li {
          list-style-image: none;
          list-style-type: none;
          margin-left: 0px;
        }
      }
      /* 引入混合 */
      ul.plain {
        color: #444;
        @include no-bullets;
      }
      /* 混合器传参 */
      @mixin link-colors($normal, $hover, $visited) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }
      }
      /* 使用混合 */
      a {
        @include link-colors(blue, red, green);
      }
      /* Sass最终生成的是：*/
      a { color: blue; }
      a:hover { color: red; }
      a:visited { color: green; }
      /* 默认参数 */
      @mixin link-colors($normal, $hover: $normal, $visited: $normal) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }
      }
    

• 父选择器

  • Less-&
  • Sass-&

• 自选择器和同层选择器

  • Less
  • Sass

• 扩展

  • Less- &:extend

  nav ul {
    &:extend(.inline);
    background: blue;
  }
  .inline {
    color: red;
  }
  /*编译后*/ 
  nav ul {
    background: blue;
  }
  .inline,
  nav ul {
    color: red;
  }
  

  • Sass- @extend

  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
  /*编译后*/  
  .error,
  .seriousError {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    border-width: 3px;
  }
  

• 插值

  • Less- @{}

  @property: color;
  .widget {
    @{property}: #0ee;
    background-@{property}: #999;
  }
  /*编译后*/ 
  .widget {
    color: #0ee;
    background-color: #999;
  }
  

  • Sass- #{}

  $name: foo;
  $attr: border;
  p.#{$name} {
    #{$attr}-color: blue;
  }
  
  /*编译后*/  
  p.foo {
  	border-color: blue; 
  }
  

  • 跳过编译
    • Less- ~ ~'@{ant-prefix}-btn'
    • Sass- _ 文件已_开头 @import 引入不编译 Less 颜色相关函数
  • 颜色定义函数
    • rgb
    • rgba
  • 颜色通道函数
    • hsl
  • 颜色操作函数
    • tint 颜色区向白色 ``with-alpha: tint(rgba(00,0,255,0.5), 50%);`
    • shade 颜色区向黑色 with-alpha: shade(rgba(00,0,255,0.5), 50%);
    • lighten 颜色变量 lighten(hsl(90, 80%, 50%), 20%)
    • darken 颜色变暗 darken(hsl(90, 80%, 50%), 20%)
    • fadein 淡入 fadein(hsla(90, 90%, 50%, 0.5), 10%)
    • fadeout 淡出 fadeout(hsla(90, 90%, 50%, 0.5), 10%)
    • ssaturate 增加饱和度 saturate(hsl(90, 80%, 50%), 20%)
    • desaturate 减少饱和度 desaturate(hsl(90, 80%, 50%), 20%)
    • min 混合 mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
  • 颜色混合函数
    • multiply
    • screen 乘 颜色更深
      • color1：颜色对象。
      • color2：颜色对象。
    • overlay 跟 乘 相反 颜色更浅
    • softlight 使光通道变亮，而黑暗通道变暗
    • hardlight 避免纯黑色导致纯黑色，而纯白色导致纯白色。
    • difference 跟overlay作用相同但颜色角色相反。
      • color1：用作颜色对象的颜色对象。
      • color2：用作替代的颜色对象。
    • exclusion 在逐个通道的基础上，从第一种颜色中减去第二种颜色。负值取反。
    • average 类似 difference 的效果。
    • negation 与 difference 作用相反