less&sass_.less和css-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62201781/article/details/142953912

1.less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合(mixin)、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

1.1 less变量

less变量使用"@"定义

@width: 10px;
@height: 20px;

#header {
  width: @width;
  height: @height;
}
// 以上代码可编译为
#header {
  width: 20px;
  height: 20px;
}

1.2 混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

.box {
	width: 100px;
	height: 100px;
}
.box2 {
	.box();
	background-color: red;
}

可以进行传参操作

// @用于声明变量
.boxstyle(@px, @color) {
    width: @px;
    height: @px;
    background-color: @color;
}

1.3 嵌套

1.3.1 嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力
支持各种选择器嵌套。

// 嵌套
.div{
    width: 400px;
    height: 300px;
    // &符号指代父级.father
    &:hover {
        background-color: lightgreen;
    }
    // >符号代表子代选择器
    > .p{
        font-size: 20px;
        .span{
            color: lightblue;
        }
    }
}

如果嵌套不写">"默认表示为后代选择器的形式。

1.3.2 @ 规则

// @ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
.component {
    width: 300px;
    height: 300px;
    background-color: yellow;

    @media (min-width: 768px) {
        width: 600px;
        background-color: blue;
    }

    @media (min-width: 1280px) {
        width: 800px;
        background-color: green;
    }
}

以上代码会编译为

.component {
  width: 300px;
  height: 300px;
  background-color: yellow;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
    background-color: blue;
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
    background-color: green;
  }
}

1.4 转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

以上代码编译为

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

1.5 映射

可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  first: lightblue;
  second: lightgreen;
}

.div{
  color: #colors[first];
  border: 1px solid #colors[second];
}

1.6 作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

// 全局变量
@var: red;
#page {
  // 局部变量覆盖全局变量
  @var: white;
  #header {
    color: @var; // white
  }
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义

1.7 注释

块注释和行注释都可以使用

// 程序员自己看的注释，只可以在.less文件中看到
/* 别人可以看见的注释，可以在编译后的.css文件中看到 */

1.8 导入

可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "less"; // less.less
@import "index.css";

@import语句可能会根据文件扩展名被Less以不同的方式处理：
如果文件扩展名为.css，它将被视为CSS，@import语句将保持原样。
如果它有其他任何扩展名，它将被视为Less并被导入。
如果没有扩展名，将添加.less扩展名，并将其作为导入的Less文件包含。

2.sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。

特性：
兼容CSS：Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。
成熟：Sass已经经过其核心团队超过13年的精心打造。
行业认可：一次又一次地，行业把Sass作为首选CSS扩展语言。
社区庞大：数家科技企业和成百上千名开发者为Sass提供支持。
框架：有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。

2.1 sass变量

sass变量使用"$"符号定义

2.3 作用域

Sass 变量的作用域只能在当前的层级上有效果

$color: blue;
h2 {
  $color: pink !global;
  color: $color;
}
h3 {
  color: $color;
}

可以使用 !global 关键词来设置变量是全局的

2.4 嵌套

2.4.1 选择器嵌套

支持各种选择器嵌套，标签、类、id…

div{
  p {
    color: $colorFont;
  }
  div {
  	background-color: lightblue;
    p {
      color: #dddddd;
    }
  }
}

2.4.2 属性选择器嵌套

当需要设置的CSS属性具有相同的前缀时，可以使用属性嵌套

.box {
  font: {
    family: '楷体';
    size: 50px;
    weight: 'bold';
  }
}

2.5 导入

在 CSS 中我们可以通过 @import 来导入一个样式文件，Sass 扩展了 CSS 的 @import 规则，使得可以导入 CSS 后缀的样式文件和 Scss 后缀的样式文件，并且提供了对 mixin 、函数和变量的访问。

与 CSS 的 @import 不同的是， CSS 使用 @import 导入文件是在页面渲染的时候发起多个 http 请求来获取文件内容，而 Sass 的导入 @import 是在编译时获取文件内容导入的。

@import 指令可以让我们导入其他文件等内容。
我们可以安装不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。
类似 CSS，Sass 支持 @import 指令。

@import "variables";
@import "colors";
@import "reset";

使用 @use 替代 @import
Sass 官方团队不鼓励使用 @import 导入，并且在未来几年将逐步淘汰它，并最终将 @import 从 Sass 中完全删除。所以使用 @use 是官方团队更推荐的方式，@use 与 @import 的语法基本相同。
主要是以下几个原因你需要了解下：

1.@import 会使得所有变量、mixin 和函数都可以全局访问，这使开发者很难去维护这些定义的东西。
2。因为所有的都是全局的，那么 Sass 必须为所有的成员添加前缀，以避免命名冲突。
3.@extend 也是全局的，这样将很难预测哪些样式将被扩展。
4。每次使用 @import 时，每个样式表都会被执行，这会增加编译时间
无法定义下游样式表无法访问的私有成员。
基于上述的这些原因，Sass 官方团队将会逐渐淘汰 @import，可以使用 @use 替代，语法是相同的，所以我们在 v4.x.x 及以上的版本中尽量使用 @use 来导入。

2.6 混入

2.6.1 混入

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
.danger {
  @include important-text;
  background-color: green;
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
使用混入：@include 指令可用于包含一混入：

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

混入中也可以包含混入

2.6.2 混入传参

混入可以接收参数。
我们可以向混入传递变量。
定义可以接收参数的混入：

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

2.7 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

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

.button-report  {
  @extend .button-basic;
  background-color: red;
}

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

以上代码编译为如下css

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

.button-report  {
  background-color: red;
}

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

2.8 作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

3.less&sass区别

变量的声明
Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。
Sass拥有继承@extend
混合的使用
Less中使用混合时，只需在选择器a中写入选择器b，以".b();的形式"；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。
解析方式
Less可以向上/向下解析；Sass只能向上解析。
相比Less，Sass中增加了条件语句(if、if…else)和循环语句(for循环、while循环和each循环)还有自定义函数
实现方式
Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。