ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

scss的基本用法

2021-04-16 18:01:38  阅读:269  来源: 互联网

标签:scss 基本 extend color 用法 content fontSize background red


本文记录scss的基本用法

引入外部文件 @import "xxxxxxx"

1.scss定义变量 $

$fontSize: 100px;
.content {
    font-size: $fontSize
}

2.scss中继承  语法: @extend  XXX

.extend {
    color: red;
}
$fontSize: 100px;
.content {
    font-size: $fontSize;
    @extend .extend;
}

3.scss中混入可传参设置默认值 语法:定义@mixin  引入@include

.extend {
    color: red;
}
@mixin bd($color: red) {
    background-color: $color
}
$fontSize: 100px;
.content {
    font-size: $fontSize;
    @extend .extend;
    @include bd(yellow)
}

混入跟继承的区别,继承实在.content加类.extend  混入是clone一份代码放到.content里,编译后的结果

.extend, .content {
    font-size: 26.667vw;
    background-color: yellow;
}

4.scss循环 语法:@for $i from 1 through 30 {}

@for $i from 1 through 10 {
    .pd-#{$i} {padding-bottom: $i  + px}
}

5.遍历  语法: @each $i in red, blue, yellow

@each $i in red, blue, yellow {
    .bg-#{$i} {
         background-color; $i  
    }  
}
//或者
$color: (1:purple, 2:green, 3:yellowgreen);
@each $k, $i in $color {
    .bd-#{$k} {
        border: 1px solid $i;
    }
}

6.if判断 @if  @else if

@mixin bd($color) {
    @if $color === red { background-color: red}  
    @else if $color === blue{ background-color: blue}  
    @else $red=== blue{ background-color: red} 
}

7.定义函数 语法: @function() { @return 111}

@function double($i) {
    @return $i * 10;
}

 

标签:scss,基本,extend,color,用法,content,fontSize,background,red
来源: https://www.cnblogs.com/95xdy/p/14668139.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有