scss 入门

scss 入门

1. scss 引入其他文件

1. 引入其他 .scss 文件

   @import 'index.scss'  
   

   这样的话，文件在编译后，会自动把引入的文件和当前文件合并为一个. scss 文件

2. 引入其他 .css 文件

   @import 'index.css'
   

   和引入. scss 文件不同，这样引入的. css 文件在编译后不会和当前文件合并为一个. scss 文件，而是继续保持为外链引入方式

2. scss 注释方法

scss 的注释有两种

1. 块注释
   /*
   */
2. 行注释
   //

3. scss 变量

scss 变量分为 3 种，以 $ 符号开头, 后面紧跟变量名。变量名和变量值之间用冒号：分开

1. 常规变量

   $key: value;
   

2. 默认变量

   $key: value!default;
   

   默认变量是可以被覆盖的,具体覆盖方法如下

   $font: 12px;
   $font: 14px!default;
   

3. 特殊变量

   $fontSize:14px;
   font:#{$fontSize}
   

4. 多值变量
   多值变量分为 list 和 map 两种类型，list 类似于 js 的数组，map 类似于对象

4. 嵌套

嵌套分为两种：

1. 选择器嵌套（目前经常使用的）
2. 属性嵌套：不经常使用
   在属性选择器中，&表示父元素选择器

5. 混合

@mixin 调用 @mixin 方法需要使用 @include

/*普通混合*/
@mixin font{
    line-height:10px;
    color: #fff;
}

.footer{
    @include font;
}

以上相当于:

.footer{
    line-height: 10px;
    color: #fff;
}

/*带参数混合*/
@mixin font($size:12px){  //这里面的参数是默认的意思
    font-size: $size;
}

.footer{
    @include font(16px);

6. 继承

使用继承会让该选择器继承指定选择器的所有样式, 要使用关键词 @extend，后面跟上指定的选择器

.font{
    font-size:14px;
    height: 16px;
}
.footer{
    @extend .font;
    border- 2px;
}

以上相当于:

.font, .footer{
    font-size:14px;
    height: 16px;
}
.footer{
    border- 2px;
}

站位选择器
% 选择器名，通过@extend 去调用，如果不调用，则文件编译后不会出现改该冗余 css 文件

%dir{
    font-size: 14px;
}
%clear{
    overflow: hidden;
}
div{
    @extend %dir;
}

只有 %dir 选择器被调用了，%clear 在编译的时候会被当做冗余文件给过滤掉，不会出现在编译后的.css文件中

7. 函数

sass 内置了很多函数，自己也可以定义函数。以 @function 开始@return 返回值

@function per(data){
    @return data/10px;
}

div{
    font-size: per(140px);
}

以上等价于:

div{
    font-size: 14px;
}

8. 其他功能

其他功能包括以下几点

1. 运算：对于（数字，颜色，变量）的四则（加减乘除）运算, 运算符前后各保留一格空格

2. if 判断：@if 可以单独使用，也可以配合 @else、@else if 一起使用

3. 三目运算符：if(true,1px,2px)，返回的值是 1px,if(false,1px,2px), 返回的值是 2px

4. for 循环，共有两种写法:
   1). @for va rfrom through
   2). @for var from to
   两种写法唯一的区别就是，through 包括 end 这个数，to 不包括 end 这个数

   .col {
        100%;
       $class-prefix: col-;
       @for $n from 1 through 12 {
       &.#{$class-prefix}#{$n} {
            ($n/12) * 100%;
         }
       }
       $class-prefix: offset-;
       @for $n from 1 through 12 {
         &.#{$class-prefix}#{$n} {
           margin-left: ($n / 12) * 100%;
         }
       }
     }
   

5. each 循环，@each $var in ,list 和 map 分别表示为 list 和 map 类型数据。