scss点滴yan

less基础详解
scss用法总览

sass总结

scss !global关键字

关键字用来提升局部变量的权限，将局部变量提升到全局

scss 中的运算

！default关键字

插值

@function指令

less,sass,styus三者的区别

Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css，所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友。
Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过When等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus
Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用（个人愚见）.

---1嵌套，三种很相似
.a {
  &.b {
    color: red;
  }
}
---2变量
less @开头
sass $开头
stylus中没有前缀
---3嵌套
三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同
---4继承
Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass，两者如出一辙。
Less 则又「独树一帜」地用伪类来描述继承关系；(下边有讲解)

5作用域

---sass中不存在全局变量，重命名的会替代全局的变量
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 
/*==================编译后======================*/
.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
} 

less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。

6混入

---Sass声明mixins时需要使用@mixin，后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式。
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
---less混合的用法是指将定义好的ClassA中引入另一个已经定义的Class，也能使用够传递参数，参数变量为@声明。
.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}
/*==================编译后======================*/
.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}
---stylus中的混合和前两款Css预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

7插值变量

SCSS.scss插值的写法为#{$ }，具体情况如下图所示：

LESS.less插值的写法为@{ }形式，具体情况如下图所示：

8导入@Import中的变量插值

Sass 中只能在使用 url() 表达式引入时进行变量插值
$device: mobile;
@import url(styles.#{$device}.css);
Less 中可以在字符串中进行插值
@device: mobile;
@import "styles.@{device}.css";
Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现
device = "mobile"
@import "styles." + device + ".css"

代码模块化

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

scss安装

npm i sass-loader -D
npm install node-sass --save-dev

less继承

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