sass、scss、css、less

最新推荐文章于 2024-08-20 17:31:01 发布

小手牵大喵

最新推荐文章于 2024-08-20 17:31:01 发布

阅读量535

点赞数

分类专栏：前端文章标签： css sass scss

本文链接：https://blog.csdn.net/mywulian/article/details/125368323

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

less、scss、sass都是CSS预处理器语言

为什么要使用CSS预处理器？

css缺点：
（语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。）

scss和sass的区别：

文件扩展名不同：“.sass”和“.scss”
语法规则不同：sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进，scss更常用

sass与less的区别：

Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
Less环境较Sass简单
Less使用较Sass简单
Sass功能略强大一些：sass有变量和作用域、sass有函数的概念、进程控制、数据结构

为什么选择使用Sass而不是Less？

1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。
2、就国外讨论的热度来说，Sass绝对优于LESS。
3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。
5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

sass 中文文档：sass中文网

sass教程：sass基础

sass

一、导入文件

命名约定

sass局部文件的文件名以下划线开头。
这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。
举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”。

默认变量值

使用sass的==!default标签==可以实现这个目的。
!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

嵌套导入

sass允许@import命令写在css规则内

原生css的导入

不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

二、注释

静默注释：以//开头，注释内容直到行末，不同于css标准注释格式/* … */的注释语法

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

三、变量

变量声明：$
引用也要$

$hong:red;
.app{
    color:$hong;
    border:1px solid $hong;
}

四、嵌套

子选择器可以不写前面的父级

.fat{
    color:$hong;
    border:1px solid $hong;
    width: 200px;
    height: 200px;
    div{
        background-color: $hong;
        width: 100px;
        height: 100px;
    }
}

群组选择器的嵌套
由这种

.container h1, .container h2, .container h3 { margin-bottom: .8em }

改为

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

子组合选择器：>

a>b:选择a的子元素里面命中b的

同层相邻组合选择器：+

a+b：选择a的同层的相邻的b

同层全体组合选择器：~

a~b：在a后面与a同层的所有b

属性嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

五、混合器

混合器使用==@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样就可以轻易地通过@include==引用这个名字重用这段样式

混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
传参：
a {
  @include link-colors(blue, red, green);
}
或
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

默认参数值

参数默认值使用==$name: default-value==的声明形式

@mixin link-colors($normal,$hover: $normal,$visited: $normal)
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

六、选择器继承

通过@extend语法实现

//通过选择器继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小
不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则