sass实用知识点

Posted 2020-10-21 叶家伟的博客

本文总结sass相关核心知识点

说明：本文的内容是，我在开发实践中总结的实用性比较强的sass知识点，其他未涉及的知识，如果对你有作用请自行查阅

sass知识目录

嵌套
注释
SassScript
@规则
Mixin指令

---

1. 嵌套

   一般写法
       div{
           p {} 
       }
   &父选择器引用
       div{
           &:hover {}
           &-span { background:red; }
       }
   相同前缀的css样式简写形式 
       div{
           font: {
               family: fantasy;
               size: 30em;
               weight: bold;
           }
       }
       div{
           font: 20px/24px fantasy {
               weight: bold;
           }
       }

2. 注释

   多行注释 /* */ 会被编译成css中的注释
   单行注释 // 在编译后的css中去除

3. SassScript

   声明变量 
       局部变量 $width: 2px;
       全局变量 $width: 50px !global;
   数据类型
       number -> 1 11.1 11px
       string -> "title"
           应用
               $name: "p";
               div #{$name} {
                   width: 100px;
               }
       color -> red
       boolean -> true
       null -> null
       list -> 11px 10px 12px 或者 11px, 10px, 12px
       map -> (key: value, key1: value1)
       function
   运算符
       + - * / % < > <= >=
       其中 / 运算只在以下三种情况中生效
           $width/2 和变量运算
           (10px/8px) 加上小括号
           5px + 8px/2px 作为其他运算表达式的一部分

4. @规则

   @import 导入其他的css,scss文件
       @import "demo"; 等效于 @import "demo.scss";
       scss文件默认会编译成css文件，如果你的scss文件只想被其他文件import，可以在定义的文件名前面加上_
           如 _demo.scss 然后使用 @import "demo" 即可
       嵌套的@import
           假设_demo.scss文件中定义了如下的css
               div{
                   width: 100%;
               }
           在main.css中导入
               .box {
                   @import "demo";
               }
           将编译成    
               .box div{
                   width: 100%;
               }
   @media 嵌套
       编译后@media包裹在选择器的最上面，在做响应式时候，这种写法可以避免重复书写选择器
       div {
           width: 100%;
           @media screen {
               height: 100%;
           }
       }
   @extend 选择器替换继承
       基本使用
           div{ 
               width: 100%;
           }
           div.box {
               height: 100%;
           }
           #id{
               @extend div;
           }
           相当于将包含div的选择器的样式复制一份，然后把div替换成#id，编译后结果如下
           div, #id {
               width: 100%;
           }
           div.box, .box#id {
               height: 100%;
           }
       占位符
           div ye%box{
               width: 100%;
           }
           #id{
               @extend %box;
           }
           编译后结果
           div ye#id {
               width: 100%;
           }

5. Mixin指令

   相当于定义函数
       @mixin size($w, $h) {
           width: $w;
           height: $h;
       }
       div{
           @include size(100%, 100%);
       }