探索Sass3.3中的Maps(一)_html/css_WEB-ITnose
Sass的数据类型可以说是一个大家庭了,其数据类型中的数字、字符串、列表、颜色和布尔型,涵盖了大多数我们的需求。但是,正如一个框架开始的演变,在这个数据类型中还缺少一个关键性的工具:关联数组。
这里创建了一个变量$objects,并且给他赋了一个列表值。
$objects: (carrot, salt, chicken); 列表可以同时定义多个数据,但他不像数组一样有对应的key,没办法来分配上下文,也没有指数来索引这些数据。所以让我们看看如何创建一个关联数组(Sass中称之为Maps)。
这里有三个相同的值,对应添加了一个key,并且赋值给变量$objects。
$objects: (vegetable: carrot, mineral: salt, animal: chicken); 正如你所看到的,这个和列表长得非常的相似。你甚至可以在其上面执行列表相关的功能。这里变量$objects保存了三个值,每个值有一个对应的key。如果我们想要索引出salt值,我们并不需要知道他在哪个位置,我们只需要在传递其对应的key给map就行。
$just-a-pinch-of: map-get($objects, mineral); // $just-a-pinch-of == salt 为什么这是一种新的数据类型,他的存在真的有意义吗?我们来看一个示例。
管理变量 你应该很多次看到这样定义变量的方式:
$primary-nav-top-padding: .2em; $primary-nav-top-margin: .2em; $primary-nav-line-height: 1.3; $secondary-nav-background: white; $secondary-nav-color: black; Maps允许我们这样覆盖list:
$primary-nav: ( padding-top: .2em, margin-top: .2em, line-height: 1.3, ); $secondary-nav: ( background: white, color: black, ); 这是为每个变量创建一个简单的嵌套,这也可能使他们做为一组。
// Sass@mixin print-styles($map){@each $property, $value in $map { #{$property}: $value; } } .primary-nav {@include print-styles($primary-nav); } // Outputted CSS .primary-nav { padding-top: .2em; margin-top: .2em; line-height: 1.3; } 进一步了解Maps 需要更多的变量吗?Maps可以保存任何数据类型,包括其他的Maps。
// Sass $primary-nav: ( padding-top: .2em, margin-top: .2em, line-height: 1.3, nav-item: ( color: white; is-expanded: ( padding-top: 1em, margin-top: 1em ) ) );@mixin print-styles($map, $keys...){ $i: 1; $length: length($keys);@while $length >= $i { $map: map-get($map, nth($keys, $i)); $i: $i + 1; }@each $property, $value in $map {@if type-of($value) != map { #{$property}: $value; } } } nav.expanded {@include print-styles($primary-nav, nav-item, is-expanded); } print-styles的@mixin嵌套了一个Maps,并且向下遍历其每一个子Maps,直到使用完$keys。在这上面,他可以遍历每一个属性,并一个一个打印出来。
// Outputted CSS nav.expanded { padding-top: 1em, margin-top: 1em, } 每个单独的变量都可以是一个主导航或子导航的变异,而不要使用$main-navigation-nav-item-is-expanded-is-hovered-margin-top-on-the-blog-page。
在将来的一周,我们将看一个Maps的用例,使用map-get功能,从变量中调用变量。在此我们可以看看Brad Wade发表的文章《how the Department of Energy embraced Sass for their mobile strategy redesign》。
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处: 探索Sass3.3中的Maps(一)

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
