zoukankan      html  css  js  c++  java
  • 5.Scss的插值

    1.什么是scss的插值?

    在Sass中,我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”,从而来“构造”一个新的选择器名、新的属性名以及新的属性值。

    2.语法:

    #{变量}

    例如:插值用于"选择器名"

               @for $i from 1 through 3

              {
                .item-#{$i}
                  {
                10px * $i;
                  }
              }
                 编译出来的css代码:
                              .item-1
            {
              width: 10px;
            }
            .item-2
            {
              width: 20px;
            }
            .item-3
            {
            width: 30px;
            }
    例如:插值用于"属性名"
             $border:border;
          div
          {
            #{$border}-1px;
            #{$border}-style:solid;
            #{$border}-color:red;
            }
    编译出来的Css代码如下:
                div
            {
            border-width: 1px;
            border-style: solid;
            border-color: red;
          }
    注意:变量只能用于属性值,是不能直接用于属性名的
    举例:插值用于“属性值”
        @for $i from 1 through 3
          {
          .item-#{$i}
            {
              border:#{$i}px solid red;
            }
          }
        编译出来的Css代码如下:
        .item-1
          {
            border: 1px solid red;
          }
        .item-2
          {
            border: 2px solid red;
          }
        .item-3
          {
            border: 3px solid red;
          }
  • 相关阅读:
    P6406 [COCI2014-2015] Norma 分治+数学
    CF547D Mike and Fish 欧拉回路
    P6628 [省选联考 2020 B 卷] 丁香之路 欧拉路+最小生成树
    2020 CSP-S2 游记
    CF594D REQ 树状数组+质因数分解
    CF416E President's Path floyd
    CF1385F Removing Leaves 拓扑排序
    CF449C Jzzhu and Apples 思维题
    回溯法与八皇后问题
    codewars-7kyu:Sum of the first nth term of Series
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11619224.html
Copyright © 2011-2022 走看看