Sass(Scss)、Less的区别与选择 + 基本使用

// Less
@width: 10px;
@height: @width + 10px;
@test: left;
#header {
  width: @width;
  height: @height;
  margin-@{test}: 5px;
}

/* ------------------------------ */

// Sass (老版本 Sass 使用 !，不是 $。)
$blue: #1875e7;　
div {
  color: $blue;
}

$side: left;
$my-radius: 5px;
.rounded {
  border-#{$side}-radius: $my-radius;
}

// Less
// 所有操作数被转换成相同的单位(乘法和除法不作转换)
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

@base: 2cm * 3mm; // 结果是 6cm

// 颜色运算
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

// 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

/* ------------------------------ */

// Sass
$var: 100px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

// Less
#header {
  color: black;
  width: 600px;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  &-bottom {
    background-image: url("header-bottom.png");
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

/* ------------------------------ */

// Sass
。。。跟上面大同小异。。。

// Less
/* 一个块注释，源文件与编译后正常默认文件都保留。
 * style comment! 
 */
@var: red;

// 这一行被注释掉了，仅保留源文件中！
@var: white;

/* ------------------------------ */

// Sass
/* 一个块注释，源文件与编译后正常默认文件都保留。
 * style comment! 
 */
$var: red;

// 这一行被注释掉了，仅保留源文件中！
$var: white;

/*!
 重要注释！压缩模式也会保留
*/

// Less
// .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。
// 注意，你也可以使用 #ids 作为 mixin 使用。
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

/* ------------------------------ */

// Sass
@mixin bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  @include bordered;
}
.post a {
  color: red;
  @include bordered;
}

// Less
@min768: ~"(min-width: 768px)"; // 从 Less 3.5 开始，可以简写为：@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 编译后
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

// Less
@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

// ui 给到的一般都是 px，可以使用此函数转换。
.rem(@name, @px) {
   @{name}: unit(@px / 100, rem);
}
.test(@a, @b) {
  @width: @a + @b;
}
@my-radius: 10px;
.border_radius(@v, @h, @radius: @my-radius){
  box-@{v}-@{h}-radius: @my-radius;
}
.good{
  .test(20px, 30px);
  .border_radius(top, left);
  .border_radius(bottom, right, 5px);
  width: @width; 
}

/* ------------------------------ */

// Sass
@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

// 除了以下方法可使用 less 的 plugin
// https://lesscss.org/features/#plugin-atrules-feature
// less 使用 js （未测试，纯百度到的栗子而已！）
.calcHeight() {
  // 3.5+ 可省略 ~
  @functions: ~`(function() { 
    this.calcHeight = function() {
      return document.body.clientHeight - document.getElementById('test').height;
    };
  })()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.calcHeight();
.test {
  width: `calcHeight()`;
}

// 或者巧妙使用 css 的 var() 函数或者 attr() 函数
// var() 函数必须要获取内联属性，即必须要是在 style 中的属性，且必须要加上 -- 前缀来标明这是一个自定义属性，否则浏览器无法解析。
// attr() 函数需要获取的标签中的属性，也可以是自定义属性, 但是必须要是在标签中的属性。
// <div self-property="attr-value" style="--test: 'var-value'"></div>
// attr(self-property) 或 var(--test)

// 所以我们就可以曲线救国，实现上面的需求。
// 先在 JS 代码中使用 [document.body.clientHeight - document.getElementById('test').height] 获取到数据，再填到页面中标签属性或 style 属性中。
// 在 CSS 中定义变量 $test: var(--参数名) 或 attr(参数名);
// 或 @test: var(--参数名) 或 attr(参数名);
// 最后直接使用
.test {
  width: @test; // Less
  width: $test; // Sass
  width: calc(100% - #{$test}); // Sass
}

// Less
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// OUTPUT
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}

// https://lesscss.org/features/#extend-feature

// Less (利用此特性也可变相实现继承)
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}
#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}
// 注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间后面（例如 #bundle().tab）。

// Less
#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
// OUTPUT
.button {
  color: blue;
  border: 1px solid green;
}

@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}
.navbar {
  display: block;
  @media (min-width: @sizes[tablet]) {
    display: inline-block;
  }
}

// Less
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

// Less
@import "library"; // .less 可以省略后缀
@import "test.css";

$color: red;
p {
  color: $color;
  @if $color == red {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

.class1 {
  border: 1px solid #ddd;
}

.class-sub {
  @extend .class1;
  font-size: 120%;
}