SASS预处理器-MLHITRE

文章目录

@首先说一下sass和scss的区别
1，使用变量
2，规则嵌套
3，导入SASS文件
4，静默注释
5，混合器
6，选择器继承

参考网站：https://www.sass.hk/

SASS/SCSS

@首先说一下sass和scss的区别

sass和scss其实现在算是一个东西的两种写法，sass是缩进形式（不允许大括号和分号），scss是大括号加分号形式（也就是普通的css样子）

值得注意的一点是sass语法形式不支持跨多行的表达式，也就是说你一句完整的话必须在一行内写完

反之，scss对空白符号是不敏感的。

文章里的例子都是使用scss格式.

1，使用变量

//变量声明
$highlight-color:#90;

变量可以在css规则块之外存在,但是在规则块内定义的变量只能在此规则块内使用 sass变量可以与css中的属性名和选择器名相同，包括中划线和下划线也是任意使用（具有互通性）

2，规则嵌套

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

有些特殊场景类似：hover的伪类，为了解决这种情况，sass提供了一个特殊结构&

article a {
  color: blue;
  &:hover { color: red }
}

因为一般情况下会通过空格拼接，此时用&，&会直接被替换为父选择器

群组选择器的嵌套：

//选择article下紧跟着的子元素中命中section选择器的元素
article > section { border: 1px solid #ccc }  
// 选择header元素后紧跟的p元素
header + p { font-size: 1.1em }
//选择所有跟在article后的同层article元素
article ~ article { border-top: 1px dashed #ccc }

这些组合选择器可以放在嵌套里，外层选择器后面或者里层选择器前面

嵌套属性：

把属性名从中划线处断开，在根属性后面添加一个冒号，紧跟一个{}

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

3，导入SASS文件

css有个@import特性可以在css文件中引入其他css文件，但是只有执行到@import时才会去下载要引入的文件导致页面加载变慢，但是sass改善了这个问题

sass而且还不需要指明被导入文件的全名，可以省略后缀名。

使用sass部分文件：

有一部分文件只是用来被引入的，那么文件名通过下划线开头（_night-sky.scss），这样的文件不会被单独编译

在引入时可以省略下划线

@import "themes/night-sky";

默认变量值：

一般我们反复声明变量，最后一个变量会覆盖之前的变量，但是如果我们引入了他人编写的sass文件，我们可能会改变引入文件中变量的值，比如下面的例子，如果用户在导入前声明过同名变量，那么400px就会失效，如果没有的话该变量默认是400px。

注意：这样理解，因为我们的导入文件都相当于在声明位置导入，其中的变量会覆盖掉用户自定义的变量，所以我们是在被导入文件中这样做。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

嵌套导入：

@import命令可以写在css规则里，这种导入方式的文件会直接插入到导入文件的位置。

// _blue-theme.scss
aside {
  background: blue;
  color: white;
}

// 当前文件
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

原生css导入： 因为sass兼容原生的css，所以它也支持原生的css@import，如下三种情况会使用原生导入，首先是css后缀名的导入文件，其次是url地址为css的后缀名，也就是说我们要把css后缀名改为scss

4，静默注释

//形式的注释不会出现在生成的css文件里，而/**/形式的会出现在生成的css文件里（但是注意如果这种注释在原生css中的位置原本就是不允许的）

5，混合器

实现大段代码的重用

主要用于展示性样式的重用

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

给混合器传参：

@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
  );
}

默认参数值：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
// 如果我们只传入一个参数，那么其他的值都会被赋值这个参数

6，选择器继承

继承生成的css代码相对更少

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

类名主要用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。 **

李致知

SASS预处理器