【问题标题】:LESS SCSS MIXIN conversionLESS SCSS MIXIN 转换
【发布时间】:2017-05-26 00:53:56
【问题描述】:

正文类可能有.m01.m02.m03.m04,具体取决于页面部分的颜色中断。 我正在尝试将LESS 转换为SCSS,但在转换下面的混音时遇到问题。

//-LESS
//-Sample colours
@m01_col_lvl_01: red;
@m02_col_lvl_01: green; 
@m03_col_lvl_01: blue; 
@m04_col_lvl_01: black; 


//- start colour mixin loop
.module_colours(4);
.module_colours(@n, @i: 1) when (@i =< @n) {

//-colours
@col_lvl_01_multi: "m0@{i}_col_lvl_01";

.m0@{i} #site-name {
    background-color:@@col_lvl_01_multi;
}

//- end colour mixin loop
.module_colours(@n, (@i+1));
}

【问题讨论】:

    标签: css sass less


    【解决方案1】:

    在大多数 Code sn-p 主机站点上,您可以将任何类型的 CSS 代码“转换”/“编译”成普通的CSS(3)。我总是使用Codepen,然后是CSS to SCSS converter。在你的情况下,我只是将它部分转换。 (在 Codepen 上,您必须点击小 按钮并设置您的 CSS Preprocessor)。

    【讨论】:

    • 我不知道。感谢RaisingAgent。我会试一试。
    【解决方案2】:

    虽然 RaisingAgent 提供的答案是一个相当不错的方法,但它不会教您如何在 Sass 中执行此操作,也不会帮助您了解 Sass 的工作原理。这个答案将帮助你。

    与 Less 不同,Sass 不允许访问名称通过插值动态创建的变量(@col_lvl_01_multi 变量)。为此,您必须使用列表和 nth 函数。

    Sass 还有一个内置的@for 指令,可用于创建循环,因此无需使用mixin 来模拟for 循环。因此,您的代码可以按如下方式转换为 Sass:

    $m_col_lvl_01_list: red green blue black; // the list
    
    @for $i from 1 through 4 { // the loop
      .m0#{$i} #site-name { // interpolated selector name
        background-color: nth($m_col_lvl_01_list, $i); //nth function to access the value based on for loop index.
      }
    }
    

    【讨论】:

    • 谢谢哈利。关于 SASS,我有很多东西要学。我正在从 LESS 迁移到 SASS,因为 Bootstrap 在版本 4 中放弃了对 LES 的支持。现在我有了这个比较,我可以陷入困境。
    • 是的,我原以为这是原因,不客气。乐于助人:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-12-18
    • 2014-07-07
    • 2020-06-10
    • 2012-12-13
    • 1970-01-01
    • 2017-11-29
    • 1970-01-01
    相关资源
    最近更新 更多