13.4. Sass nesting rules and attributes

发布时间 : 2025-10-25 13:35:46 UTC      

Page Views: 9 views

Sass nested CSS selectors are similar to HTML’s nesting rules.

As follows, we nest the style of a navigation bar:

13.4.1. Sass Code:

nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 

In the instance, the selectors for ul , li , and a are all nested within the nav selectors.

Convert the above code to CSS code, as follows:

13.4.2. Css Code:

nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 

Sass nesting properties

Many CSS attributes have the same prefix, for example: font-family , font-size and font-weight text-align , text-transform and text-overflow .

In Sass, we can write them using nested attributes:

13.4.3. Sass code:

font: { family: Helvetica, sans-serif; size: 18px; weight: bold; } text: { align: center; transform: lowercase; overflow: hidden; } 

Convert the above code to CSS code, as follows:

13.4.4. Css Code:

font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: center; text-transform: lowercase; text-overflow: hidden; 
《地理信息系统原理、技术与方法》  97

最近几年来,地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持,如城市管理、区划、环境整治等等,地理信息成为信息时代重要的组成部分之一; “数字地球”概念的提出,更进一步推动了作为其技术支撑的GIS的发展。 与此同时,一些学者致力于相关的理论研究,如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面,并且这两个方面构成了相互促进的发展过程。