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;
          }
  • 相关阅读:
    VS2013 调试窗口一闪而过的解决方法
    什么是文件?
    局部变量和全局变量的区别
    一个简单java程序的要素
    运行一个简单的Java程序
    Javascript 构造函数原型继承机制
    函数式编程之一等公民的函数
    弹性布局flex-兼容问题
    TypeScript中的枚举类型
    依赖注入
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11619224.html
Copyright © 2011-2022 走看看