• 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;
          }
  • 相关阅读:
    Tomcat 配置和springframework MVC配置简介
    Java监控工具、调优、调试辅助函数
    发布一个 Linux 下的 C++ 多线程库
    《程序中的日期与时间》第一章 日期计算
    《多线程服务器的适用场合》例释与答疑
    Muduo 网络编程示例之零:前言
    muduo 与 boost asio 吞吐量对比
    Muduo 网络编程示例之二:Boost.Asio 的聊天服务器
    计算机图书赠送
    muduo 与 libevent2 吞吐量对比
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11619224.html
Copyright © 2020-2023  润新知