快速入门scss知识

以你之姓@ 2022-05-29 03:29 210阅读 0赞

# scss语法介绍 #

--------------------

1.自定义变量

$color:pink;
    .test1{
        background-color:$color;
    }

通过编译工具编译出来后

.test1{
        background-color:pink;
    }

2.插入一个变量

$right:right;
    .test2{
        border-#{$right}:1px solid #000;
    }

3.子元素书写

.text3{
        .text33{
     border:1px solid;
        }   
    }

4.样式的加减乘除

$paramer:3;
    .text4{
     height:(1px+3px);
     width: (96px/6);
     right: $paramer*4;
    }

5.继承

.class5{
     border:1px solid red;
    }
    .class5E{
        @extend .class5;
     font-size:20px;
    }

6.代码块的复用

@mixin text6 {
        height:50px;
        left:20px;
    }
    .text6M{
        @include text6
    }
    //这里的mixin就是定义一个可以复用的代码段，当然我们也可以给它传递一个参数，就像这样一样：
    @mixin text66($height){
        height:$heigth;
        left:20px;
    }
    .text6N{
        @include text66(100px);
    }

7.if语法，通过对if的判断来决定使用那一套样式

.text7{
        @if 1 +2 == 3 {
            border:1px solid ;
        }
        @if 5 < 3 {
            border:2px dsahed red;
        }
    }
    当然，我们都知道if一般是要和else配合的，所以我们也可以这样写
    .test77{
        @if lightness($color) > 30%{
            background-color:#fff;
        }@else{
            background:#0ff;
        }
    }
    这里的lightness是一个scss颜色函数，$color指向之前定义的值。

8.循环语法，包括最常见的三种循环方法，for,while,each

//for 循环
    @for $i from 1 to 5 {
        .item-#{$i} { 
            border:#{$i}px solid;
        }
    }
    //while 循环
    $m:8;
    @while $m > 0 {
        .items-#{$m} { 
            width:2em*$m;
        }
        $m:$m - 2 ;
    }
    //这里可以对$m进行运算 让它每次都减去2
    //each 语法
    @each $img in q,w,e,r {
        .#{$img} { 
            background-image:url('#{$img}.png')
        }
    }

9.函数语法

@function double ($number){
        @return $number*2;
    }
    .text9{
        font-size:double(20px);
    }

10.import导入语法

@import 'other.scss'
    这样就在你现在的scss中导入了other.scss编写的scss