less与sass之间的那些事～～

less与sass之间的那些事～～

基本信息

• Sass(Scss)、Less 都是 CSS 预处理器，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。
• less是基于js在客户端处理。
• sass是基于Ruby语言在服务器端处理。
  
  

变量使用

• less 使用@符定义变量
• sass 用$符定义变量

// less
@width: 10px
@height: @width + 10px
.body {
	width: @width,
  height: @height
}

// 编译后的css
.body {
	width: 10px;
  height: 20px;
}
  
/** -------------sass----------------- */

$width: 10px
$height: @width + 10px
.body {
	width: @width,
  height: @height
}

// 编译后的css
.body {
	width: 10px;
  height: 20px;
}

混合方法(Mixin)

• less方法犹如声明的集合，使用时直接键入名即可
• sass用@mixin声明，使用时用@include关键字

// less-mixin
.test-mixin{
	display: flex;
  justify-content: center;
  align-items: center;
}
// 传参形式
.param-mixin(@var){
	widht: @var;
  height: @var;
}

.div{
	.param-mixin();
  .width-mixin(100px)
}
// 编译后的css
.div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

/** -------------sass----------------- */

// sass
@mixin sass-mixin {
	display: flex;
  justify-content: center;
  align-items: center;
}

.div{
  @include sass-mixin;
}

//编译后的css

.div {
  display: flex;
  justify-content: center;
  align-items: center;
}

继承

• less继承是less的一个伪类。它可以继承 所匹配声明中的全部样式
• sass@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

/** -------------sass----------------- */

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

/** 生成后的css */
.button-basic, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-submit  {
  background-color: green;
  color: white;
}

函数

• less内置了非常多的函数，例如颜色操作lighten(提亮) darken（加深）satruate(饱和)，字符串处理等等
• saas自定义函数它只允许在@函数体中使用，并且每个@function必须以@return结束。当遇到@return时，它会立即结束函数并返回其结果

/** 例如color() 用于解析颜色，将代表颜色字符串转换为颜色值 */
@color: #4D926F;

.header {
  color: saturate(@color, 10%);
}
// 编译后饱和度提高了 10%
.header {
  color: #5aaf81;
}

/** -------------sass----------------- */

// 自定义函数-sass 
@function calculate-rem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

body {
  font-size: calculate-rem(18px);
}
//编译后的css
body {
  font-size: 1.125rem;
}```