zoukankan      html  css  js  c++  java
  • 常忘知识点一:嵌套属性

    sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:

    nav {
      border: {
      style: solid;
      width: 1px;
      color: #ccc;
      }
    }

    嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。就像css选择器嵌套一样,sass会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css样式一样:

    nav {
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
    }

    对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:

    nav {
      border: 1px solid #ccc {
      left: 0px;
      right: 0px;
      }
    }

    这比下边这种同等样式的写法要好:

    nav {
      border: 1px solid #ccc;
      border-left: 0px;
      border-right: 0px;
    }

    属性和选择器嵌套是非常伟大的特性,因为它们不仅大大减少了你的编写量,而且通过视觉上的缩进使你编写的样式结构更加清晰,更易于阅读和开发。

    即便如此,随着你的样式表变得越来越大,这种写法也很难保持结构清晰。有时,处理这种大量样式的唯一方法就是把它们分拆到多个文件中。sass通过对css原有@import规则的改进直接支持了这一特性。

  • 相关阅读:
    怎么产生一个随机数
    C# 算速表达式
    Wpf OpenFileDialog
    完美世界自动更新程序
    只容许程序运行1个实例
    WPF 同一个程序 只允许 同时运行一个
    13 引用WINAPI
    winform窗体跟随窗体
    C#如何检测一个字符串是不是合法的URL
    WPF 下载网络文件 带进度条
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/11309165.html
Copyright © 2011-2022 走看看