SCSS常用语法

向右看齐 2023-03-01 03:26 4阅读 0赞

#### for循环 ####

$colors: 
    	(key: default, value: gray),
        (key: red, value: red),
        (key: orange, value: orange),
        (key: yellow, value: yellow),
        (key: cyan, value: cyan),
        (key: blue, value: blue),
        (key: purple, value: purple);
    
    @mixin color($key, $val) { 
        .color-#{ $key} { 
            color: $val;
        }
    }
    
    @for $i from 1 through length($colors) { 
        $item: nth($colors, $i);
        @include color(map-get($item, key), map-get($item, value));
    }

#### each循环 ####

$colors: 
    	(key: default, value: gray),
        (key: red, value: red),
        (key: orange, value: orange),
        (key: yellow, value: yellow),
        (key: cyan, value: cyan),
        (key: blue, value: blue),
        (key: purple, value: purple);
    
    @mixin color($key, $val) { 
        .color-#{ $key} { 
            color: $val;
        }
    }
    
    @each $item in $colors { 
        @include color(map-get($item, key), map-get($item, value));
        
        //$i: index($colors, $item); //获取下标
    }

#### Mixin ####

基础

@mixin red { 
      color:red;
    }
    .mixin1 { 
      @include red();
    }

函数

@mixin color($color) { 
      color: $color;
    }
    .mixin2 { 
      @include color(blue);
    }

条件

@mixin option($option) { 
      @if $option==1 { 
        color: yellow;
      }
      @else if $option==2 { 
        color: green;
      }
      @else { 
        color: black;
      }
    }
    .mixin3 { 
      @include option(2);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 SCSS常用语法总结

Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (in

柔光的暖阳◎/ 2023年06月19日 09:57/ 0 赞/ 25 阅读

相关 SCSS常用语法

for循环 $colors: (key: default, value: gray), (key: red, value: red),

向右看齐/ 2023年03月01日 03:26/ 0 赞/ 5 阅读

相关 sass的scss的语法

sass的scss的语法 > 1.`$s:"red"` 定义变量后面加`!default`就是默认值，有值掉值，没值取默认，不论前后 `$a:"red"; $a:"blu

喜欢ヅ旅行/ 2022年12月12日 04:51/ 0 赞/ 230 阅读

相关 MarkDown 常用语法

Markdow语法使用规范 \\ 标题语法（6级标题） ==语法规范： “\” 后最好加个空格。除此之外，还有 5 级标题，依次有不同的字体大小，即==

待我称王封你为后i/ 2022年06月07日 11:37/ 0 赞/ 307 阅读

相关 scss语法入门

目录 scss引入其他文件 scss注释方法 scss变量嵌套

雨点打透心脏的1/2处/ 2022年05月26日 09:21/ 0 赞/ 362 阅读

相关 YAML常用语法

前几天，小编学习了springboot和springcloud中的一些配，其中有很多的博客和书籍都使用的yml文件来作为项目配置文件编写的，小编在github上

落日映苍穹つ/ 2022年05月20日 08:16/ 0 赞/ 271 阅读

相关 SCSS 语法

前言：Sass是CSS预处理器，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，且完全兼容 CSS 语法，而SCSS是Sass3版本当中引入的新语法特性。优点：

ゝ一世哀愁。/ 2022年02月14日 02:44/ 0 赞/ 318 阅读

相关 scss-基本语法

文件 scss文件分为两种： 1. 部分文件，文件名以\_开头，可以被多个文件引用；比如\_part1.scss，\_part2.scss。 2. 文件，可以是.s

我会带着你远行/ 2021年12月22日 15:33/ 0 赞/ 439 阅读

相关 Sass（scss）常用语法记录

1. sass与scss区别 SCSS 需要使用分号和花括号。 sass举例： sidebar width: 30%

落日映苍穹つ/ 2021年10月06日 02:28/ 0 赞/ 470 阅读

相关 VBA常用语法

最近接触了一下VBA编程，才知道Excel还能编程，而且还如此强大，真的是惊呆了，话不多说，先了解一下VBA常用的语法吧。 1、基础语法 //高级for循环

素颜马尾好姑娘i/ 2021年09月07日 06:02/ 0 赞/ 547 阅读