scss语法

scss 2019 

scss 是一种动态css 语言

1. 混合宏
2. 继承
3. 占位符
4. 嵌套  Class中嵌套class，从而减少重复的代码
5. 运算  CSS中用上数学表达式
6. 颜色功能 可以编辑颜色
7. 名字空间(namespace) 分组样式，从而可以被调用
8. 作用域 局部修改样式
9. JavaScript 赋值 在CSS中使用JavaScript表达式赋值

和less区别

1. 变量在Less和Sass中的唯一区别就是Less用@，Sass用$
2. Less是基于JavaScript 实现的，是在客户端处理的
3. Sass是基于Ruby实现的，是在服务器端处理的

注释(less-js)

// 但这种不会被编译的注释
/*会被编译的注释*/

数据类型

---

scss 2012

scss  是一种编写css 的预编译器 

1. 嵌套  简化 css 代码量
2. 选择器  &父选择器
3. 命名空间
4. 定义变量  $开头定义 css 全局变量
5. 插值语法   #{$attr}
6. 继承 @extend

<style lang="scss" scoped>
    @import "~@assets/styles/define.scss";
</style>
/* 
嵌套:内层的样式将它外层的选择器作为父选择器
*/
.sign {
    * {
        user-select: none;
        outline: none;
      }
}
/*
父选择器&：用 & 代表嵌套规则外层的父选择器
|| .sign-container-form .item-code{}
*/ 
.sign-container-form {
  .item {
    &-code { input{width: 221px;}}
  }
}
/*
css 命名空间管理
font-family
font-size
font-weight
*/ 
.funky {
  font: 20px/24px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*
Sass 额外提供了一种特殊类型的选择器：占位符选择器
必须通过 @extend 指令调用
*/ 
/*
变量 $ 
嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），
不在嵌套规则内定义的变量则可在任何地方使用（全局变量）
将局部变量转换为全局变量可以添加 !global 声明
*/ 
/*
数据类型
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，
用空格或逗号作分隔符，1.5em 1em 0
2em, Helvetica, Arial, sans-serif
maps, 
相当于 JavaScript 的 object，(key1: value1, key2: value2)
*/ 
/*
SassScript 支持数字的加减乘除、取整等运算
(+, -, *, /, %)
*/ 
/*
插值语句 #{}
*/ 
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/*
一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式
@extend 继承
*/ 
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

  
   

---

参考链接

http://www.ruanyifeng.com/blog/2012/06/sass.html  2012 年教程

https://blog.youkuaiyun.com/Ginny_2017/article/details/100007285   2019 年